# ARIA roles — Web Accessibility (A11y)

Source: https://www.geekswithgeeks.com/en/accessibility/a11y-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.

```html
<!-- 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.