ARIA Essentials
Overview
Accessible Rich Internet Applications (ARIA) is a W3C specification that provides a massive arsenal of HTML attributes used to bridge the gap between complex custom UI (like React Drag-and-Drop, custom sliders, or custom tabs) and assistive screen readers. When you build a custom toggle switch out of a <div>, the browser just sees a generic <div>. ARIA attributes allow you to forcibly tell the screen reader exactly what the element is acting as, and what its current state is.
Syntax
<!-- 1. The Role Attribute: Redefining what an element is -->
<!-- We built a custom progress bar out of a div -->
<div
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
>
75%
</div>
<!-- 2. ARIA States: Communicating live changes -->
<button aria-expanded="false" onclick="toggleMenu()">
Menu
</button>
<!-- 3. ARIA Live Regions: Announcing dynamic React/AJAX updates -->
<!-- The screen reader will instantly announce any text injected into this div -->
<div aria-live="polite" id="notification_toast">
<!-- JavaScript injects: "Form saved successfully!" -->
</div>
<!-- 4. ARIA Hidden: Hiding junk from screen readers -->
<!-- Visually seen, but screen readers will completely ignore it -->
<span aria-hidden="true">🔔</span> NotificationsCommon Pitfalls
- The 'First Rule of ARIA': No ARIA is better than bad ARIA. Using ARIA incorrectly actually breaks accessibility worse than using none at all. If a native HTML element exists (like
<button>), always use it instead of building a<div role="button">. - Forgetting to update ARIA states via JavaScript. If you have a dropdown menu triggered by a button with
aria-expanded="false", you MUST write JavaScript to swap it toaria-expanded="true"when the menu opens, or the screen reader user will never know the menu opened.
Interview Questions
aria-hidden="true" and standard CSS display: none?display: none removes the element completely from both the visual screen and the screen reader. aria-hidden="true" leaves the element visually visible on the screen, but explicitly forces the screen reader to ignore it.
Real-World Example
A custom React toggle switch heavily reliant on ARIA.
<button
role="switch"
aria-checked="true"
aria-label="Enable dark mode"
class="custom-toggle-ui"
>
<!-- The visual ball inside the switch -->
<span class="thumb"></span>
</button>Check Your Knowledge
Test your understanding of ARIA Essentials with these quick questions.