Loading...
The complete interactive WAI-ARIA reference. Search roles and attributes, explore screen reader behavior, compare ARIA with native HTML, and test markup in a live playground.
Value: string
Value: ID reference (space-separated list)
Value: ID reference (space-separated list)
Value: true | false | undefined
Value: true | false | undefined
Value: ID reference (space-separated list)
Value: "off" | "polite" | "assertive"
Value: true | false
Value: "true" | "false" | "mixed" | undefined
Value: true | false
Value: true | false | undefined
Value: true | false
Value: "true" | "false" | "grammar" | "spelling"
Value: "true" | "false" | "mixed" | undefined
Value: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog"
Value: "page" | "step" | "location" | "date" | "time" | "true" | "false"
Value: true | false
Value: number
Value: ID reference
Value: ID reference
Edit HTML with ARIA attributes — see the accessibility tree and screen reader output in real-time.
Type or paste HTML with ARIA roles and attributes. Changes update instantly.
No accessible elements detected. Try adding ARIA roles or semantic HTML.
Nothing to announce.
| ARIA Role | Native HTML | Recommendation | Why |
|---|---|---|---|
| role="button" | <button> | Use native <button> | Native buttons include keyboard support, focus management, and form submission for free. |
| role="link" | <a href="..."> | Use native <a> with href | Native links are focusable, support right-click and middle-click, and are recognized by crawlers. |
| role="checkbox" | <input type="checkbox"> | Use native checkbox | Native checkboxes handle checked state, keyboard toggling, and form data automatically. |
| role="radio" + role="radiogroup" | <input type="radio"> in <fieldset> | Use native radio inputs | Native radios handle mutual exclusion, arrow key navigation, and group labelling via fieldset/legend. |
| role="textbox" | <input type="text"> or <textarea> | Use native input/textarea | Native inputs include built-in validation, autocomplete, and mobile keyboard optimization. |
| role="navigation" | <nav> | Use native <nav> | The <nav> element automatically creates a navigation landmark without requiring role. |
| role="banner" | <header> (top-level) | Use native <header> | A top-level <header> element automatically maps to the banner landmark role. |
| role="contentinfo" | <footer> (top-level) | Use native <footer> | A top-level <footer> element automatically maps to the contentinfo landmark role. |
| role="main" | <main> | Use native <main> | The <main> element provides the main landmark and is recognized by skip-navigation implementations. |
| role="heading" aria-level="N" | <h1> through <h6> | Use native heading elements | Native headings are recognized by browser outline algorithms, screen reader quick navigation, and SEO. |
| role="list" + role="listitem" | <ul>/<ol> + <li> | Use native list elements | Native lists provide automatic item counting and nesting semantics to screen readers. |
| role="img" | <img alt="..."> | Use native <img> with alt | Native img elements are optimized for lazy loading, responsive sizes, and alt text handling. |
| role="dialog" | <dialog> | Use native <dialog> | The native dialog element provides built-in modal behavior, focus trapping, and Escape to close. |
| role="progressbar" | <progress> | Use native <progress> | The native progress element handles determinate/indeterminate states with built-in accessibility. |
| role="slider" | <input type="range"> | Use native range input | Native range inputs provide keyboard support, min/max handling, and step increments automatically. |
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences