Resource

ARIA Reference Guide

WAI-ARIA provides attributes to enhance accessibility. Use it carefully—incorrect ARIA is worse than no ARIA.

⚠️ Remember the First Rule of ARIA

If you can use a native HTML element with built-in semantics, do that instead of adding ARIA.

Common Roles

role="button"

Interactive element that triggers an action

<div role="button" tabindex="0">Click me</div>

role="link"

Navigational element

<span role="link" tabindex="0">Go to page</span>

role="dialog"

Modal or dialog window

<div role="dialog" aria-modal="true" aria-labelledby="title">...</div>

role="alert"

Important message requiring attention

<div role="alert">Error: Invalid input</div>

role="navigation"

Navigation landmark

<nav role="navigation">...</nav>

role="tablist/tab/tabpanel"

Tab interface components

<div role="tablist"><button role="tab">Tab 1</button></div>

Attribute	Values	Purpose
`aria-expanded`	true \| false	Indicates expandable element state
`aria-selected`	true \| false	Indicates selection state
`aria-checked`	true \| false \| mixed	Checkbox/toggle state
`aria-disabled`	true \| false	Indicates element is disabled
`aria-hidden`	true \| false	Hides element from assistive tech
`aria-pressed`	true \| false \| mixed	Toggle button state

aria-labelProvides accessible name

aria-labelledbyReferences element for name

aria-describedbyReferences descriptive text

aria-liveAnnounces dynamic content

aria-controlsReferences controlled element

aria-haspopupIndicates popup availability

Our scanner detects incorrect ARIA usage.