HTML ARIA Roles

What are ARIA Roles

An ARIA role tells assistive technology what an element does. For example role=navigation tells a screen reader this is a navigation area even if it is just a div. Overusing roles on elements that already have the correct native semantics (like using role=button on an actual button tag) is unnecessary and can even cause confusion.

Note: Use semantic HTML first. Only add ARIA roles when semantic HTML cannot express the meaning you need.

Warning: Adding wrong ARIA roles is worse than adding none — it actively misleads screen reader users.

Example: What are ARIA Roles

<div role="navigation">Site links here</div>

aria-label and aria-describedby

aria-label provides a text description for elements that have no visible label. aria-describedby links an element to a longer description elsewhere on the page. Using both together is common: a short aria-label for the accessible name and aria-describedby for extra supporting detail.

Note: Use aria-label on icon-only buttons so screen readers can announce their purpose.

Warning: Do not use aria-label on elements that already have visible text — it overrides the visible label for screen readers.

Example: aria-label and aria-describedby

<button aria-label="Close" aria-describedby="closeHint">X</button>
<span id="closeHint">Closes this dialog</span>

aria-expanded for Toggles

aria-expanded tells assistive technology whether a collapsible element, like a dropdown menu or accordion panel, is currently open or closed, and its value should be updated dynamically with JavaScript whenever the element's state changes.

Example: aria-expanded for Toggles

<button aria-expanded="false" onclick="this.setAttribute('aria-expanded', 'true')">
  Show menu
</button>

aria-live for Dynamic Content

aria-live marks a region of the page that updates dynamically without a full page reload, telling screen readers to announce the new content automatically instead of requiring the user to navigate back to it manually.

Example: aria-live for Dynamic Content

<div aria-live="polite" id="status">Loading...</div>

Landmark Roles

Landmark roles like banner, main, complementary, and contentinfo mark the major regions of a page, letting screen reader users jump directly between sections instead of tabbing through every element one at a time.

Example: Landmark Roles

<div role="banner">Header</div>
<div role="main">Main content</div>
<div role="contentinfo">Footer</div>