jump
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]
Every HTML element may have an ARIA role attribute specified. This is an ARIA
Role attribute as defined by [ARIA]
Section 5.4
Definition of Roles.
The attribute, if specified, must have a value that is a set of space-separated tokens representing the various WAI-ARIA roles that the element belongs to.
Every HTML element may have ARIA state and property attributes specified. These attributes are defined by [ARIA] in Section 6.6, Definitions of States and Properties (all aria-* attributes).
These attributes, if specified, must have a value that is the ARIA value type in the "Value" field of the definition for the state or property, mapped to the appropriate HTML value type according to [ARIA] Section 10.2 Mapping WAI-ARIA Value types to languages using the HTML 5 mapping.
ARIA State and Property attributes can be used on any element. They are not always meaningful, however, and in such cases user agents might not perform any processing aside from including them in the DOM. State and property attributes are processed according to the requirements of the sections Strong Native Semantics and Implicit ARIA semantics, as well as [ARIA] and [ARIAIMPL].
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 |
dialog element without an open attribute |
The aria-hidden state set
to "true" |
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
property 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
property 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
property 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 property
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
property 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
property 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 property
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 property
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 property
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 property
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 property 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
property 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 property
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
property 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 property 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 that is inert | The aria-disabled state
set to "true" |
Element with a |
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 |
dialog element |
dialog role |
Role must be either alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, region, search, or status |
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 heading or tab |
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 or tab |
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 or tab |
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 or tab |
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 or tab |
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 or tab |
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>