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 recognized 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 |
---|---|
|
|
area element that represents a hyperlink
| link role
|
button element
| button role
|
datalist element
| listbox role, with the aria-multiselectable property set to "false"
|
h1 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
|
h2 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
|
h3 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
|
h4 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
|
h5 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
|
h6 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
|
hgroup element
| heading role, with the aria-level property set to the element's outline depth
|
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 IDL 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 toolbar 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 element 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 |
---|---|---|
a element that represents a hyperlink |
link role |
Role must be either button, checkbox, link, menuitem, menuitemcheckbox, menuitemradio, tab, or treeitem |
address element
| No role | If specified, role must be contentinfo (ARIA restricts usage of this role to one per page)
|
article element
| article role
| Role must be either article , document , application , or main (ARIA restricts usage of this role to one per page)
|
aside element
| note role
| Role must be either note , complementary , or search
|
button element |
button role |
Role must be either button, link, menuitem, menuitemcheckbox, menuitemradio, or radio |
footer element
| No role | If specified, role must be contentinfo (ARIA restricts usage of this role to one per page)
|
header element
| No role | If specified, role must be banner (ARIA restricts usage of this role to one per page)
|
h1 element that does not have an hgroup ancestor |
heading role, with the aria-level property set to the element's outline depth |
Role must be either heading role, with the aria-level property set to the element's outline depth, link, menuitem, menuitemcheckbox, menuitemradio, tab or treeitem |
h2 element that does not have an hgroup ancestor |
heading role, with the aria-level property set to the element's outline depth |
Role must be either heading role, with the aria-level property set to the element's outline depth, link, menuitem, menuitemcheckbox, menuitemradio, tab or treeitem |
h3 element that does not have an hgroup ancestor |
heading role, with the aria-level property set to the element's outline depth |
Role must be either heading role, with the aria-level property set to the element's outline depth, link, menuitem, menuitemcheckbox, menuitemradio, tab or treeitem |
h4 element that does not have an hgroup ancestor |
heading role, with the aria-level property set to the element's outline depth |
Role must be either heading role, with the aria-level property set to the element's outline depth, link, menuitem, menuitemcheckbox, menuitemradio, tab or treeitem |
h5 element that does not have an hgroup ancestor |
heading role, with the aria-level property set to the element's outline depth |
Role must be either heading role, with the aria-level property set to the element's outline depth, link, menuitem, menuitemcheckbox, menuitemradio, tab or treeitem |
h6 element that does not have an hgroup ancestor |
heading role, with the aria-level property set to the element's outline depth |
Role must be either heading role, with the aria-level property set to the element's outline depth, link, menuitem, menuitemcheckbox, menuitemradio, tab or treeitem |
img element whose alt attribute's value is not empty or is absent |
img role | No restrictions |
input element with a type attribute in the Button state |
button role |
Role must be either button, link, menuitem, menuitemcheckbox, menuitemradio, or radio |
input element with a type attribute in the Image Button state |
button role |
Role must be either button, link, menuitem, menuitemcheckbox, menuitemradio, or radio |
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 (ARIA restricts usage of this role to one per page), main (ARIA restricts usage of this role to one per page), search , alert , dialog , alertdialog , status , or log
|
table element
| grid role
| grid or treegrid
|
ul element
| list role
| Role must be either list or tree , or directory
|
The body element | document role
| Role must be either document or application
|
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.
Conformance checkers are encouraged to phrase errors such that
authors are encouraged to use more appropriate elements rather than
remove accessibility annotations. For example, if an a
element is marked as having the button
role, a conformance
checker could say "Either a button
element or an
input
element is required when using the button
role" rather than "The
button
role cannot be
used with a
elements".