ARIA Roles Quick Reference
A comprehensive reference for all WAI-ARIA roles with details on how Speakable handles each one. Use this guide to understand how different screen readers announce role semantics, what HTML elements map implicitly to each role, and which ARIA states are required or supported.
Note: Speakable approximates screen reader behavior through static HTML analysis. Actual output varies by screen reader version and user settings.
Landmark Roles
8Landmark roles identify large content areas and help assistive technology users navigate page structure quickly.
role="banner"Implicit: <header>Supported ARIA States
aria-labelaria-labelledbybanner landmark
banner region
banner
banner
role="complementary"Implicit: <aside>Supported ARIA States
aria-labelaria-labelledbycomplementary landmark
complementary region
complementary
complementary
role="contentinfo"Implicit: <footer>Supported ARIA States
aria-labelaria-labelledbycontent information landmark
content info region
content information
content info
role="form"Implicit: <form>Supported ARIA States
aria-labelaria-labelledbyContact form landmark
Contact form region
Contact, form
Contact, form landmark
role="main"Implicit: <main>Supported ARIA States
aria-labelaria-labelledbymain landmark
main region
main
main landmark
role="navigation"Implicit: <nav>Supported ARIA States
aria-labelaria-labelledbyMain navigation landmark
Main navigation region
navigation, Main
navigation, Main
role="region"Implicit: <section>Supported ARIA States
aria-label (required)aria-labelledbyFeatures region landmark
Features region
Features, region
Features, region
role="search"Implicit: <search>Supported ARIA States
aria-labelaria-labelledbysearch landmark
search region
search
search landmark
Widget Roles
17Widget roles define interactive UI elements. These roles communicate the type of control and its current state to assistive technologies.
Supported ARIA States
aria-pressedaria-expandedaria-disabledSubmit button
Submit button
Submit, button
Submit, button
role="checkbox"Implicit: <input type="checkbox">Supported ARIA States
aria-checked (required)aria-disabledaria-requiredAccept terms checkbox not checked
Accept terms check box not checked
Accept terms, unticked, checkbox
Accept terms, checkbox, unchecked
role="combobox"Supported ARIA States
aria-expanded (required)aria-controlsaria-activedescendantaria-autocompleteCountry edit combo collapsed has autocomplete
Country combo box edit
Country, collapsed, combo box
Country, combo box, collapsed, editable
role="dialog"Implicit: <dialog>Supported ARIA States
aria-label (required)aria-labelledbyaria-modalConfirm deletion dialog
Confirm deletion dialog
Confirm deletion, web dialog
Confirm deletion, dialog
Supported ARIA States
aria-currentaria-disabledLearn more link
Learn more link
Learn more, link
Learn more, link
role="listbox"Implicit: <select>Supported ARIA States
aria-multiselectablearia-requiredaria-activedescendantaria-orientationCountry list box
Country list box
Country, list box
Country, list box
role="menu"Supported ARIA States
aria-activedescendantaria-orientationFile menu
File menu
File, menu
File, menu
role="menuitem"Supported ARIA States
aria-disabledaria-expandedaria-haspopupSave menu item
Save
Save, menu item
Save, menu item
role="option"Implicit: <option>Supported ARIA States
aria-selected (required)aria-disabledUnited States 3 of 195
United States
United States
United States, 3 of 195
role="progressbar"Implicit: <progress>Supported ARIA States
aria-valuenowaria-valueminaria-valuemaxaria-valuetextUpload progress bar 75 percent
Upload progress bar 75%
75%, Upload, progress indicator
Upload, progress bar, 75%
role="radio"Implicit: <input type="radio">Supported ARIA States
aria-checked (required)aria-disabledaria-posinsetaria-setsizeExpress shipping radio button checked 2 of 3
Express shipping radio button checked
Express shipping, selected, radio button, 2 of 3
Express shipping, radio button, checked, 2 of 3
role="slider"Implicit: <input type="range">Supported ARIA States
aria-valuenow (required)aria-valueminaria-valuemaxaria-valuetextaria-orientationVolume slider 80
Volume slider 80
Volume, 80, slider
Volume, slider, 80
role="switch"Supported ARIA States
aria-checked (required)aria-disabledDark mode switch on
Dark mode switch On
Dark mode, on, switch
Dark mode, toggle switch, on
role="tab"Supported ARIA States
aria-selected (required)aria-controlsaria-disabledSettings tab selected 2 of 4
Settings tab 2 of 4
Settings, selected, tab, 2 of 4
Settings, tab, 2 of 4, selected
role="tabpanel"Supported ARIA States
aria-labelledbySettings tab panel
Settings tab panel
Settings, tab panel
Settings, tab panel
role="textbox"Implicit: <input type="text">, <textarea>Supported ARIA States
aria-multilinearia-placeholderaria-readonlyaria-requiredEmail edit required has autocomplete blank
Email edit type in text
Email, required, text field
Email, edit, required
role="tree"Supported ARIA States
aria-multiselectablearia-activedescendantaria-orientationFile browser tree view
File browser tree view
File browser, tree
File browser, tree view
Document Structure Roles
23Document structure roles describe the organization of content on a page. They provide semantic meaning without implying interactivity.
role="article"Implicit: <article>Supported ARIA States
aria-labelaria-labelledbyaria-posinsetaria-setsizearticle
article
article
article
role="cell"Implicit: <td>Supported ARIA States
aria-colindexaria-colspanaria-rowindexaria-rowspancolumn 2 row 3 Price $49.99
Price column $49.99
row 3, Price, $49.99
row 3, column 2, $49.99
role="columnheader"Implicit: <th scope="col">Supported ARIA States
aria-sortaria-colindexPrice column header sorted ascending
Price column header sort ascending
Price, sorted ascending, column header
Price, column header, sorted ascending
role="definition"Implicit: <dd>Supported ARIA States
aria-labelaria-labelledbydefinition
definition
definition
definition
role="directory"Supported ARIA States
aria-labeldirectory
directory
directory
directory
role="document"Supported ARIA States
aria-labelaria-labelledbydocument
document
web content
document
role="feed"Supported ARIA States
aria-labelaria-labelledbyaria-busyNews feed
News feed
News, feed
News, feed
role="figure"Implicit: <figure>Supported ARIA States
aria-labelaria-labelledbyPerformance chart figure
figure Performance chart
Performance chart, figure
Performance chart, figure
role="grid"Supported ARIA States
aria-multiselectablearia-readonlyaria-activedescendantaria-colcountaria-rowcountSpreadsheet grid with 10 columns and 50 rows
Spreadsheet grid
Spreadsheet, grid, 10 columns, 50 rows
Spreadsheet, grid
role="group"Implicit: <fieldset>Supported ARIA States
aria-labelaria-labelledbyaria-activedescendantaria-disabledShipping options grouping
Shipping options group
Shipping options, group
Shipping options, group
Supported ARIA States
aria-level (required)heading level 2 Getting Started
Getting Started heading level 2
Getting Started, heading level 2
Getting Started, heading, level 2
role="img"Implicit: <img>Supported ARIA States
aria-label (required)aria-labelledbygraphic Company logo
Company logo graphic
Company logo, image
Company logo, image
role="list"Implicit: <ul>, <ol>Supported ARIA States
aria-labelaria-labelledbylist with 5 items
list of 5 items
list, 5 items
list, 5 items
role="listitem"Implicit: <li>Supported ARIA States
aria-levelaria-posinsetaria-setsizebullet Install dependencies
bullet Install dependencies
Install dependencies
Install dependencies, list item
role="math"Supported ARIA States
aria-labelaria-labelledbymath
math
mathematical expression
math
role="note"Supported ARIA States
aria-labelaria-labelledbynote
note
note
note
role="row"Implicit: <tr>Supported ARIA States
aria-rowindexaria-selectedaria-expandedaria-levelrow 3
row 3
row 3 of 10
row 3
role="rowgroup"Implicit: <tbody>, <thead>, <tfoot>not announced
not announced
not announced
not announced
role="rowheader"Implicit: <th scope="row">Supported ARIA States
aria-sortaria-rowindexrow header January
January row header
January, row header
January, row header
role="separator"Implicit: <hr>Supported ARIA States
aria-valuenowaria-valueminaria-valuemaxaria-orientationseparator
separator
separator
separator
role="table"Implicit: <table>Supported ARIA States
aria-labelaria-labelledbyaria-colcountaria-rowcountPricing table with 3 columns and 5 rows
Pricing table 3 columns 5 rows
Pricing, table, 3 columns, 5 rows
Pricing, table, 3 columns, 5 rows
role="term"Implicit: <dt>Accessibility
Accessibility
Accessibility, term
Accessibility
role="toolbar"Supported ARIA States
aria-labelaria-labelledbyaria-activedescendantaria-orientationFormatting toolbar
Formatting tool bar
Formatting, toolbar
Formatting, toolbar
Live Region Roles
5Live region roles indicate areas of the page that update dynamically. Screen readers announce changes to these regions without requiring focus.
role="alert"Supported ARIA States
aria-atomicaria-live (implicit: assertive)alert Form submission failed. Please check your inputs.
Alert Form submission failed. Please check your inputs.
Form submission failed. Please check your inputs., alert
alert, Form submission failed. Please check your inputs.
role="log"Supported ARIA States
aria-atomicaria-live (implicit: polite)log
log
log
log
role="marquee"Supported ARIA States
aria-atomicaria-live (implicit: off)marquee
marquee
marquee
marquee
role="status"Supported ARIA States
aria-atomic (implicit: true)aria-live (implicit: polite)3 items in cart
3 items in cart
3 items in cart, status
3 items in cart, status
role="timer"Supported ARIA States
aria-atomicaria-livetimer 5 minutes remaining
5 minutes remaining timer
5 minutes remaining, timer
5 minutes remaining, timer
Window Roles
2Window roles define overlay containers like dialogs and alert dialogs that demand or request user interaction.
role="alertdialog"Supported ARIA States
aria-label (required)aria-labelledbyaria-describedbyaria-modalDelete account alert dialog Are you sure? This cannot be undone.
Alert dialog Delete account Are you sure? This cannot be undone.
Delete account, alert, web dialog, Are you sure? This cannot be undone.
Delete account, alert dialog, Are you sure? This cannot be undone.
role="dialog"Implicit: <dialog>Supported ARIA States
aria-label (required)aria-labelledbyaria-modalEdit profile dialog
Edit profile dialog
Edit profile, web dialog
Edit profile, dialog
Key Differences Across Screen Readers
Screen readers differ in announcement order, terminology, and level of detail. Understanding these differences helps you write more inclusive content and verify your accessibility testing covers real-world behavior.
Announcement Order
NVDA and JAWS typically announce the role after the name (“Submit button”), while VoiceOver and Narrator separate them with a comma and often put the role after the name (“Submit, button”). This comma-separated pattern is what Speakable models for macOS/iOS and Windows Narrator output.
Terminology Variations
NVDA uses “landmark” for landmark roles while JAWS uses “region.” VoiceOver says “web dialog” instead of just “dialog.” Checkboxes are “not checked” in NVDA but “unticked” in VoiceOver. These variations are modeled in Speakable’s per-reader renderers.
Position and Count Information
NVDA and Narrator include position information for options and radio buttons (“3 of 195”), while JAWS typically omits this. VoiceOver includes position for radio buttons but not always for options. Speakable includes position info where the respective reader would announce it in its default verbosity settings.
State Announcements
Each reader handles states differently. NVDA says “collapsed” or “expanded,” JAWS may omit the state in some contexts, VoiceOver often announces it before the role, and Narrator places it after. Required fields are announced as “required” by all readers but at different positions in the output string.
Using This Reference with Speakable
When Speakable analyzes your HTML, it maps elements to their implicit or explicit ARIA roles and generates output based on the patterns shown above. You can use this reference to:
Verify that your elements have the correct implicit role by using native HTML elements instead of ARIA overrides.
Understand why Speakable output differs between readers. It reflects real-world variation, not bugs.
Check which ARIA states are required for a role to ensure screen readers get complete information.
Cross-reference with the Common Mistakes page when roles like button, link, or heading show unexpected output.
Best Practices
Prefer native HTML elements. Use <button> instead of <div role="button">. Native elements provide keyboard support and states for free.
Always provide accessible names for landmarks. A bare <nav> is announced as just “navigation”. Add aria-label to differentiate multiple landmarks of the same type.
Include required states. Roles like checkbox require aria-checked. Without it, the screen reader cannot communicate the control’s state.
Test with multiple readers. An element that sounds clear in NVDA may be confusing in VoiceOver due to different announcement order. Speakable shows all four outputs simultaneously to catch these gaps.
Don’t override implicit roles. Adding role="button" to a <button> is redundant. Adding conflicting roles (like role="link" on a button) creates confusing output.
Related Pages
API Reference
Complete Speakable API documentation including all methods, options, and return types.
Component Patterns
Accessible implementation patterns for common UI components with Speakable testing examples.
Glossary
Definitions of accessibility terms, ARIA concepts, and screen reader terminology.
How Screen Readers Work
Deep dive into how assistive technologies parse HTML and generate speech output.