ARIA Roles & Attributes

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that communicate the role, state, and properties of elements to assistive technologies. It bridges the gap when native HTML elements are not enough for complex interactive patterns.

The Rules of ARIA

Before using ARIA, remember these rules from the W3C:

1. Do not use ARIA if you can use native HTML. A <button> is always better than <div role="button">.
2. Do not change native semantics unless absolutely necessary. Do not put role="heading" on a <button>.
3. All interactive ARIA elements must be keyboard accessible. If you add role="button", you must handle Enter and Space key events.
4. Do not use role="presentation" or aria-hidden="true" on focusable elements. This hides them from screen readers while keeping them in the tab order, creating a confusing experience.

Common ARIA Roles

When you build custom widgets that have no native HTML equivalent, use roles to communicate purpose:

Other useful roles include dialog, alertdialog, menu, menuitem, tooltip, and tree.

Essential ARIA Attributes

aria-label and aria-labelledby

Use these when a visible label is not present or when you need to override the visible text:

aria-describedby

Links an element to additional descriptive text:

<label for="username">Username</label>
<input type="text" id="username" aria-describedby="username-help" />
<p id="username-help">Must be 3-20 characters, letters and numbers only.</p>

aria-expanded

Communicates whether a collapsible section is open or closed:

Toggle aria-expanded between "true" and "false" with JavaScript as the menu opens and closes.

aria-hidden

Removes an element from the accessibility tree while keeping it visually present. Useful for decorative elements:

<!-- Decorative icon next to text — screen reader ignores the icon -->
<span aria-hidden="true">🎨</span>
<span>Design Tools</span>

Never use aria-hidden="true" on elements that contain focusable children.

Live Regions

Live regions announce dynamic content changes to screen reader users. This is critical for notifications, chat messages, and form validation errors:

The role="alert" shorthand is equivalent to aria-live="assertive". Use it sparingly — interrupting users too often is a poor experience.

Key live region attributes:

• aria-live="polite" — announce when the user is idle
• aria-live="assertive" — announce immediately
• aria-atomic="true" — announce the entire region, not just the changed part
• aria-relevant="additions text" — control which changes trigger announcements

Common Patterns

Disclosure (show/hide)

Accessible Modal Dialog

When aria-modal="true" is set, screen readers should confine navigation to the dialog content.

Best Practice

Always test ARIA additions with an actual screen reader. ARIA attributes are promises to assistive technology — if you add role="tab" but do not implement the expected keyboard behavior, you make the experience worse, not better.