Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.
This specification defines the web developer rules (author conformance requirements) for the use of [wai-aria-1.1] attributes on [HTML51] elements. It also defines requirements for Conformance Checking tools.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
ARIA in HTML is a [HTML51] specification module. Any HTML features, conformance requirements, or terms that this specification module makes reference to, but does not explicitly define, are defined in the [HTML51] specification.
Feedback and bug reports are welcome. File a bug.
This document was published by the HTML Working Group as a First Public Working Draft. This document is intended to become a W3C Recommendation. If you wish to make comments regarding this document, please send them to [email protected] (subscribe, archives). All comments are welcome.
Publication as a First Public Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
This document is governed by the 1 August 2014 W3C Process Document.
This is a draft document and its contents are subject to change without notice.
Web developers MAY use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in [wai-aria-1.1], except where these conflict with the strong native semantics or are equal to the default implicit ARIA semantics of a given HTML element. These constraints, are intended to prevent developers from making assistive technology products report nonsensical user interface information (UI) that does not represent the actual UI of the document.
Web developers MUST NOT use the ARIA role and aria-* attributes in a manner that conflicts with the semantics described in the Document conformance requirements for use of ARIA attributes in HTML table. Web developers SHOULD NOT set the ARIA role and aria-* attributes to values that match the default implicit ARIA semantics defined in the table.
role=heading on a button element. This is not allowed, because the button element has default characteristics that conflict with the heading role.
<button role="heading">search</button>
The following table describes the default implicit ARIA semantics that apply to HTML elements as defined in the HTML Accessibility API Mappings specification. Each language feature (element or attribute) in a cell in the first column implies the ARIA semantics (any role, states, and properties) given in the cell in the second column of the same row.
Setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and is NOT RECOMMENDED as these properties are already set by the browser.
| HTML language feature | Default Implicit ARIA semantics - SHOULD NOT be used | ARIA roles, states and properties which MAY be used |
|---|---|---|
a element with a href |
role=link |
Roles: global |
a element without a href |
NONE | Any global |
address
| NONE | |
area with a href |
role=link |
Any |
article |
role=article |
Roles: |
aside |
role=complementary |
Roles:
global |
audio |
NONE | Role: |
base
| NONE | No role or aria* attributes |
body |
role=document |
global aria-* attributes |
button
| role=button |
Roles: |
button type="menu"
| role=button |
Roles: |
caption
| NONE | global aria-* attributes |
| NONE | No role or aria* attributes |
|
datalist
| role=listbox |
global |
dd, dt
| NONE | global aria-* attributes |
details
| role=group |
global aria-* attributes and any aria-* attributes applicable to the
group role. |
dialog |
role=dialog |
global |
div
| No role | Any global |
dl
| role=list |
|
embed
| NONE | Role: global |
figure
| NONE | Any global |
footer
| If not a descendant of an article or section element role=contentinfo, otherwise NONE |
|
form |
role=form |
|
grouping content elements not listed elsewhere:
|
NONE | Any global |
h1 to h6 element |
role=heading, with the aria-level = positive integer |
global aria-* attributes |
head
| NONE | No role or aria* attributes |
header
| If not a descendant of an article or section element role=banner, otherwise NONE |
global |
hr
| role=separator |
global aria-* attributes and any aria-* attributes applicable to the separator role. |
html
| NONE | No role or aria* attributes |
iframe
| NONE | Role:
|
iframe (seamless)
| NONE | Role: global |
img with alt="" |
NONE | No role or aria* attributes |
img with alt="some text" |
role=img |
Any global |
input type= button
|
role=button |
Role: global |
input type= checkbox
|
|
No |
input type = color |
NONE | No |
input type = date |
NONE | No |
input type = datetime
|
NONE | No |
input type = email with
no list attribute |
role=textbox |
global |
input type = file |
NONE | No |
input type = hidden |
NONE | No role or aria* attributes |
input type= image
|
role=button |
Role: global |
input type = month |
NONE | No |
input type = number |
role=spinbutton |
global |
input type = password |
role=textbox |
No |
input type = radio |
role=radio |
global |
input type = range |
role=slider |
global |
input type= reset |
role=button |
No global |
input type = search, with no list attribute |
role=textbox |
No |
input type = submit |
role=button |
No global |
input type = tel with no
list attribute |
role=textbox |
No |
input type = text with
no list
attribute |
role=textbox |
No |
input type = text, search, tel, url, or email
with a list attribute |
role=combobox |
No global |
input type= time |
NONE | No |
input type = url with no list
attribute |
role=textbox |
No |
input type = week |
NONE | No |
| NONE | Any global |
|
keygen
| NONE | No |
label
| NONE | No |
li element whose parent is
an ol or ul
| role=listitem |
Role: |
link element with a href |
role=link |
No role or aria* attributes |
main |
role=main |
No |
map |
NONE | No role or aria* attributes |
math |
role=math |
No |
menu type = toolbar |
role=toolbar |
global |
menuitem
type = command
| role=menuitem |
global |
menuitem
type = checkbox
| role=menuitemcheckbox |
global |
menuitem
type = radio
| role=menuitemradio |
global |
meta
| NONE | No role or aria* attributes |
meter
| role=progressbar |
global aria-* attributes |
nav
| role=navigation |
global aria-* attributes |
noscript
| NONE | No role or aria* attributes |
object
| NONE | Role: global |
ol
| role=list |
Role: global |
optgroup
| NONE | global aria-* attributes |
| option element that is in a list of options or that represents a suggestion in a datalist | role=option |
|
output
| role=status |
Any global |
param
| NONE | No role or aria* attributes |
picture
| NONE | No role or aria* attributes |
progress
| role=progressbar |
global |
script
| NONE | No role or aria* attributes |
section
| role=region |
Role: global |
select |
role=listbox |
|
source
| NONE | No role or aria* attributes |
span
| NONE | Any global |
style
| NONE | No role or aria* attributes |
SVG
| NONE | Role: global |
summary
| role=button |
Role: global |
table
| NONE | Role: any global |
template
| NONE | No role or aria* attributes |
textarea
| role=textbox |
|
role=rowgroup |
Role: any |
|
title
| NONE | No role or aria* attributes |
td
| NONE | Role: any global |
| Text level semantic elements not listed elsewhere:
|
NONE | Role: any
global |
th
| role=columnheader or rowheader |
Role: any global |
| NONE | Role: any global |
|
track
| NONE | No role or aria* attributes |
ul
| role=list |
Role: global |
video
| NONE | Role: global |
Element with a disabled attribute
|
aria-disabled="true" |
Use the Only use the |
Element with a required
attribute |
aria-required="true" |
Use the MAY also be used for elements that have an attached ARIA role which allows the |
Element with a readonly
attribute |
aria-readonly="true" |
Use the Only use the |
Element with a hidden
attribute |
aria-hidden="true" |
|
| Element that is a candidate for constraint validation but that does not satisfy its constraints | aria-invalid="true" |
Only use the |
The elements marked with NONE, in the second column of the table do not have any default implicit ARIA semantics, but they do have meaning and this meaning may be represented in roles, states and properties not provided by ARIA, and exposed to users of assitive technology via accessibility APIs. It is therefore recommended that web developers add a role attribute to a semantically neutral element such as a div or span, rather than overriding the semantics of the listed elements.
Authors are encouraged to make use of the following documents for guidance on using ARIA in HTML beyond that which is provided here:
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>
This section is non-normative.
The following table provides an informative reference to the ARIA roles, states and properties permitted for use in HTML. All ARIA roles, states and properties are normatively defined in the [wai-aria] specification. Links to ARIA roles, states and properties in the table reference the normative [wai-aria] definitions.
| Role | Description | Required Properties | Supported Properties |
|---|---|---|---|
| any | ARIA global states and properties can be used on any HTML element. | none | |
alert |
A message with important, and usually time-sensitive, information. See related alertdialog and status. |
none | |
alertdialog |
A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. See related alert
dialog. |
none | |
application |
A region declared as a web application, as opposed to a web document. | none | |
article |
A section of a page that consists of a composition that forms an independent part of a document, page, or site. | none | |
banner |
A region that contains mostly site-oriented content, rather than page-specific content. | none | |
button |
An input that allows for user-triggered actions when clicked or pressed. See related link. |
none | |
checkbox |
A checkable input that has three possible values: true, false, or mixed. | | |
columnheader |
A cell containing header information for a column. | none | |
combobox |
A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. See related listbox. |
||
complementary |
A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content. | none | |
contentinfo |
A large perceivable region that contains information about the parent document. | none | |
definition |
A definition of a term or concept. | none | |
dialog |
A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter
information or require a response. See related alertdialog. |
none | |
directory |
A list of references to members of a group, such as a static table of contents. | none | |
document |
A region containing related information that is declared as document content, as opposed to a web application. | none | |
form |
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. See related search.
|
none | |
grid |
A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table. | none | |
gridcell |
A cell in a grid or treegrid. | none | |
group |
A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies. | none | |
heading |
A heading for a section of the page. | none | |
img |
A container for a collection of elements that form an image. | none | |
link |
An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See
related button. |
none | |
list |
A group of non-interactive list items. See related listbox. |
none | |
listbox |
A widget that allows the user to select one or more items from a list of choices. See related combobox and list. |
none | |
listitem |
A single item in a list or directory. |
none | |
log |
A type of live region where new information is added in meaningful order and old information may disappear. See related marquee.
|
none | |
main |
The main content of a document. | none | |
marquee |
A type of live region where non-essential information changes frequently. See related log. |
none | |
math |
Content that represents a mathematical expression. | none | |
menu |
A type of widget that offers a list of choices to the user. | none | |
menubar |
A presentation of menu that usually remains visible and is usually presented horizontally. | none | |
menuitem |
An option in a group of choices contained by a menu or menubar. |
none | |
menuitemcheckbox
|
A checkable menuitem that has three possible values: true, false, or mixed. | | |
menuitemradio |
A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time. |
||
navigation |
A collection of navigational elements (usually links) for navigating the document or related documents. | none | |
note |
A section whose content is parenthetic or ancillary to the main content of the resource. | none | |
option |
A selectable item in a select list. | none | |
presentation |
An element whose implicit native role semantics will not be mapped to the accessibility API. | none | |
progressbar |
An element that displays the progress status for tasks that take a long time. | none | |
radio |
A checkable input in a group of radio roles, only one of which can be checked at a time. | ||
radiogroup |
A group of radio buttons. | none | |
region |
A large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics. | none | |
row |
A row of cells in a grid. | none | |
rowgroup |
A group containing one or more row elements in a grid. | none | |
rowheader |
A cell containing header information for a row in a grid. | none | |
scrollbar |
A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. | ||
search |
A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related form
. |
none | |
separator |
A divider that separates and distinguishes sections of content or groups of menuitems. |
|
|
slider |
A user input where the user selects a value from within a given range. | ||
spinbutton |
A form of range that expects the user to select from among discrete choices. | ||
status |
A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily
presented as a status bar. See related alert. |
none | |
tab |
A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. | none | |
tablist |
A list of tab elements, which are references to tabpanel elements. | none | |
tabpanel |
A container for the resources associated with a tab, where each tab is contained in a tablist. |
none | |
textbox |
Input that allows free-form text as its value. | none | |
timer |
A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point. | none | |
toolbar |
A collection of commonly used function buttons represented in compact visual form. | none | |
tooltip |
A contextual popup that displays a description for an element. | none | |
tree |
A type of list that may contain sub-level nested groups that can be collapsed and expanded. | none | |
treegrid |
A grid whose rows can be expanded and collapsed in the same manner as for a tree. | none | |
treeitem |
An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitems. | none |
Conformance checkers that claim support for checking of ARIA in HTML, MUST implement checks for the document conformance requirements for use of the ARIA role and aria-* attributes on HTML elements as defined in this specification.
Documents MUST NOT use any role values with elements
in the Document conformance requirements for use of ARIA attributes in HTML table, other than the corresponding role value (if any) as listed for that element in the third column, other than those indicated in the second column, which SHOULD NOT be used.
Conformance checkers are encouraged to phrase errors such that developers are encouraged to use
more appropriate elements rather than remove accessibility information. For example, if an
a element is marked as having the button
role, a conformance checker could say "Use a more appropriate element to represent a button, for
example a button element or an input element" rather than "The button role should not be used with a elements".
All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC2119. The key word "OPTIONALLY" in the normative parts of this document is to be interpreted with the same normative meaning as "MAY" and "OPTIONAL". For readability, these words do not appear in all uppercase letters in this specification. [RFC2119]]