ARIA Roles in HTML
Improve Accessibility with ARIA Attributes

ARIA Roles in HTML: Speaking the Language of Accessibility

ARIA (Accessible Rich Internet Applications) roles give screen readers the information they need to communicate your web page’s purpose clearly to users with disabilities. ARIA helps bridge the gap where HTML falls short — but like any powerful tool, it must be used carefully.

1. What is ARIA?

ARIA is a WAI (Web Accessibility Initiative) specification that adds attributes to HTML elements to improve accessibility. These attributes describe roles, states, and properties that assistive technologies can interpret.

ARIA Roles Syntax:

<div role="button">Click Me</div>

[ Screen reader announces this as a button, not just a div ]

2. Common ARIA Roles

| Role | Purpose | |------|---------| | button | Identifies clickable elements as buttons | | navigation | Labels a navigation landmark | | main | Identifies the main content region | | alert | Announces critical alerts immediately | | dialog | Marks up modal dialogs | | tablist, tab, tabpanel | Structure for accessible tabs | | listbox, option | Used for dropdown-like widgets |

3. ARIA with Semantic HTML

Best practice: Always prefer native semantic HTML elements first. Only use ARIA roles when semantic HTML is unavailable or insufficient.

Example 1: Avoiding Redundant ARIA

// Don't do this
<button role="button">Submit</button>

Native <button> already conveys that role — so ARIA here is redundant.

Example 2: Useful ARIA with <div>

<div role="button" tabindex="0" onclick="alert('You clicked Cherry!')">
  Cherry 🍒 Button
</div>

[ Screen reader: “button” | Keyboard navigable ]

4. Accessibility Considerations

• Do not overuse ARIA: Use semantic HTML wherever possible.
• Add tabindex when needed: For non-focusable elements made interactive via JavaScript.
• Test with screen readers: NVDA, VoiceOver, and JAWS give you direct insight into what users hear.
• Announce changes: Use roles like alert for real-time updates.

5. Live Region Example

Use role="alert" to auto-read changes to screen readers.

<div id="status" role="alert"></div>
<button onclick="document.getElementById('status').textContent = 'Banana added to cart.'">
  Add Banana 🍌
</button>

[ On click, screen reader announces: “Banana added to cart.” ]

6. ARIA Roles and Keyboard Support

ARIA roles help describe interactions, but don’t give elements behavior. If you use ARIA roles (e.g., role="button" on a <div>), you must also make them keyboard-accessible.

<div role="button" tabindex="0" 
      onkeydown="if(event.key==='Enter'){alert('Clicked apple')}" 
      onclick="alert('Clicked apple')">
  Apple Button
</div>

7. Summary

ARIA roles provide essential clues to assistive technologies — but must be used with intention. You now understand:

• What ARIA is and when to use it
• Common ARIA roles like button, main, alert, and dialog
• Why native semantic HTML should always come first
• How to make ARIA-powered elements keyboard-friendly

What’s Next?

Next, we’ll build a fully accessible component — like a modal or tab panel — using ARIA roles, keyboard handling, and semantic HTML in perfect harmony.