ARIA Roles in HTML

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.

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 ]

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 ]

• 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.

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.” ]

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>

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

Choose the option that lists all and only the correct statements.

1. banner
2. navigation
3. button
4. stylesheet

Choose the option that lists all and only the correct statements.

1. Avoid redundant roles on native semantic elements
2. Ensure roles correctly represent the element's function
3. Use ARIA roles to replace missing alt text
4. Test with screen readers

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.