ARIA

ELI5 — The Vibe Check

ARIA stands for Accessible Rich Internet Applications. It's a set of HTML attributes you sprinkle on your elements to give screen readers extra context that plain HTML doesn't provide. Like slapping a sticky note on your button that says 'Hey, this opens a dropdown menu.'

Real Talk

ARIA (Accessible Rich Internet Applications) is a W3C specification that defines a set of HTML attributes (roles, states, and properties) to make dynamic web content and UI widgets accessible to assistive technologies. ARIA should supplement — not replace — semantic HTML. The first rule of ARIA: don't use ARIA if native HTML can do the job.

Show Me The Code

<!-- Custom dropdown with ARIA -->
<button
  aria-haspopup="listbox"
  aria-expanded="false"
  aria-controls="color-options"
>
  Choose color
</button>
<ul id="color-options" role="listbox" aria-label="Color options">
  <li role="option" aria-selected="true">Red</li>
</ul>

When You'll Hear This

Add aria-label to icon buttons so screen readers know what they do.,aria-live regions announce dynamic content updates.,Don't add ARIA to semantic elements that already have implicit roles.