HTML/Attribute/role/default-Rollen

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:

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
footer	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="none 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="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.
link		keine
main		role="main"
map		keine
mark		keine
math		role="math"
menu	type="popup"	role="menu"
	type="toolbar"	role="toolbar"
menuitem	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
nav		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
search		role="search"
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

Quelle

• W3C: HTML Element Role Mappings