What is ARIA and how does it improve web accessibility?

Short answer

ARIA (Accessible Rich Internet Applications) is a set of attributes that define ways to make web content more accessible to people with disabilities, especially when building dynamic or complex UI components.

How it works

ARIA provides roles (what an element is), states (its current condition), and properties (its characteristics). These are communicated to assistive technologies via the browser's accessibility tree. ARIA does not change behavior or styling; it only affects how assistive technologies interpret elements.

Example

<div role="alert" aria-live="assertive">
  Your session has expired. Please log in again.
</div>

<button aria-expanded="false" aria-controls="menu">
  Open Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

Why it matters

When native semantic HTML is insufficient, such as with custom dropdowns, tabs, or modals, ARIA fills the gap. However, the first rule of ARIA is to use native HTML semantics whenever possible, and only supplement with ARIA when necessary.