W3C
Editor's
Draft
27
September
Copyright © 2024 World Wide Web Consortium . W3C ® liability , trademark and permissive document license rules apply.
This specification defines the authoring rules (author conformance requirements) for the use of Accessible Rich Internet Applications (WAI-ARIA) 1.2 and Digital Publishing WAI-ARIA Module 1.0 attributes on [ HTML ] elements. This specification's primary objective is to define requirements for use with conformance checking tools used by authors (i.e., web developers). These requirements will aid authors in their development of web content, including custom interfaces and widgets, which make use of ARIA to complement or extend the features of the host language [ HTML ].
This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.
ARIA in HTML is an [ HTML ] specification module. Any HTML features, conformance requirements, or terms that this specification module makes reference to, but does not explicitly define, are defined by the HTML Standard .
Since this specification become a W3C Recommendation on 09 December 2021, the following substantive additions and/or corrections have been proposed:
separator
role.
img
element
allowances
to
be
based
on
if
the
element
has
an
accessible
name
or
not.
address
and
hgroup
element
allowances
per
their
updated
mapping
to
the
group
role.
aside
element
to
allow
the
dpub
doc-glossary
role.
button
,
input
type=button
,
input
type=image
input
type=reset
,
and
input
type=submit
elements
to
align
their
allowed
roles.
s
element
allowed
roles
to
indicate
use
of
role=deletion
on
the
element
would
be
considered
redundnat.
aria-*
attributes
and
roles
on
summary
element.
li
element
role
allowances
in
context
to
the
element's
ancestral
relationship,
or
lack
of,
to
a
list
element
parent.
search
element
has
been
added.
aria-hidden=true
on
the
body
element.
figure
element
role
allowances
to
include
doc-example
.
aria-*
attributes
on
the
datalist
element.
aria-checked
is
not
to
be
used
on
elements
that
support
the
checked
attribute.
none
and
presentation
roles
on
nav
element
.
div
element
when
it
is
a
child
of
a
dl
element.
combobox
role
on
button
element
.
Allow
combobox
and
checkbox
roles
on
input
type=button
element
.
doc-biblioentry
and
doc-endnote
roles
on
the
li
element
.
These
roles
are
deprecated
in
Digital
Publishing
WAI-ARIA
Module
1.1
.
radio
role
on
img
alt="some
text"
element
.
none
and
presentation
roles
for
wbr
element
.
Allow
only
aria-hidden
global
attribute
for
br
and
wbr
elements.
group
role
on
section
element
.
link
and
button
roles
on
area
without
href
element
.
aria-hidden
attribute
on
the
picture
element
.
Reviewers of the document can identify candidate additions and/or corrections by their distinctive styling in the document:
Candidate corrections are marked in the document.
Candidate additions are marked in the document.
This document was published by the Web Applications Working Group as an Editor's Draft.
Publication as an Editor's Draft does not imply endorsement by W3C and its Members.
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. Future updates to this specification may incorporate new features .
This document was produced by a group operating under the 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 03 November 2023 W3C Process Document .
This section is non-normative.
Through the use of ARIA, authors can specify semantics that go beyond the current capabilities of native HTML. This can be very useful, as it provides authors the opportunity to create widgets, or expose specific accessible states and properties to native HTML features which would not be possible by the use of HTML alone.
For
instance,
a
button
element
has
no
native
HTML
feature
to
expose
a
"pressed"
state.
ARIA
allows
authors
to
extend
the
semantics
of
the
element
by
specifying
the
aria-pressed
attribute,
allowing
for
an
aural
UI
that
will
match
the
visual
presentation
of
the
control.
In
the
following
example,
a
button
element
allows
for
a
user
to
toggle
the
state
of
a
setting
within
a
web
application.
The
aria-pressed
attribute
is
used
to
augment
the
button
element.
When
in
the
"pressed"
state
that
information
can
be
exposed
to
users
of
assistive
technologies.
<
button
aria-pressed
=
true
>
...
</
button
>
There
are
also
situations
where
certain
aria-*
attributes
are
allowed
for
use
on
elements
with
specific
role
s,
while
the
equivalent
native
attribute
is
currently
not
valid
in
HTML
itself.
For
instance,
HTML
has
no
direct
concept
of
a
disabled
hyperlink
(
a
href
element).
Constructs
such
as
<a
href="..."
disabled>
...
</a>
are
not
valid,
and
will
not
be
conveyed
to
assistive
technologies.
ARIA
diverges
from
HTML
in
this
regard
and
does
allow
for
an
aria-disabled
attribute
to
be
specified
on
an
element
with
an
explicit
role=link
.
If
an
author
were
to
specify
an
aria-disabled=true
on
an
HTML
hyperlink,
user
agents
would
not
functionally
treat
the
hyperlink
any
differently
(it
would
still
be
clickable/operable),
however
it
would
be
exposed
to
assistive
technologies
as
being
in
the
disabled
state.
Similarly,
while
native
HTML
option
elements
that
are
descendants
of
a
select
can
only
be
set
as
being
selected
,
elements
with
an
explicit
option
role
can
not
only
allow
the
equivalent
aria-selected
,
but
also
the
aria-checked
attribute,
supporting
widgets/constructs
that
go
beyond
the
capabilities
of
a
native
select
element.
Unfortunately, in these situations where ARIA and HTML have feature parity, but diverge in allowances, it can create for a misalignment in support, if not also user experiences. In situations where ARIA allows a feature not supported by HTML, it will often be in the author's and ultimately the user's best interest to instead implement as a fully custom ARIA widget.
In
the
following
example,
a
hyperlink
needs
to
be
communicated
as
being
in
the
disabled
state.
HTML
does
not
allow
for
the
use
of
the
disabled
attribute
on
a
hyperlink,
and
using
aria-disabled=true
would
communicate
the
hyperlink
as
being
disabled
to
assistive
technologies,
but
would
not
actually
disable
the
element.
The
most
effective
way
to
both
communicate
and
actually
disable
a
hyperlink
would
be
to
remove
the
href
from
the
a
element,
creating
a
placeholder.
Then,
ARIA
can
be
applied
to
this
placeholder
link
to
communicate
the
element's
intended
role
and
state.
<
a
role
=
link
aria-disabled
=
true
>
...
</
a
>
This section is non-normative.
ARIA
is
useful
for
revising
or
correcting
the
role
of
an
element
when
a
different
role
is
necessary
to
expose
to
users.
However,
it
is
rarely
in
the
user
or
author's
best
interest
to
try
and
use
ARIA
to
override
an
interactive
element,
for
instance
a
button
,
with
a
role
generally
exposed
by
a
non-interactive
element.
For
instance,
a
heading.
As
an
example,
the
following
uses
a
role=heading
on
a
button
element.
This
is
not
allowed,
because
the
button
element
has
default
functionality
that
conflicts
with
user
expectations
for
the
heading
role.
<
button
role
=
"heading"
>
search
</
button
>
An
author
would
need
to
take
additional
steps
to
ensure
the
default
functionality
and
presentation
of
the
button
was
removed,
and
even
doing
so
may
still
not
be
enough
to
fully
supress
the
element's
implicit
features
depending
on
how
the
user
chooses
to
engage
with
the
web
page.
E.g.,
by
turning
on
Windows
high
contrast
themes,
or
viewing
the
web
page
in
a
browser's
reader
mode.
The
following
example
illustrates
a
button
element
which
has
also
been
provided
an
explicit
role=button
.
Specifying
this
role
is
unnecessary,
as
a
"button"
element
is
already
exposed
with
an
implicit
button
role.
In
practice
this
particular
instance
of
redundancy
will
likely
not
have
unforeseen
side
effects,
other
than
unnecessarily
making
the
markup
more
verbose,
and
incorrectly
signaling
to
other
authors
that
this
practice
is
useful.
Please
review
the
section
3.3
Be
cautious
of
side
effects
for
an
example
of
where
specifying
unnecessary
roles
can
be
problematic.
<!-- Avoid doing this! -->
<
button
role
=
"button"
>
...
</
button
>
Similarly,
the
following
uses
a
role=group
on
a
fieldset
element,
and
a
role=Main
on
a
main
element.
This
is
unnecessary,
because
the
fieldset
element
is
implicitly
exposed
as
a
role=group
,
as
is
the
main
element
implicitly
exposed
as
a
role=main
.
Again,
in
practice
this
will
likely
not
have
any
unforeseen
side
effects
to
users
of
assistive
technology,
as
long
as
the
declaration
of
the
role
value
uses
ASCII
lowercase
.
Please
see
4.4
Case
requirements
for
ARIA
role,
state
and
property
attributes
for
more
information.
<!-- Avoid doing this! -->
<fieldset role="group">...</fieldset>
<!-- or this! -->
<
main
role
=
"Main"
>
...
</
main
>
The
following
uses
a
role=list
on
an
ul
element.
As
the
ul
element
has
an
implicit
role
of
list
,
explicitly
adding
the
role
would
generally
be
considered
redundant.
However,
some
user
agents
suppress
a
list's
implicit
ARIA
semantics
if
the
list
markers
are
removed
from
the
visual
presentation
of
the
list
items.
Generally
the
redundant
declaration
of
an
element's
implicit
role
would
not
be
recommended,
but
in
specific
situations
such
as
this,
and
where
the
role
is
necessary
to
expose,
authors
can
explicitly
add
the
role.
<!-- Generally avoid doing this! -->
<
ul
role
=
"list"
>
...
</
ul
>
The
following
uses
a
role=button
on
a
summary
element.
This
is
unnecessary
and
can
result
in
cross-platform
issues.
For
instance,
preventing
the
element
from
correctly
exposing
its
state,
and
forcing
the
role
of
button
,
when
it
might
otherwise
be
exposed
with
a
platform
or
browser
specific
role.
<details>
<!-- Avoid doing this! -->
<summary role="button">more information</summary>
...
</
details
>
Accessible
Rich
Internet
Applications
(WAI-ARIA)
1.2
defines
a
number
of
roles
which
are
not
meant
to
be
used
by
authors.
Many
of
these
roles
are
categorized
as
Abstract
Roles
which
are
explicitly
stated
as
not
to
be
used
by
authors.
The
following
example
illustrates
the
invalid
use
of
an
abstract
select
role,
where
an
author
likely
meant
to
use
the
combobox
role
instead.
<!-- Do not do this! -->
<
div
role
=
"select"
...
>
...
</
div
>
ARIA
also
defines
a
generic
role
which
is
meant
to
provide
feature
parity
with
a
number
of
HTML
elements
that
do
not
have
more
specific
ARIA
semantics
of
their
own.
For
instance,
HTML's
div
and
span
elements,
among
others.
ARIA
discourages
authors
from
using
the
generic
role
as
its
intended
purpose
is
for
use
by
implementors
of
user
agents.
In
the
following
example,
rather
than
using
a
generic
role,
authors
are
advised
to
use
a
div
in
place
of
the
article
element.
If
changing
the
HTML
element
is
not
possible,
specifying
a
role
of
presentation
or
none
would
be
acceptable
alternaties
to
remove
the
implicit
role
of
the
article
.
<!-- Avoid doing this! -->
<
article
role
=
"generic"
...
>
...
</
article
>
Additionally, ARIA specifically mentions in Conflicts with Host Language Semantics that if authors use both native HTML features for exposing states and properties as well as their ARIA counterparts, then the host language features take priority over the explicit ARIA attributes that are also used.
For
instance,
in
the
following
example
an
author
is
using
HTML's
input
type=checkbox
and
has
specified
an
aria-checked=true
.
However,
user
agents
are
meant
to
ignore
the
aria-checked
attribute.
Instead
user
agents
would
expose
the
state
based
on
the
native
features
of
the
form
control.
<!-- Do not do this! -->
<
input
type
=
"checkbox"
checked
aria-checked
=
"false"
>
While
ARIA
can
be
used
to
alter
the
way
HTML
features
are
exposed
to
users
of
assistive
technologies,
these
modifications
do
not
change
the
underlying
parsing
and
allowed
content
models
of
HTML.
For
instance,
a
div
allows
an
author
to
specify
any
role
on
it.
However,
this
does
not
mean
that
the
element
can
then
be
used
in
a
way
that
deviates
from
the
rules
HTML
has
defined
for
the
element.
For
instance,
in
the
following
example
an
author
has
specified
a
role
of
link
on
a
div
element.
While
HTML
allows
for
a
hyperlink
(exposed
as
a
role=link
)
to
be
a
descendant
of
a
p
element,
the
HTML
parser
does
not
allow
a
div
to
be
a
descendant
of
a
p
element.
<!-- Do not do this! -->
<p>
... <div role=link tabindex=0>...</div> ...
</
p
>
The HTML parser will modify the above markup to be output as the following:
<!-- The previous example's markup will render as follows -->
<p>...</p>
<div role=link tabindex=0>...</div>
...
<p></p>
<!-- Instead of a div, use a span. Spans are allowed descendants of p elements! -->
<p>
... <span role=link tabindex=0>...</span> ...
</
p
>
While this specification indicates the allowed ARIA attributes that can be specified on each HTML element, this example illustrates that even if a role is allowed, the context in which it is used can still result in potential rendering and accessibility issues.
The following table provides normative per-element document conformance requirements for the use of ARIA markup in HTML documents. Additionally, it identifies the implicit ARIA semantics that apply to HTML elements . The implicit ARIA semantics of these elements are defined in HTML AAM .
Each
language
feature
(element)
in
a
cell
in
the
first
column
implies
the
ARIA
semantics
(role,
states,
and
properties)
given
in
the
cell
in
the
second
column
of
the
same
row.
The
third
cell
in
each
row
defines
the
ARIA
role
values
and
aria-*
attributes
which
authors
MAY
specify
on
the
element.
Where
a
cell
in
the
third
column
includes
the
term
Any
role
it
indicates
that
any
role
value
MAY
be
used
on
the
element.
However,
it
is
NOT
RECOMMENDED
for
authors
to
specify
the
implicit
role
of
the
element,
the
generic
role,
or
a
role
deprecated
by
ARIA
on
these
elements.
If
a
cell
in
the
third
column
includes
the
term
No
role
it
indicates
that
authors
MUST
NOT
overwrite
the
implicit
ARIA
semantics,
or
native
semantics
of
the
HTML
element.
WAI-ARIA identifies roles which have prohibited states and properties . These roles do not allow certain WAI-ARIA attributes to be specified by authors. HTML elements which expose these implicit WAI-ARIA roles also prohibit authors from specifying these WAI-ARIA attributes.
Elements
which
are
identified
as
Naming
prohibited
are
those
which
authors
MUST
NOT
specify
an
aria-label
or
aria-labelledby
attribute,
unless
the
element
allows
for
its
implicit
role
to
be
overwritten
by
an
explicit
WAI-ARIA
role
which
allows
naming
from
authors.
For
more
information
see
4.1
Requirements
for
use
of
ARIA
attributes
to
name
elements
.
While
setting
an
ARIA
role
and/or
aria-*
attribute
that
matches
the
implicit
ARIA
semantics
is
NOT
RECOMMENDED
,
in
some
situations
explicitly
setting
these
attributes
can
be
helpful
–
for
instance,
for
user
agents
that
do
not
expose
implicit
ARIA
semantics
for
certain
elements.
While
it
is
conforming
to
use
Digital
Publishing
WAI-ARIA
Module
1.0
role
values
as
outlined
in
the
following
table,
the
current
support
for
exposing
the
semantics
of
these
values
to
users
of
assistive
technology
is
close
to
non-existent.
HTML element |
Implicit ARIA semantics (explicitly assigning these in markup is NOT RECOMMENDED ) |
ARIA role, state and property allowances |
---|---|---|
a
with
href
|
role=
link
|
Roles:
DPub
Roles:
Global
It
is
NOT
RECOMMENDED
to
use
Note
If
a
link
needs
to
be
programmatically
communicated
as
"disabled",
remove
the
href
attribute
.
|
a
without
href
|
role=
generic
|
Any
Otherwise,
global
|
abbr
|
No corresponding role |
Otherwise,
global
|
address
|
role=
group
|
Any
Otherwise,
global
|
area
with
href
|
role=
link
|
No
Global
|
area
without
href
|
role=
generic
|
Roles:
Otherwise,
global
|
article
|
role=
article
|
Roles:
Global
|
aside
|
role=
complementary
|
Roles:
DPub
Roles:
Global
|
audio
|
No corresponding role |
Role:
Global
|
autonomous custom element |
Role
exposed
from
author
defined
Otherwise
|
If
role
defined
by
Otherwise,
any
Naming
Prohibited
if
exposed
as
the
Otherwise,
global
|
b
|
role=
generic
|
Any
Otherwise,
global
|
base
|
No corresponding role |
No
|
bdi
|
role=
generic
|
Any
Otherwise,
global
|
bdo
|
role=
generic
|
Any
Otherwise,
global
|
blockquote
|
role=
|
Any
Global
|
body
|
role=
generic
|
No
Otherwise,
global
|
br
|
No corresponding role |
Roles:
Authors
MAY
specify
the
|
button
|
If
the
|
Roles:
Global
If
the
|
canvas
|
No corresponding role |
Global
|
caption
|
role=
|
No
Otherwise,
global
|
cite
|
No corresponding role |
Otherwise,
global
|
code
|
role=
|
Any
Otherwise,
global
|
col
|
No corresponding role |
No
|
colgroup
|
No corresponding role |
No
|
data
|
role=
generic
|
Any
Otherwise,
global
|
datalist
|
role=
listbox
|
|
dd
|
No corresponding role |
Global
|
del
|
role=
|
Any
Otherwise,
global
|
details
|
role=
group
|
No
Global
|
dfn
|
role=
term
|
Any
Global
|
dialog
|
role=
dialog
|
Role:
Global
|
div
|
role=
generic
|
If
a
direct
child
of
a
Otherwise,
global
|
dl
|
No corresponding role |
Roles:
Global
|
dt
|
No corresponding role |
Role:
Global
|
em
|
role=
|
Any
Otherwise,
global
|
embed
|
No corresponding role |
Roles:
Global
|
fieldset
|
role=
group
|
Roles:
Global
|
figcaption
|
No corresponding role |
Roles:
Otherwise,
global
|
figure
|
role=
figure
|
If
the
If
the
Otherwise,
Global
|
footer
|
If
not
a
descendant
of
an
Otherwise,
|
Roles:
DPub
Role:
Naming
Prohibited
if
exposed
as
Otherwise,
global
|
form
|
|
Roles:
Global
Note
A
|
form-associated custom element |
Role
exposed
from
author
defined
Otherwise
|
If
role
defined
by
Otherwise,
form-related
roles:
Naming
Prohibited
if
exposed
as
the
Otherwise,
global
|
h1
to
h6
|
role=
heading
,
aria-level
=
the
number
in
the
element's
tag
name
|
Roles:
DPub
Role:
Global
|
head
|
No corresponding role |
No
|
header
|
If
not
a
descendant
of
an
Otherwise,
|
Roles:
Naming
Prohibited
if
exposed
as
Otherwise,
global
|
hgroup
|
role=
group
|
Any
Otherwise,
global
|
hr
|
role=
separator
|
Roles:
DPub
Role:
Global
|
html
|
role=
document
|
No
No
|
i
|
role=
generic
|
Any
Otherwise,
global
|
iframe
|
No corresponding role |
Roles:
Global
|
img
with
an
accessible
name.
|
If
the
img
has
non-empty
alt
(
alt="some
text"
)
or
an
accessible
name
is
provided
another
img
naming
method
:
role=
img
|
Roles:
DPub
Role:
Global
|
img
with
no
accessible
name.
|
If
the
If
the
|
If
the
If
the
No
Otherwise,
if
the
|
input
type=button
|
role=
button
|
Roles:
Global
|
input
type=checkbox
|
role=
checkbox
|
Roles:
Authors
MUST
NOT
use
the
Otherwise,
any
global
Note
The
HTML
|
input
type=color
|
No corresponding role |
Global
|
input
type=date
|
No corresponding role |
Global
|
input
type=datetime-local
|
No corresponding role |
Global
|
input
type=email
with
no
list
attribute
|
role=
textbox
|
No
Global
|
input
type=file
|
No corresponding role |
Global
|
No corresponding role |
No
|
|
input
type=image
|
role=
button
|
The
following
roles
are
allowed,
but
are
NOT
RECOMMENDED
:
Global
If
possible,
authors
SHOULD
consider
using
a
different
HTML
element
which
allows
the
specified
role,
such
as
the
|
input
type=month
|
No corresponding role |
Global
|
input
type=number
|
role=
spinbutton
|
No
Global
|
input
type=password
|
No corresponding role |
Global
|
input
type=radio
|
role=
radio
|
Role:
Authors
MUST
NOT
use
the
Otherwise,
any
global
Note
The
HTML
|
input
type=range
|
role=
slider
|
No
Authors
SHOULD
NOT
use
the
Otherwise,
any
global
|
input
type=reset
|
role=
button
|
The
following
roles
are
allowed,
but
are
NOT
RECOMMENDED
:
Global
If
possible,
authors
SHOULD
consider
using
a
different
HTML
element
which
allows
the
specified
role,
such
as
the
|
input
type=search
,
with
no
list
attribute
|
role=
searchbox
|
No
Global
|
input
type=submit
|
role=
button
|
The
following
roles
are
allowed,
but
are
NOT
RECOMMENDED
:
Global
If
possible,
authors
SHOULD
consider
using
a
different
HTML
element
which
allows
the
specified
role,
such
as
the
|
input
type=tel
,
with
no
list
attribute
|
role=
textbox
|
No
Global
|
input
type=text
or
with
a
missing
or
invalid
type
,
with
no
list
attribute
|
role=
textbox
|
Roles:
Global
|
input
type=text
,
search
,
tel
,
url
,
email
,
or
with
a
missing
or
invalid
type
,
with
a
list
attribute
|
role=
combobox
|
No
Authors
SHOULD
NOT
use
the
Otherwise,
any
global
|
input
type=time
|
No corresponding role |
Global
|
input
type=url
with
no
list
attribute
|
role=
textbox
|
No
Global
|
input
type=week
|
No corresponding role |
Global
|
ins
|
role=
|
Any
Otherwise,
global
|
kbd
|
No corresponding role |
Otherwise,
global
|
label
|
No corresponding role |
Otherwise,
global
|
legend
|
No corresponding role |
Otherwise,
global
|
li
|
If
the
Otherwise,
if
the
|
No
Otherwise,
any
Global
Authors
SHOULD
NOT
use
the
following
deprecated
DPub
Roles:
|
link
|
No corresponding role |
No
|
main
|
role=
main
|
No
Global
|
map
|
No corresponding role |
No
|
mark
|
No corresponding role |
Otherwise,
global
|
math
|
role=
math
|
No
Global
|
menu
|
role=
list
|
Roles:
Global
Authors
SHOULD
NOT
use
deprecated
|
meta
|
No corresponding role |
No
|
meter
|
role=
|
No
Authors
SHOULD
NOT
use
the
Otherwise,
any
global
|
nav
|
role=
navigation
|
Roles:
DPub
Roles:
Global
|
noscript
|
No corresponding role |
No
|
object
|
No corresponding role |
Roles:
Global
|
ol
|
role=
list
|
Roles:
Global
Authors
SHOULD
NOT
use
deprecated
|
optgroup
|
role=
group
|
No
Global
|
option
element
that
is
in
a
list
of
options
or
that
represents
a
suggestion
in
a
datalist
|
role=
option
|
No
Authors
SHOULD
NOT
use
the
Global
|
output
|
role=
status
|
Any
Global
|
p
|
role=
|
Any
Otherwise,
global
|
param
|
No corresponding role |
No
|
picture
|
No corresponding role |
Authors
MAY
specify
the
|
pre
|
role=
generic
|
Any
Otherwise,
global
|
progress
|
role=
progressbar
|
No
Authors
SHOULD
NOT
use
the
Otherwise,
any
global
|
q
|
role=
generic
|
Any
Otherwise,
global
|
rp
|
No corresponding role |
Global
|
rt
|
No corresponding role |
Otherwise,
global
|
ruby
|
No corresponding role |
Global
|
s
|
role=
|
Any
Otherwise,
global
|
samp
|
role=
generic
|
Any
Otherwise,
global
|
script
|
No corresponding role |
No
|
search
|
|
Roles:
Global
|
section
|
Otherwise,
|
Roles:
DPub
Roles:
Global
|
select
(with
NO
multiple
attribute
and
NO
size
attribute
having
value
greater
than
1
)
|
role=
combobox
|
Role:
Authors
SHOULD
NOT
use
the
Otherwise,
any
global
|
select
(with
a
multiple
attribute
or
a
size
attribute
having
value
greater
than
1
)
|
role=
listbox
|
No
Authors
SHOULD
NOT
use
the
Otherwise,
any
global
|
selectedcontent
|
role=
generic
|
No
|
slot
|
No corresponding role |
No
|
small
|
role=
generic
|
Any
Otherwise,
global
|
source
|
No corresponding role |
No
|
span
|
role=
generic
|
Any
Otherwise,
global
|
strong
|
role=
|
Any
Otherwise,
global
|
style
|
No corresponding role |
No
|
sub
|
role=
|
Any
Otherwise,
global
|
summary
|
Note
Many,
but
not
all,
user
agents
expose
the
summary
element
with
an
implicit
ARIA
role=
button
.
|
No
Global
Otherwise,
authors
MAY
specifiy
Any
|
sup
|
role=
superscript
|
Any
Otherwise,
global
|
SVG
|
role=graphics-document
as
defined
by
SVG
AAM
|
Any
Global
|
table
|
role=
table
|
Any
Global
|
tbody
|
role=
rowgroup
|
Any
Global
|
td
|
No
corresponding
role
if
the
ancestor
|
If
the
ancestor
Otherwise,
if
the
ancestor
Global
|
template
|
No corresponding role |
No
|
textarea
|
role=
textbox
|
No
Global
|
tfoot
|
role=
rowgroup
|
Any
Global
|
th
|
No
corresponding
role
if
the
ancestor
|
If
the
ancestor
Otherwise,
if
the
ancestor
Global
|
thead
|
role=
rowgroup
|
Any
Global
|
time
|
role=
time
|
Any
Otherwise,
global
|
title
|
No corresponding role |
No
|
tr
|
role=
row
|
If
the
ancestor
Global
|
track
|
No corresponding role |
No
|
u
|
role=
generic
|
Any
Otherwise,
global
|
ul
|
role=
list
|
Roles:
Global
Authors
SHOULD
NOT
use
the
deprecated
|
var
|
No corresponding role |
Otherwise,
global
|
video
|
No corresponding role |
Role:
Global
|
wbr
|
No corresponding role |
Roles:
Authors
MAY
specify
the
|
The
elements
marked
with
No
corresponding
role
,
in
the
second
column
of
the
table
do
not
have
any
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
assistive
technology
via
accessibility
APIs.
It
is
therefore
recommended
that
authors
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:
Authors
MAY
use
aria-label
and
aria-labelledby
attributes
to
specify
accessible
names
for
elements
which
have
an
implicit
or
explicit
ARIA
role
which
allows
naming
from
authors.
Accessible
Rich
Internet
Applications
(WAI-ARIA)
1.2
defines
roles
which
allow
naming
from
authors
as
well
as
roles
where
author
naming
is
prohibited
.
Authors
MUST
NOT
specify
aria-label
or
aria-labelledby
on
elements
with
implicit
WAI-ARIA
roles
which
cannot
be
named.
HTML
elements
whose
implicit
WAI-ARIA
roles
prohibit
naming
from
authors
are
identified
in
4.
Document
conformance
requirements
for
use
of
ARIA
attributes
in
HTML
.
The following markup example demonstrates a selection of HTML elements with implicit ARIA roles that prohibit naming from authors.
<!-- DO NOT do the following! -->
<p aria-label="...">...</p>
<span aria-label="...">...<span>
<code aria-label="...">...<code>
<
div
aria-labelledby
=
"..."
>
...
</
div
>
The
following
markup
example
demonstrates
elements
which
have
explicit
WAI-ARIA
roles
which
allow
naming
from
authors.
Due
to
the
explicit
roles
specified
on
these
elements,
aria-label
and
aria-labelledby
attributes
are
allowed.
<p role="link" tabindex="0" aria-label="...">...</p>
<span role="button" tabindex="0" aria-label="...">...<span>
<
div
role
=
"article"
aria-labelledby
=
"..."
>
...
</
div
>
Unless
otherwise
stated,
authors
MAY
use
aria-*
attributes
in
place
of
their
HTML
equivalents
on
HTML
elements
where
the
aria-*
semantics
would
be
expected.
For
example,
authors
MAY
specify
aria-disabled=true
on
a
button
element,
while
also
implementing
the
necessary
scripting
to
functionally
disable
the
button
,
rather
than
the
use
disabled
attribute.
As
stated
in
WAI-ARIA's
Conflicts
with
Host
Language
Semantics
,
when
HTML
elements
use
both
aria-*
attributes
and
their
host
language
(HTML)
equivalents,
user
agents
MUST
ignore
the
WAI-ARIA
attributes
–
the
native
HTML
attributes
with
the
same
implicit
ARIA
semantics
take
precedence.
For
this
reason,
authors
SHOULD
NOT
specify
both
the
native
HTML
attribute
and
the
equivalent
aria-*
attribute
on
an
element.
Please
review
each
attribute
for
any
further
author
specific
requirements.
The
following
table
represents
HTML
elements
and
their
attributes
which
have
aria-*
attribute
parity.
Each
language
feature
(element
and
attribute)
in
a
cell
in
the
first
column
implies
the
ARIA
semantics
(states,
and
properties)
given
in
the
cell
in
the
second
column
of
the
same
row.
The
third
cell
in
each
row
defines
how
authors
can
use
the
native
HTML
feature,
along
with
requirements
for
using
the
aria-*
attributes
that
supply
the
same
implicit
ARIA
semantics
.
HTML feature |
Implicit ARIA semantics |
HTML
feature
and
aria-*
attribute
author
guidance
|
---|---|---|
Any
element
where
the
checked
attribute
is
allowed
|
aria-checked="true"
|
Use
the
Authors
MUST
NOT
use
the
Authors
MAY
use
the
|
Any
element
where
the
disabled
attribute
is
allowed,
including
option
disabled
and
optgroup
disabled
|
aria-disabled="true"
|
Use
the
Authors
MAY
use
the
Authors
SHOULD
NOT
use
Authors
MUST
NOT
use
|
Any
element
where
the
placeholder
attribute
is
allowed
|
aria-placeholder="..."
|
Use
the
Authors
MAY
use
the
Authors
MUST
NOT
use
the
|
Any
element
where
the
max
attribute
is
allowed:
meter
max
,
progress
max
,
and
input
max
|
aria-valuemax="..."
|
Use
the
Authors
MAY
use
the
Authors
SHOULD
NOT
use
Authors
MUST
NOT
use
|
Any
element
where
the
min
attribute
is
allowed:
meter
min
and
input
min
|
aria-valuemin="..."
|
Use
the
Authors
MAY
use
the
Authors
SHOULD
NOT
use
Authors
MUST
NOT
use
|
Any
element
which
allows
the
readonly
attribute:
input
readonly
,
textarea
readonly
and
form-associated
custom
element
which
allows
readonly
|
aria-readonly="true"
|
Use
the
Authors
MAY
use
the
Authors
SHOULD
NOT
use
the
Authors
MUST
NOT
use
|
Element
with
Note
This
is
equivalent
to
the
|
aria-readonly="false"
|
Authors
MUST
NOT
set
aria-readonly="true"
on
an
element
that
has
isContentEditable="true"
.
|
Any
element
where
the
required
attribute
is
allowed:
input
required
,
textarea
required
,
and
select
required
|
aria-required="true"
|
Use
the
Authors
MAY
use
the
Authors
SHOULD
NOT
use
the
Authors
MUST
NOT
use
|
Any
element
where
the
colspan
attribute
is
allowed:
td
and
th
|
aria-colspan="..."
|
Use
the
Authors
SHOULD
NOT
use
the
Authors
MUST
NOT
use
|
Any
element
where
the
rowspan
attribute
is
allowed:
td
and
th
|
aria-rowspan="..."
|
Use
the
Authors
SHOULD
NOT
use
the
Authors
MUST
NOT
use
|
The ARIA Specification's Deprecated Requirements section indicates that if an ARIA feature is marked as deprecated then authors are advised not to use said feature for new content.
The following roles and attributes are deprecated features of ARIA and DPub ARIA. Conformance checkers MUST warn authors about the deprecated status of these features. Whenever possible, authors are advised to use alternatives to deprecated features.
The
directory
role
is
marked
for
deprecation
in
WAI-ARIA
1.2
.
In
reality,
the
directory
role
had
no
functional
difference
to
an
element
with
an
implicit
or
explicit
list
role.
Authors
are
advised
to
use
one
of
HTML's
native
list
elements,
or
an
ARIA
list
instead.
The
doc-biblioentry
and
doc-endnote
roles
are
marked
for
deprecation
in
Digital
Publishing
WAI-ARIA
Module
1.1
,
as
they
are
not
valid
children
for
an
element
with
an
implicit
or
explicit
role
of
list
.
Authors
can
use
standard
list
and
child
li
elements
without
the
need
for
these
roles.
The
aria-dropeffect
and
aria-grabbed
attributes
were
deprecated
in
WAI-ARIA
1.1
.
There
is
presently
no
feature
in
ARIA
to
replace
their
proposed
functionality.
Authors
SHOULD
use
ASCII
lowercase
for
all
role
token
values
and
any
state
or
property
attributes
(
aria-*
)
whose
values
are
defined
as
tokens
.
While
modern
browsers
treat
the
role
or
aria-*
attribute
values
as
ASCII
case-insensitive
,
not
all
assistive
technologies
will
correctly
parse
these
values.
To
reduce
interoperability
issues,
authors
are
strongly
encouraged
to
use
ASCII
lowercase
for
aria-*
and
role
attribute
values.
Further,
authors
are
encouraged
to
rigorously
test
with
different
browser
and
assistive
technology
combinations
to
ensure
that
their
content
will
be
correctly
exposed
to
their
users.
This section is non-normative.
The
following
table
maps
(and
extends)
the
Kinds
of
content
and
allowed
descendant
information
(defined
in
the
[
HTML
]
specification)
to
elements
that
have
an
equivalent
role
.
Column
1
links
to
the
normative
Accessible
Rich
Internet
Applications
(WAI-ARIA)
1.2
definitions
for
each
ARIA
role
.
Column
2
identifies
the
Kinds
of
content
categories
each
role
has
when
it
is
used
on
an
HTML
element.
Column
3
indicates
what
kinds
of
HTML
elements
can
be
descendants
of
an
element
with
an
explicit
role
specified,
often
matching
the
HTML
element
with
the
same
implicit
role.
For
example,
a
button
element
has
an
implicit
role=button
.
In
HTML
a
button
element
allows
phrasing
content
as
descendants,
and
does
not
allow
interactive
content
or
descendants
with
a
tabindex
attribute.
Therefore,
any
elements
specified
with
a
role=button
would
follow
the
same
descendant
restrictions,
and
not
allow
any
interactive
content
descendants,
elements
with
a
tabindex
specified,
or
any
elements
with
role
values
that
are
in
the
interactive
content
category
(identified
in
column
3).
<!-- conformance checkers will report an error -->
<button>
<div role="button">...</div>
</button>
<div role="button">
<button>...</button>
</div>
<div role="link">
<textarea>...</textarea>
</
div
>
Additionally, there are certain roles which Accessible Rich Internet Applications (WAI-ARIA) 1.2 has specified specific requirements for their allowed descendants. These have been identified in column 3 (Descendant allowances) by indicating to "Refer to the 'Required Owned Elements'" for those particular roles.
Role | Kind of content | Descendant allowances |
---|---|---|
alert
|
Flow content | Flow content but with no main element descendants. |
alertdialog
|
Flow content | Flow content |
application
|
Flow content | Flow content |
article
|
Flow content but with no main element descendants. | |
banner
|
Flow content but with no main , header , or footer element descendants. | |
blockquote
|
Flow content but with no main element descendants. | |
button
|
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
|
caption
|
N/A | Flow content but with no main or table element descendants. |
cell
|
N/A | Flow content but with no main element descendants. |
checkbox
|
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
|
code
|
Phrasing content | |
columnheader
|
N/A | Flow content but with no main , header , or footer element descendants. |
combobox
|
Flow content but with no main element descendants. | |
complementary
|
Flow content but with no main element descendants. | |
contentinfo
|
Flow content but with no main , header , or footer element descendants. | |
definition
|
Phrasing content | |
deletion
|
Phrasing content | |
dialog
|
Flow content | Flow content |
directory
|
Flow content | Flow content but with no main element descendants. |
document
|
Flow content | Flow content |
emphasis
|
Phrasing content | |
feed
|
Flow content | Flow content but with no main element descendants. |
figure
|
Flow content but with no main element descendants. | |
form
|
Flow
content
,
but
with
no
form
element
descendants.
|
|
generic
|
Flow content | |
grid
|
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
grid
role.
|
|
gridcell
|
Interactive content | Flow content but with no main element descendants. |
group
|
Flow content | |
heading
|
Phrasing content | |
img
|
Phrasing content , but with no interactive content descendants. | |
insertion
|
Phrasing content | |
link
|
Flow
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
|
list
|
Flow content |
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
list
role.
|
listbox
|
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
listbox
role.
|
|
listitem
|
N/A | Flow content but with no main element descendants. |
log
|
Flow content | Flow content , but with no main element descendants. |
main
|
Flow content | Flow content , but with no main element descendants. |
marquee
|
Flow content | Flow content , but with no main element descendants. |
math
|
Flow content | Flow content |
menu
|
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
menu
role.
|
|
menubar
|
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
menubar
role.
|
|
menuitem
|
Interactive content |
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
menuitemcheckbox
|
Interactive content |
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
menuitemradio
|
Interactive content |
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
meter
|
Phrasing content , but with no meter element descendants. | |
navigation
|
Flow content , but with no main element descendants. | |
none
|
N/A | Transparent |
note
|
Flow content | Flow content , but with no main element descendants. |
option
|
Interactive content |
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
paragraph
|
Phrasing content | |
presentation
|
N/A | Transparent |
progressbar
|
Phrasing content , but with no progress element descendants. | |
radio
|
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
|
radiogroup
|
Flow content | |
region
|
Flow content , but with no main element descendants. | |
row
|
N/A |
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
row
role.
|
rowgroup
|
N/A |
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
rowgroup
role.
|
rowheader
|
N/A | Flow content but with no main element descendants. |
scrollbar
|
Interactive content | Phrasing content |
search
|
Flow content but with no main element descendants. | |
searchbox
|
Flow content but with no main element descendants. | |
separator
|
Interactive content (if focusable) | Phrasing content |
slider
|
Phrasing content | |
spinbutton
|
Flow content but with no main element descendants. | |
status
|
Flow content | Flow content but with no main element descendants. |
strong
|
Phrasing content | |
subscript
|
Phrasing content | |
superscript
|
Phrasing content | |
switch
|
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
|
tab
|
Interactive content |
Phrasing
content
,
but
with
no
interactive
content
descendants,
and
no
descendants
with
a
tabindex
attribute
specified.
|
table
|
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
table
role.
|
|
tablist
|
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
tablist
role.
|
|
tabpanel
|
Flow content | Flow content |
term
|
Phrasing content | Phrasing content |
textbox
|
Interactive content | Flow content but with no main element descendants. |
time
|
Phrasing content | |
timer
|
Flow content | Flow content but with no main element descendants. |
toolbar
|
Flow content | Flow content but with no main element descendants. |
tooltip
|
Flow content | Phrasing content |
tree
|
Flow content |
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
tree
role.
|
treegrid
|
Flow content |
Refer
to
the
"Required
Owned
Elements"
as
defined
for
the
ARIA
treegrid
role.
|
treeitem
|
Interactive content | Phrasing content |
As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.
The key words MAY , MUST , MUST NOT , NOT RECOMMENDED , SHOULD , and SHOULD NOT in this document are to be interpreted as described in BCP 14 [ RFC2119 ] [ RFC8174 ] when, and only when, they appear in all capitals, as shown here.
Conformance
checkers
that
claim
support
for
checking
ARIA
in
HTML
documents
MUST
implement
checks
for
the
conformance
requirements
for
use
of
the
ARIA
role
and
aria-*
attributes
on
HTML
elements
as
defined
in
this
specification.
A
conforming
document
MUST
NOT
contain
any
elements
with
author
defined
role
or
aria-*
attributes
with
values
other
than
those
which,
per
this
specification,
authors
MAY
use
on
each
HTML
element
in
4.
Document
conformance
requirements
for
use
of
ARIA
attributes
in
HTML
.
Conformance
checkers
SHOULD
flag
instances
where
authors
are
explicitly
providing
an
element
with
a
role
which
matches
its
implicit
ARIA
semantics
as
failures,
as
it
is
NOT
RECOMMENDED
for
authors
to
explicitly
set
these
roles.
A conformance checker MAY define their own terminology, and level or levels of severity, when surfacing document failures to conform to this specification.
This section is non-normative.
This specification does not define the features of [ wai-aria-1.2 ], [ dpub-aria-1.0 ] or [ HTML ]. Rather it provides rules and guidance for conformance checkers that claim support for checking ARIA in HTML, as well as providing guidance to authors.
Therefore, there are no known privacy or security impacts of this specification, as it defines no new features to introduce potential concern.
Referenced in:
Referenced in:
Referenced in:
Referenced in: