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]
The following table defines the strong native semantics and corresponding default 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.
Language feature | Strong native semantics and default implied ARIA semantics |
---|---|
area element that creates a hyperlink |
link role |
base element |
No role |
datalist element |
listbox role, with the aria-multiselectable property set to "false" |
details element |
aria-expanded state set to "true" if the element's open attribute is present, and set to "false" otherwise |
head element |
No role |
hgroup element |
heading role, with the aria-level property set to the element's outline depth |
hr element |
separator role |
html element |
No role |
img element whose alt attribute's value is empty |
presentation role |
input element with a type attribute in the Checkbox state |
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 |
No role |
input element with a type attribute in the state |
No 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 |
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 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 |
input element that is required |
The aria-required state set to "true" |
keygen element |
No role |
label element |
No role |
link element that creates 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 |
meta element |
No role |
meter element |
No role |
nav element |
navigation role |
noscript element |
No role |
optgroup element |
No 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. |
param element |
No role |
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 |
script element |
No role |
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" |
select element with a required attribute |
The aria-required state set to "true" |
source element |
No role |
style element |
No role |
summary element |
No role |
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 |
textarea element with a required attribute |
The aria-required state set to "true" |
title element |
No 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 |
Element that is disabled | The aria-disabled state set to "true" |
Element with a attribute |
The aria-hidden state set to "true" |
Element that is a candidate for constraint validation but that does not satisfy its constraints | The aria-invalid state set to "true" |
Some HTML elements have native semantics that can be overridden. The following table lists these elements and their default 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 overridden, 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. In addition, any element may be given the presentation
role, regardless of the restrictions below.
Language feature | Default implied ARIA semantic | Restrictions |
---|---|---|
a element that creates a hyperlink |
link role |
Role must be either link , button , checkbox , menuitem , menuitemcheckbox , menuitemradio , tab , or treeitem |
address element |
No role | If specified, role must be contentinfo |
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 |
audio element |
No role | If specified, role must be application |
button element |
button role |
Role must be either button , link , menuitem , menuitemcheckbox , menuitemradio , radio |
details element |
group role |
Role must be a role that supports aria-expanded |
embed element |
No role | If specified, role must be either application , document , or img |
footer element |
No role | If specified, role must be contentinfo |
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 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 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 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 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 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 link , menuitem , menuitemcheckbox , menuitemradio , tab , or treeitem |
header element |
No role | If specified, role must be banner |
iframe element |
No role | If specified, role must be either application , document , or img |
img element whose alt attribute's value is absent |
img role |
No restrictions |
img element whose alt attribute's value is present and not empty |
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 , radio |
input element with a type attribute in the Checkbox state |
checkbox role |
Role must be either checkbox or menuitemcheckbox |
input element with a type attribute in the Image Button state |
button role |
Role must be either button , link , menuitem , menuitemcheckbox , menuitemradio , radio |
input element with a type attribute in the Radio Button state |
radio role |
Role must be either radio or menuitemradio |
li element whose parent is an ol or ul element |
listitem role |
Role must be either listitem , menuitemcheckbox , menuitemradio , option , tab , or treeitem |
object element |
No role | If specified, role must be either application , document , or img |
ol element |
list role |
Role must be either directory , list , listbox , menu , menubar , tablist , toolbar , tree |
output element |
status role |
No restrictions |
section element |
region role |
Role must be either alert , alertdialog , application , contentinfo , dialog , document , log , main , marquee , region , search , or status |
ul element |
list role |
Role must be either directory , list , listbox , menu , menubar , tablist , toolbar , tree |
video element |
No role | If specified, role must be application |
The body element | document role |
Role must be either document or application |
The entry "no role", when used as a strong native semantic, means that no role other than presentation
can be used. When used as a default implied ARIA semantic, it means the user agent has no default mapping to ARIA roles. (However, it probably will have its own mappings to the accessibility layer.)
These features can be used to make accessibility tools render content to their users in more useful ways. For example, ASCII art, which is really an image, appears to be text, and in the absence of appropriate annotations would end up being rendered by screen readers as a very painful reading of lots of punctuation. Using the features described in this section, one can instead make the ATs skip the ASCII art and just read the caption:
<figure role="img" aria-labelledby="fish-caption"> <pre> o .'`/ ' / ( O .-'` ` `'-._ .') _/ (o) '. .' / ) ))) >< < `\ |_\ _.' '. \ '-._ _ .-' '.) jgs `\__\ </pre> <figcaption id="fish-caption"> Joan G. Stark, "<cite>fish</cite>". October 1997. ASCII on electrons. 28×8. </figcaption> </figure>