WAI-ARIA/default-Rollen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) ist ein empfohlener Webstandard des W3C. In folgender Tabelle finden Sie die WAI-ARIA-Rollen, die die Elemente fest eingebaut bekommen haben, sodass diese Rollen nicht explizit vergeben werden sollten.

Dadurch wird der Quelltext unübersichtlicher und es können sich auch Fehler einschleichen:

Beispiel: fehlerhafte Auszeichnung
<h1 role="heating"></h1>
Durch den Schreibfehler („heating“ statt „heading“) ist die Überschrift keine mehr.
WAI-ARIA default-Rollen
Element Anwendungsfall WAI-ARIA
a Hyperlink role="link"
Hyperlink als Kind von menu role="menuitem"
ohne href-Attribut keine
abbr keine
address keine
area als Hyperlink role="link"
ohne href-Attribut keine
article role="article"
aside role="complementary"
audio keine
b keine
base keine
bdi keine
bdo keine
blockquote keine
body role="document"
br keine
button role="button"
canvas keine
caption keine
cite keine
code keine
col keine
colgroup keine
command type="checkbox" und Kind eines menu mit type="toolbar" role="menuitemcheckbox" mit dem entsprechenden aria-checked-Status true bzw. false
type="command" und Kind eines menu mit type="toolbar" role="menuitem"
type="radio" und Kind eines menu mit type="toolbar" role="menuitemradio" mit dem entsprechenden aria-checked-Status true bzw. false
data
datalist role="listbox", mit der aria-multiselectable-Eigenschaft auf false gesetzt
dd role="definition"
del keine
details
dfn keine
dialog
div keine
dl keine
dt keine
em keine
embed keine
fieldset keine
figcaption keine
figure keine
nicht Kind des body-Elements keine
Kind des body-Elements role="contentinfo"
form role="form"
h1, h2, h3, h4, h5, h6 role="heading", mit der aria-level-Eigenschaft, die die outline-Tiefe anzeigt
head keine
header nicht Kind des body-Elements keine
Kind des body-Elements role="banner"
hr role="separator"
html keine
i keine
iframe keine
img role="img"
leeres alt-Attribut role="presentation"
input type="button" role="button"
type="button" in einem menu role="menuitem"
type="color"  ?
type="checkbox" role="checkbox" mit dem entsprechenden aria-checked-Status auf mixed, true bzw. false
type="checkbox" in einem menu role="menuitemcheckbox"
type="date" keine
type="datetime" keine
type="email" role="textbox"
type="file" keine
type="hidden" keine
type="image" role="button"
type="image" in einem menu role="menuitem"
type="month" keine
type="number" role="spinbutton"
type="password" role="textbox"
type="radio" role="radio" mit dem entsprechenden aria-checked-Status true bzw. false
type="radio" in einem menu role="menuitemradio"mit dem entsprechenden aria-checked-Status true bzw. false
type="range" role="slider"
type="reset" role="button"
type="search" ohne Vorschläge role="textbox"
type="submit" role="button"
type="tel" ohne Vorschläge role="textbox"
type="text" ohne Vorschläge role="textbox"
type="text", type="search", type="tel", type="url", type="email" mit Vorschlägen role="combobox" mit der aria-owns-Eigenschaft auf den gleichen Wert wie das list-Attribut gesetzt
type="time" keine
type="url" ohne Vorschläge role="textbox"
type="week" keine
ins keine
kbd keine
keygen role="listbox" mit der aria-multiselectable-Eigenschaft auf false gesetzt
label keine
legend keine
li role="listitem", wobei der aria-setsize-Wert der Anzahl der li-Elemente innerhalb des Elternelements entspricht und der aria-posinset-Wert die Position des li-Elements anzeigt.
keine
main role="main"
map keine
mark keine
math role="math"
type="popup" role="menu"
type="toolbar" role="toolbar"
type="checkbox" role="menuitemcheckbox" mit dem entsprechenden aria-checked-Status true bzw. false
type="command" role="menuitem"
type="radio" role="menuitemradio" mit dem entsprechenden aria-checked-Status true bzw. false
meta keine
meter keine
role="navigation"
noscript keine
object keine
ol role="list"
optgroup role="group"
option role="option" mit dem entsprechenden aria-selected-Status true bzw. false
output role="status"
p keine
param keine
picture keine
pre keine
progress role="progressbar" mit entsprechenden Werten für aria-valuemax, aria-valuemin und aria-value
q keine
rp keine
rt keine
ruby keine
s keine
samp keine
script keine
section role="region"
Beachten Sie: Screenreader sollten section-Elemente nur dann ankündigen und eine Navigation zu Verfügung zu stellen, wenn das section-Element einen zugänglichen Namen hat.
select role="listbox"
ohne multiple-Attribut und size nicht größer als 1 role="combobox"
small keine
source keine
span keine
strong keine
style keine
sub keine
summary keine
sup keine
svg keine
table role="table"
tbody role="rowgroup"
td falls die Tabelle kein role-Attribut hat role="cell"
falls die Tabelle die Rolle grid besitzt role="gridcell"
template keine
textarea role="textbox", mit der aria-multiline-Eigenschaft true
tfoot role="rowgroup"
th wenn es weder Spalten- noch Zeilenüberschrift ist und die Tabelle nicht die Rolle grid besitzt role="cell"
wenn es weder Spalten- noch Zeilenüberschrift ist und die Tabelle die Rolle grid besitzt role="gridcell"
wenn es eine Spaltenüberschrift ist role="columnheader"
wenn es eine Zeilenüberschrift ist role="rowheader"
thead role="rowgroup"
time keine
title keine
tr role="row"
track keine
u keine
ul role="list"
var keine
video keine
wbr keine

[Bearbeiten] Quelle

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML