Quick-reference for all 47 WAI-ARIA roles. Click any role to see its description, code example, and required properties. Filter by category or search by name.
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes defined by the W3C that make web content more accessible to people using assistive technologies like screen readers. Use ARIA when native HTML elements don't provide enough semantic meaning — for example, a custom dropdown built with divs needs role="listbox" so screen readers understand its purpose.
Don't use ARIA if you can use a native HTML element instead. Native elements like <button>, <nav>, <input>, and <select> already have built-in accessibility semantics, keyboard behavior, and focus management. ARIA should only fill gaps where native HTML falls short.
Widget roles (button, checkbox, slider, tab) define interactive controls. Landmark roles (banner, main, navigation, search) mark major page regions. Live Region roles (alert, log, status) announce dynamic changes. Document Structure roles (article, heading, list) describe content organization. Window roles (dialog, alertdialog) identify overlays.
aria-label provides an inline accessible name as a string directly on the element. aria-labelledby points to the ID of another element whose text content becomes the accessible name. Use aria-labelledby when visible text already exists on the page; use aria-label when you need a label that isn't visually displayed.
Landmark roles let screen reader users jump between major sections of a page. Most are implicit on native HTML5 elements — <header> implies banner, <nav> implies navigation, etc. Add explicit roles when using generic elements like <div>, or when you need to label multiple instances with aria-label.
aria-live tells screen readers to announce dynamic content updates. Set it to "polite" to wait until the user is idle, or "assertive" to interrupt immediately. Some roles like alert (assertive) and status (polite) have implicit live region behavior. Use it for notifications, search counts, and form validation.
No. Everything runs in your browser. Nothing is sent to any server.