ARIA Reference
Searchable list of common ARIA roles, properties and states.
| Kind | Name | Description | Example |
|---|---|---|---|
| Role | banner |
Site-wide header. Usually maps to <header>. | <header role="banner"> |
| Role | main |
Primary document content. | <main role="main"> |
| Role | navigation |
Major navigation links. | <nav role="navigation"> |
| Role | complementary |
Supporting content (sidebar). | <aside role="complementary"> |
| Role | contentinfo |
Page footer with copyright, contact, etc. | <footer role="contentinfo"> |
| Role | search |
Search landmark. | <form role="search"> |
| Role | region |
Generic landmark; requires aria-label. | <section role="region" aria-label="Stats"> |
| Role | form |
A form (use <form>). | <form role="form" aria-label="Login"> |
| Role | article |
A self-contained article. | <article role="article"> |
| Role | heading |
A heading; pair with aria-level. | <div role="heading" aria-level="2"> |
| Role | list |
A list (use <ul>/<ol>). | <ul role="list"> |
| Role | listitem |
An item in a list. | <li role="listitem"> |
| Role | table |
A data table. | <div role="table"> |
| Role | row |
A table row. | <div role="row"> |
| Role | rowgroup |
A group of table rows (thead/tbody/tfoot). | <div role="rowgroup"> |
| Role | cell |
A table cell. | <div role="cell"> |
| Role | columnheader |
A column header in a grid. | <div role="columnheader"> |
| Role | rowheader |
A row header in a grid. | <div role="rowheader"> |
| Role | separator |
A separator (horizontal rule). | <div role="separator"> |
| Role | img |
An image (no individual element should be a child). | <div role="img" aria-label="Logo"> |
| Role | figure |
A figure (image + caption). | <div role="figure"> |
| Role | definition |
A definition of a term. | <dd role="definition"> |
| Role | term |
A defined term. | <dt role="term"> |
| Role | note |
Tertiary content (sidebar note). | <div role="note"> |
| Role | directory |
A list of references to siblings/children. | <ul role="directory"> |
| Role | document |
Static content inside an application region. | <div role="document"> |
| Role | application |
A web application (limits keyboard help). | <div role="application"> |
| Role | presentation |
Strip semantics; treat as decorative. | <div role="presentation"> |
| Role | none |
Same as presentation. Preferred ARIA 1.2. | <div role="none"> |
| Role | button |
Acts as a button. Use real <button> when possible. | <div role="button" tabindex="0"> |
| Role | link |
Acts as a hyperlink. | <span role="link" tabindex="0"> |
| Role | tab |
One of a set of tabs. | <div role="tab" aria-selected="true"> |
| Role | tablist |
Container for a set of tabs. | <div role="tablist"> |
| Role | tabpanel |
Content for a tab. | <div role="tabpanel"> |
| Role | dialog |
Modal dialog. | <div role="dialog" aria-modal="true"> |
| Role | alertdialog |
Dialog that conveys an alert. | <div role="alertdialog" aria-modal="true"> |
| Role | alert |
Time-sensitive assertive message. | <div role="alert"> |
| Role | status |
Polite live region. | <div role="status"> |
| Role | log |
A live region with chronological content (chat). | <div role="log"> |
| Role | marquee |
Non-essential changing content. | <div role="marquee"> |
| Role | timer |
A timer / countdown. | <div role="timer"> |
| Role | tooltip |
Contextual help on hover/focus. | <div role="tooltip"> |
| Role | menu |
Top-level menu of items. | <ul role="menu"> |
| Role | menubar |
A horizontal menu (like a desktop app). | <ul role="menubar"> |
| Role | menuitem |
Single command in a menu. | <li role="menuitem"> |
| Role | menuitemcheckbox |
Menu item with a checkable state. | <li role="menuitemcheckbox" aria-checked="true"> |
| Role | menuitemradio |
Menu item in a radio group. | <li role="menuitemradio" aria-checked="true"> |
| Role | checkbox |
A two- or three-state checkbox. | <div role="checkbox" aria-checked="true"> |
| Role | radio |
A radio button. | <div role="radio" aria-checked="true"> |
| Role | radiogroup |
A group of radio buttons. | <div role="radiogroup"> |
| Role | switch |
Two-state on/off control. | <button role="switch" aria-checked="true"> |
| Role | slider |
A range input. | <div role="slider" aria-valuenow="40"> |
| Role | spinbutton |
Number input with up/down. | <div role="spinbutton" aria-valuenow="5"> |
| Role | progressbar |
Progress indicator. | <div role="progressbar" aria-valuenow="60"> |
| Role | scrollbar |
A custom scrollbar. | <div role="scrollbar" aria-controls="main"> |
| Role | searchbox |
A search input. | <input type="text" role="searchbox"> |
| Role | textbox |
A single- or multi-line text input. | <div role="textbox" contenteditable> |
| Role | combobox |
Input with associated popup of options. | <div role="combobox" aria-expanded="false"> |
| Role | listbox |
A listbox (select-like). | <div role="listbox"> |
| Role | option |
An option in a listbox. | <div role="option" aria-selected="true"> |
| Role | tree |
A hierarchical list. | <ul role="tree"> |
| Role | treeitem |
An item in a tree. | <li role="treeitem" aria-expanded="true"> |
| Role | treegrid |
A grid where rows can be expanded. | <div role="treegrid"> |
| Role | grid |
An interactive table. | <div role="grid"> |
| Role | gridcell |
A cell in an interactive grid. | <div role="gridcell"> |
| Role | toolbar |
A collection of common-use buttons. | <div role="toolbar"> |
| Role | group |
A group of related elements. | <div role="group"> |
| Role | feed |
An infinite, scrollable list of articles. | <div role="feed"> |
| Property | aria-label |
Accessible name when no visible label is available. | aria-label="Close dialog" |
| Property | aria-labelledby |
ID of the element labelling this one. | aria-labelledby="dialog-title" |
| Property | aria-describedby |
ID of element giving extra description. | aria-describedby="hint" |
| Property | aria-details |
ID of element giving rich extra detail. | aria-details="details-1" |
| Property | aria-controls |
ID(s) of elements this one controls. | aria-controls="panel-1" |
| Property | aria-owns |
ID(s) of children when DOM is detached. | aria-owns="menu-1" |
| Property | aria-flowto |
Next focus target (override doc order). | aria-flowto="step-2" |
| Property | aria-haspopup |
Indicates a popup will appear. | aria-haspopup="menu" |
| Property | aria-live |
Live region update behaviour. | aria-live="polite" |
| Property | aria-atomic |
Re-read entire region on change. | aria-atomic="true" |
| Property | aria-relevant |
Which changes to a live region matter. | aria-relevant="additions text" |
| Property | aria-keyshortcuts |
Keyboard shortcuts for this element. | aria-keyshortcuts="Alt+S" |
| Property | aria-roledescription |
Human-readable role override. | aria-roledescription="slide" |
| Property | aria-level |
Heading / treeitem level (1-6+). | aria-level="2" |
| Property | aria-setsize |
Total items in the set. | aria-setsize="12" |
| Property | aria-posinset |
Position in a set (1-based). | aria-posinset="3" |
| Property | aria-valuemin |
Minimum allowed value of a range. | aria-valuemin="0" |
| Property | aria-valuemax |
Maximum allowed value of a range. | aria-valuemax="100" |
| Property | aria-valuenow |
Current value of a range. | aria-valuenow="40" |
| Property | aria-valuetext |
Human-readable value for a range. | aria-valuetext="Loud" |
| Property | aria-orientation |
horizontal | vertical. | aria-orientation="vertical" |
| Property | aria-multiline |
Whether a textbox is multi-line. | aria-multiline="true" |
| Property | aria-multiselectable |
Whether a listbox allows multi-select. | aria-multiselectable="true" |
| Property | aria-readonly |
Element is readonly. | aria-readonly="true" |
| Property | aria-required |
Field is required for submission. | aria-required="true" |
| Property | aria-placeholder |
Placeholder hint for an input. | aria-placeholder="name@example.com" |
| Property | aria-autocomplete |
inline | list | both | none. | aria-autocomplete="list" |
| Property | aria-modal |
Marks a dialog as modal. | aria-modal="true" |
| Property | aria-colcount |
Total number of columns in a table. | aria-colcount="5" |
| Property | aria-rowcount |
Total number of rows in a table. | aria-rowcount="200" |
| Property | aria-colindex |
Column index of a cell. | aria-colindex="3" |
| Property | aria-rowindex |
Row index of a cell. | aria-rowindex="42" |
| Property | aria-colspan |
Column span of a cell. | aria-colspan="2" |
| Property | aria-rowspan |
Row span of a cell. | aria-rowspan="2" |
| Property | aria-sort |
ascending | descending | none | other. | aria-sort="ascending" |
| State | aria-expanded |
Whether collapsible content is shown. | aria-expanded="true" |
| State | aria-selected |
Selection state of a tab/option. | aria-selected="true" |
| State | aria-checked |
Tri-state checkbox/switch. | aria-checked="mixed" |
| State | aria-disabled |
Element is perceivable but disabled. | aria-disabled="true" |
| State | aria-hidden |
Hide from assistive tech. | aria-hidden="true" |
| State | aria-pressed |
Toggle button pressed state. | aria-pressed="true" |
| State | aria-current |
Current item within a set. | aria-current="page" |
| State | aria-busy |
Loading / waiting. | aria-busy="true" |
| State | aria-invalid |
Field value is not valid. | aria-invalid="true" |
| State | aria-errormessage |
ID of the element with the error text. | aria-errormessage="err-1" |
| State | aria-grabbed |
(Deprecated) Drag-and-drop grabbed state. | aria-grabbed="true" |
| State | aria-dropeffect |
(Deprecated) Drop-target effect. | aria-dropeffect="move" |
About this tool
Browse landmark and widget roles, accessibility properties and dynamic states with one-line examples. Curated subset of WAI-ARIA 1.2.