When an element that is not focusable by default has a tabindex="0" (most elements that have no mapping), the element is mapped as 'editable text' in MSAA.
| html 5 element | related ARIA role | Current Accessibility (MSAA) API mapping | recommended Aria Role(s) | recommended Aria States and Properties | Notes |
|---|---|---|---|---|---|
| <html> | none | none | none | none | |
| <head> | none | none | none | none | |
| <title> | none | window, client, title bar, document, pane | none | none | Content of title attribute forms the accessible name for a number of roles of browser chrome elements. |
| <base> | none | none | none | none | |
| <link> | none | none | none | none | |
| <meta> | none | none | none | none | |
| <style> | none | none | none | none | |
| <script> | none | none | none | none | |
| <noscript> | none | none | none | none | As content in the noscript is only displayed when scripting is disabled and ARIA relys upon scripting (primarily). |
| <body> | document | document | application | live region, drag and drop,relationship | Overriding document role on body useful in cases where the main content of the document is an application (note: may have embedded elements with role="document") |
| <section> | group | none | region, any widget | live region, drag and drop,relationship | |
| <nav> | navigation | none | navigation, any widget | live region, drag and drop,relationship | ARIA navigation role allowed until <nav> element mapped to accessibility API and supported in AT |
| <article> | article | none | article, any widget | live region, drag and drop,relationship | ARIA article role allowed until <article> element mapped to accessibility API and supported in AT |
| <aside> | complementary | none | complementary, any widget | live region, drag and drop,relationship | ARIA complementary role allowed until <aside> element mapped to accessibility API and supported in AT |
| <h1> | heading (aria-level="1") | none | any widget | live region, drag and drop,relationship | |
| <h2> | heading (aria-level="2") | none | any widget | live region, drag and drop,relationship | |
| <h3> | heading (aria-level="3") | none | any widget | live region, drag and drop,relationship | |
| <h4> | heading (aria-level="4") | none | any widget | live region, drag and drop,relationship | |
| <h5> | heading (aria-level="5") | none | any widget | live region, drag and drop, relationship | |
| <h6> | heading (aria-level="6") | none | any widget | live region, drag and drop, relationship | |
| <hgroup> | heading | none | any widget | none | |
| <header> | banner | none | banner, any widget | live region, drag and drop, relationship | Recommend only allowing 1 instance of role="banner" per document (or role="document"), to be used on the <header> element instance that matches the role="banner" definition in the ARIA spec. |
| <footer> | contentinfo | none | contentinfo, any widget | live region, drag and drop, relationship | Recommend only allowing 1 instance of role="contentinfo" per document (or role="document"), to be used on the <footer> element instance that matches the role="contentinfo" definition in the ARIA spec. |
| <address> | none | none | any widget | live region, drag and drop, relationship | |
| <p> | none | none | any widget | live region, drag and drop, relationship | |
| <hr> | separator | separator | separator | Widget, live region, drag and drop ,relationship | |
| <br> | none | none | none | none | |
| <pre> | none | none | any widget | live region, drag and drop, relationship | |
| <blockquote> | none | none | any widget | live region, drag and drop, relationship | |
| <ol> | list | list | listbox,presentation | live region, drag and drop, relationship | |
| <ul> | list | list | listbox,presentation | live region, drag and drop, relationship | |
| <li> | listitem | list item | option, menuitem, listitem, presentation | live region, drag and drop, relationship | |
| <dl> | list | list | list,listbox, listitem | live region, drag and drop, relationship | |
| <dt> | listitem | listitem | option, listitem, menuitem | live region, drag and drop, relationship | |
| <dd> | listitem | listitem | option, listitem, menuitem | live region, drag and drop, relationship | |
| <a> | link | link | all widgets | Widget, live region, drag and drop ,relationship | |
| <q> | none | none | all widgets | live region, drag and drop ,relationship | |
| <cite> | none | none | all widgets | live region, drag and drop ,relationship | |
| <em> | none | none | all widgets | live region, drag and drop ,relationship | |
| <strong> | none | none | all widgets | live region, drag and drop ,relationship | |
| <small> | none | none | all widgets | live region, drag and drop ,relationship | |
| <mark> | none | none | all widgets | live region, drag and drop ,relationship | |
| <dfn> | definition?? | none | all widgets | live region, drag and drop ,relationship | |
| <abbr> | none | none | all widgets | live region, drag and drop ,relationship | |
| <time> | none | none | all widgets | live region, drag and drop ,relationship | |
| <progress> | progressbar | progress bar | progressbar | live region, drag and drop ,relationship | |
| <meter> | none | none | all widgets | live region, drag and drop ,relationship | |
| <code> | none | none | all widgets | live region, drag and drop ,relationship | |
| <var> | none | none | all widgets | live region, drag and drop ,relationship | |
| <samp> | none | none | all widgets | live region, drag and drop ,relationship | |
| <kbd> | none | none | all widgets | live region, drag and drop ,relationship | |
| <sub> | none | none | all widgets | live region, drag and drop ,relationship | |
| <sup> | none | none | all widgets | live region, drag and drop ,relationship | |
| <span> | none | none | all widgets | live region, drag and drop ,relationship | |
| <i> | none | none | all widgets | live region, drag and drop ,relationship | |
| <b> | none | none | all widgets | live region, drag and drop ,relationship | |
| <bdo> | none | none | all widgets | live region, drag and drop ,relationship | |
| <ruby> | none | none | all widgets | live region, drag and drop ,relationship | |
| <rt> | none | none | all widgets | live region, drag and drop ,relationship | |
| <rp> | none | none | all widgets | live region, drag and drop ,relationship | |
| <ins> | none | none | all widgets | live region, drag and drop ,relationship | |
| <del> | none | none | all widgets | live region, drag and drop ,relationship | |
| <figure> | img, group | none | all widgets | live region, drag and drop ,relationship | |
| <img> | img | graphic | all widgets, presentation | live region, drag and drop ,relationship | |
| <iframe> | document | pane | document, application, alert | live region, drag and drop ,relationship | |
| <embed> | none | pane | document, application, alert | live region, drag and drop ,relationship | |
| <object> | none | client | document, application, img | live region, drag and drop ,relationship | |
| <param> | none | none | none | none | |
| <video> | none | none | application | live region, drag and drop ,relationship | |
| <audio> | none | none | application | live region, drag and drop ,relationship | |
| <source> | none | none | application | live region, drag and drop ,relationship | |
| <canvas> | img | none | all | widget, live region, drag and drop ,relationship | |
| <map> | none | none | none | none | |
| <area> | link | link | all widgets | widget, live region, drag and drop, relationship | |
| <table> | grid | table | grid, presentation, alert | live region, drag and drop, relationship | When role="presentation" is present on a table, recommend a conformance warning to indicate that if the tables is a data table, its structure should not be hidden and if it is a table used for layout, it is non conforming. |
| <caption> | none | caption content used as accessible name value | all widgets | live region, drag and drop, relationship | |
| <colgroup> | none | none | none | live region, drag and drop, relationship | |
| <col> | none | none | none | live region, drag and drop, relationship | |
| <tbody> | none | none | none | live region, drag and drop, relationship | |
| <thead> | none | none | none | live region, drag and drop, relationship | |
| <tfoot> | none | none | none | live region, drag and drop, relationship | |
| <tr> | row | row | row, presentation, alert | live region, drag and drop, relationship | |
| <td> | gridcell | cell | gridcell, presentation, alert | live region, drag and drop, relationship | |
| <th> | columnheader, rowheader | column header, row header | columnheader, alert | live region, drag and drop, relationship | |
| <form> | none | none | search | ||
| <fieldset> | group | none | all widgets, group, radiogroup | live region, drag and drop, relationship | |
| <label> | none | none | none | live region, drag and drop, relationship | |
| input element with a type attribute in the Button state | button | push button | button, checkbox, radio, menu, menuitem | widget, live region, drag and drop, relationship | |
| input element with a type attribute in the Checkbox state | checkbox | checkbox | menuitemcheckbox | live region, drag and drop, relationship | |
| input element with a type attribute in the Color state | composite control, role(s) depend upon browser implementation | editable text | composite control, role(s) depend upon browser implementation | composite control, role(s) depend upon browser implementation | |
| input element with a type attribute in the Date state | composite control, role(s) depend upon browser implementation | editable text | composite control, role(s) depend upon browser implementation | composite control, role(s) depend upon browser implementation | |
| input element with a type attribute in the Date and Time state | composite control, role(s) depend upon browser implementation | editable text | composite control, role(s) depend upon browser implementation | composite control, role(s) depend upon browser implementation | |
| input element with a type attribute in the Local Date and Time state | composite control, role(s) depend upon browser implementation | editable text | composite control, role(s) depend upon browser implementation | composite control, role(s) depend upon browser implementation | |
| input element with a type attribute in the E-mail state with no suggestions source element | textbox | textbox | all widgets | ||
| input element with a type attribute in the File Upload state | composite control, role(s) depend upon browser implementation | editable text and/or button | composite control, role(s) depend upon browser implementation | ||
| input element with a type attribute in the Hidden state | none | none | none | none | |
| input element with a type attribute in the Image Button state | button | push button | button, checkbox, radio, menu, menuitem | ||
| input element with a type attribute in the Month state | composite control, role(s) depend upon browser implementation | editable text | composite control, role(s) depend upon browser implementation | ||
| input element with a type attribute in the Number state | spinbutton | editable text | spinbutton | live region, drag and drop, relationship | |
| input element with a type attribute in the Password state | textbox | editable text state:protected | textbox, combobox | live region, drag and drop, relationship | |
| input element with a type attribute in the Radio Button state | radio | radio button | menuitemradio | ||
| input element with a type attribute in the Range state | slider | none | |||
| input element with a type attribute in the Reset Button state | button | push button | |||
| input element with a type attribute in the Search state with no suggestions source element | textbox | editable text | |||
| input element with a type attribute in the Submit Button state | button | push button | |||
| input element with a type attribute in the Telephone state with no suggestions source element | textbox | editable text | |||
| input element with a type attribute in the Text state with no suggestions source element | combobox | editable text | |||
| input element with a type attribute in the Text, Search, Telephone, URL, or E-mail states with a suggestions source element | combobox | editable text | |||
| input element with a type attribute in the Time state | composite control, role(s) depend upon browser implementation | editable text | |||
| input element with a type attribute in the URL state with no suggestions source element | textbox | editable text | |||
| input element with a type attribute in the Week state | composite control, role(s) depend upon browser implementation | editable text | |||
| <textarea> | textbox | editable text | |||
| <keygen> | composite control, role(s) depend upon browser implementation | editable text or combobox and editable text | |||
| <output> | none | none | |||
| <details> | composite control, role(s) depend upon browser implementation | none | |||
| <command> | button or menuitemradio or menuitemcheckbox | none | |||
| An element that defines a command, whose Type facet is "checkbox", and that is a descendant of a menu element whose type attribute in the list state | menuitemcheckbox | none | |||
| An element that defines a command, whose Type facet is "command", and that is a descendant of a menu element whose type attribute in the list state | menuitem | none | |||
| An element that defines a command, whose Type facet is "radio", and that is a descendant of a menu element whose type attribute in the list state | menuitemradio | none | |||
| <menu> | menu | none | |||
| <legend> | none | none | |||
| <div> | none | none | all | all |
| attribute | |||||
| accesskey | |||||
| class | |||||
| contenteditable | |||||
| contextmenu | |||||
| dir | |||||
| draggable | |||||
| hidden | |||||
| id | |||||
| item | |||||
| itemfor | |||||
| itemprop | |||||
| lang | |||||
| spellcheck | |||||
| style | |||||
| tabindex | |||||
| title |
Note: Abstract roles are used for the ontology. Authors should not use abstract roles in content.
The following roles act as user interface widgets that do not provide a defined structure.
The following roles describe structures that organize content in a page. Document structures are not usually interactive.
The following roles are regions of the page intended as navigational landmarks. All of these roles inherit from the landmark base type and, with the exception of application, all are imported from the XHTML Role Attribute Module [XHTML-ROLES, Section 4]. The roles are included here in order to make them clearly part of the WAI-ARIA Role taxonomy.
Authors may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in the ARIA specifications, except where these conflict with the strong native semantics described below. These exceptions are intended to prevent authors from making assistive technology products report nonsensical states that do not represent the actual state of the document. [ARIA]
User agents are required to implement ARIA semantics on all HTML elements, as defined in the ARIA specifications. The implicit ARIA semantics defined below must be recognised by implementations. [ARIAIMPL]
The following table defines the strong native semantics and corresponding implicit ARIA semantics that apply to HTML elements. Each language feature (element or attribute) in a cell in the first column implies the ARIA semantics (role, states, and/or properties) given in the cell in the second column of the same row. Authors must not set the ARIA role and aria-* attributes in a manner that conflicts with the semantics described in the following table. When multiple rows apply to an element, the role from the last row to define a role must be applied, and the states and properties from all the rows must be combined.
| Language feature | Strong native semantics and implied ARIA semantics |
|---|---|
| a element that represents a hyperlink | link role, developers will take the anchor and re-purpose the anchor. |
| address element | contentinfo role |
| area element that represents a hyperlink | link role |
| button element | button role |
| datalist element | listbox role, with the aria-multiselectable property set to "false" |
| footer element | contentinfo role |
| h1 element that does not have an hgroup ancestor | heading role |
| h2 element that does not have an hgroup ancestor | heading role |
| h3 element that does not have an hgroup ancestor | heading role |
| h4 element that does not have an hgroup ancestor | heading role |
| h5 element that does not have an hgroup ancestor | heading role |
| h6 element that does not have an hgroup ancestor | heading role |
| header element | banner role |
| hgroup element | heading role |
| hr element | separator role |
| img element whose alt attribute's value is empty | presentation role |
| input element with a type attribute in the Button state | button role |
| input element with a type attribute in the Checkbox state | checkbox role, with the aria-checked state set to "mixed" if the element's indeterminate DOM attribute is true, or "true" if the element's checkedness is true, or "false" otherwise |
| input element with a type attribute in the Color state | No role |
| input element with a type attribute in the Date state | No role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Date and Time state | No role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Local Date and Time state | No role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the E-mail state with no suggestions source element | textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the File Upload state | button role |
| input element with a type attribute in the Hidden state | No role |
| input element with a type attribute in the Image Button state | button role |
| input element with a type attribute in the Month state | No role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Number state | spinbutton role, with the aria-readonly state set to "true" if the element has a readonly attribute, the aria-valuemax property set to the element's maximum, the aria-valuemin property set to the element's minimum, and, if the result of applying the rules for parsing floating point number values to the element's value is a number, with the aria-valuenow property set to that number |
| input element with a type attribute in the Password state | textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Radio Button state | radio role, with the aria-checked state set to "true" if the element's checkedness is true, or "false" otherwise |
| input element with a type attribute in the Range state | slider role, with the aria-valuemax property set to the element's maximum, the aria-valuemin property set to the element's minimum, and the aria-valuenow property set to the result of applying the rules for parsing floating point number values to the element's value, if that that results in a number, or the default value otherwise |
| input element with a type attribute in the Reset Button state | button role |
| input element with a type attribute in the Search state with no suggestions source element | textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Submit Button state | button role |
| input element with a type attribute in the Telephone state with no suggestions source element | textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Text state with no suggestions source element | textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Text, Search, Telephone, URL, or E-mail states with a suggestions source element | combobox role, with the aria-owns property set to the same value as the list attribute, and the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Time state | No role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the URL state with no suggestions source element | textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| input element with a type attribute in the Week state | No role, with the aria-readonly state set to "true" if the element has a readonly attribute |
| link element that represents a hyperlink | link role |
| menu element with a type attribute in the context menu state | No role |
| menu element with a type attribute in the list state | menu role |
| menu element with a type attribute in the tool bar state | toolbar role |
| nav element | navigation role |
| option element that is in a list of options or that represents a suggestion in a datalist element | option role, with the aria-selected state set to "true" if the element's selectedness is true, or "false" otherwise. |
| progress element | progressbar role, with, if the progress bar is determinate, the aria-valuemax property set to the maximum value of the progress bar, the aria-valuemin property set to zero, and the aria-valuenow property set to the current value of the progress bar |
| select element with a multiple attribute | listbox role, with the aria-multiselectable property set to "true" |
| select element with no multiple attribute | listbox role, with the aria-multiselectable property set to "false" |
| td element | gridcell role, with the aria-labelledby property set to the value of the headers attribute, if any |
| textarea element | textbox role, with the aria-multiline property set to "true", and the aria-readonly state set to "true" if the element has a readonly attribute |
| th elemen that is neither a column header nor a row header | gridcell role, with the aria-labelledby property set to the value of the headers attribute, if any |
| th element that is a column header | columnheader role, with the aria-labelledby property set to the value of the headers attribute, if any |
| th element that is a row header | rowheader role, with the aria-labelledby property set to the value of the headers attribute, if any |
| tr element | row role |
| An element that defines a command, whose Type facet is "checkbox", and that is a descendant of a menu element whose type attribute in the list state | menuitemcheckbox role, with the aria-checked state set to "true" if the command's Checked State facet is true, and "false" otherwise |
| An element that defines a command, whose Type facet is "command", and that is a descendant of a menu element whose type attribute in the list state | menuitem role |
| An element that defines a command, whose Type facet is "radio", and that is a descendant of a menu element whose type attribute in the list state | menuitemradio role, with the aria-checked state set to "true" if the command's Checked State facet is true, and "false" otherwise |
| Elements that are disabled | The aria-disabled state set to "true" |
| Elements that are required | The aria-required state set to "true" |
Some HTML elements have native semantics that can be overridden. The following table lists these elements and their implicit ARIA semantics, along with the restrictions that apply to those elements. Each language feature (element or attribute) in a cell in the first column implies, unless otherwise overriden, the ARIA semantic (role, state, or property) given in the cell in the second column of the same row, but this semantic may be overridden under the conditions listed in the cell in the third column of that row.
| Language feature | Default implied ARIA semantic | Restrictions |
|---|---|---|
| article element | article role | Role must be either article, document, application, or main |
| aside element | note role | Role must be either note, complementary, or search |
| html element | document role | Role must be either document or application |
| li element whose parent is an ol or ul element | listitem role | Role must be either listitem or treeitem |
| ol element | list role | Role must be either list, tree, or directory |
| output element | status role | No restrictions |
| section element | region role | Role must be either region, document, application, contentinfo, main, search, alert, dialog, alertdialog, status, or log |
| table element | grid role | Role must be either grid or treegrid |
| ul element | list role | Role must be either list or tree, or directory |
User agents may apply different defaults than those described in this section in order to expose the semantics of HTML elements in a manner more fine-grained than possible with the above definitions.