Lesson 4 / 25

ARIA roles

Add roles, properties, and states when HTML alone isn't enough.

What is ARIA?

ARIA (Accessible Rich Internet Applications) adds metadata to custom components so screen readers and assistive tech understand them. It's a layer on top of HTML—use semantic HTML first. ARIA rule: 'No ARIA is better than bad ARIA.'

Roles, properties, states

Role says what the element is. Properties describe it. States change. Always use semantic HTML when possible.

<!-- Custom switch: role says it's a switch -->
<div 
  role="switch" 
  aria-checked="false" 
  aria-label="Dark mode"
  tabindex="0"
  @click="toggle"
></div>

<!-- Live region: aria-live announces changes -->
<div aria-live="polite" aria-label="Status">
  <p>2 items added to cart</p>
</div>

<!-- Button with expanded state -->
<button 
  aria-expanded="false" 
  aria-controls="menu"
  @click="open = !open"
>
  Menu
</button>
<ul id="menu" v-show="open">...</ul>

Common roles

button, link, menuitem, tab, tabpanel, dialog, alert, status, tooltip, tree, combobox, listbox, grid.

ARIA don'ts

Don't use ARIA to fix bad HTML. Don't hide visible elements with aria-hidden. Don't add ARIA to semantic elements unnecessarily. Test your ARIA implementation with real screen readers.