1. Was ist ARIA?

Die Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) ist eine Initiative vom World Wide Web Consortium (W3C) zur Verbesserung von Webseiten und Webanwendungen für Menschen mit Behinderungen. Insbesondere blinde Menschen, die auf Vorleseprogramme angewiesen sind, können von der technischen Spezifikation ARIA profitieren.

ARIA definiert dabei einen Satz von Attributen, die vorwiegend für HTML entwickelt wurden, die aber mit beliebigem Markup-Content verwendet werden können. Wenn ARIA-Attribute einem Markup-Element hinzugefügt werden, können diese Informationen von assistiven Technologien erkannt und herausgelesen werden.

Die meisten Browser und Screenreader unterstützen ARIA, wobei die Umsetzungen teilweise voneinander abweichen. Da bei älteren Browsern die Unterstützung für ARIA oft nicht vollständig oder auch gar nicht vorhanden ist, sollte ein „sicheres“ ARIA verwendet werden. Alternativ sollten die Benutzer:innen zur Nutzung von neuen Browserversionen aufgefordert werden.

2. Was ist ARIA nicht?

ARIA bietet keine Funktionalität, sondern reichert Elemente mit Informationen an. Wenn eine Komponente auf einer Webseite mit ARIA semantisch angereichert wurde, dann muss sie mit JavaScript bedienbar gemacht und mit CSS gestaltet werden.

3. Wann wird ARIA verwendet?

Wichtig: Die Nutzung von ARIA ist nicht immer notwendig und zweckmäßig. Insbesondere folgende Punkte sind beim Einsatz zu bedenken:

1. Grundsätzlich sollten, wenn vorhanden, HTML-Elemente mit passender Semantik statt ARIA verwendet werden (Beispiel: Um auf einer Webseite einen Absatz darzustellen, sollte <p> verwendet werden und nicht <div role="paragraph">).
2. ARIA sollte nicht zu HTML-Markup hinzugefügt werden, wenn dieses schon die gewünschte Semantik impliziert (Beispiel: <button role="button">; Ausnahme: Landmark Roles).
3. ARIA sollte nicht verwendet werden, um die HTML-Semantik umzudeuten (Beispiel: <button role="link">). Nutzen Sie diese Semantik nur, wenn es wirklich notwendig ist.

ARIA ist in erster Linie für benutzerdefinierte Widgets und andere Komponenten gedacht, die nicht die erforderlichen Zugänglichkeitsinformationen enthalten.

Mögliche Verwendungsfelder von ARIA:

• Wenn die native HTML-Semantik nicht ausreicht, um ein Element zu identifizieren und seinen Status, seine Funktion oder seine Informationen zu übermitteln, muss das entsprechende ARIA-Markup verwendet werden, um die semantischen Informationen an assistive Technologien wie Screenreader zu übermitteln.
• Um in vorhandenen Webseiten, Probleme der Barrierefreiheit zu korrigieren.
• Um Design-lastige Oberflächen umzusetzen (beispielsweise, wenn Markenrichtlinien ein bestimmtes Design mit Wiedererkennungswert vorschreiben). Diese können teilweise nicht mit entsprechender HTML-Syntax umgesetzt werden.

Hinweis: Im öffentlichen Bereich gilt jedoch: Zugänglichkeit geht vor Design im Sinne von Aussehen.

4. Wie wird ARIA verwendet?

Sollten Sie mit der Verwendung von ARIA nicht vertraut sein, können Ihnen folgende Anleitungen einen ersten Einblick in die Verwendung geben. Sie definieren und erläutern die wichtigsten Regeln bei der Verwendung mit ARIA sowie die Verwendung der unterschiedlichen ARIA Rollen, Eigenschaften und Zustände aus Sicht des W3C.

• Using ARIA
• ARIA Authoring Practices Guide
• Techniken zur Verwendung von ARIA

ARIA bietet drei Möglichkeiten, Semantik zu kommunizieren:

• Rollen
• Eigenschaften
• Zustände

Rollen

Landmark Roles

Landmark Roles sind Attribute für ganze Seitenbereiche, die überwiegend die Navigation für Screenreader erleichtern.
Um eine maximale Browserkompatibilität zu erreichen, empfiehlt die W3C im entsprechenden Tutorial derzeit die Kombination der nativen HTML5 Auszeichnungen mit den entsprechenden ARIA-Landmark Roles.

<header role="banner">…</header>

<main role="main">…</main>

<nav role="navigation">…</nav>

<footer role="contentinfo">…</footer>

Diese „doppelte Auszeichnung“ wird nur für die Landmark Rollen empfohlen.

Landmark Role	Beschreibung
banner	Ein Bereich, der überwiegend seitenübergreifende Inhalte enthält und sich auf den einzelnen Seiten des Webauftritts wiederholt.
main	Hauptinhalt einer Seite. Innerhalb einer Seite sollte es nur einen Main-Bereich geben.
complementary	Ein ergänzender Bereich auf einer Webseite mit unterstützenden Informationen. Beispiele sind Seitenbereiche, die weiterführende Links beinhalten.
contentinfo	Meta-Informationen zum Webauftritt. In diesem Seitenbereich befinden sich typischerweise Links oder Angaben zu Impressum, Copyright oder Datenschutz.
navigation	Navigationselemente einer Webseite.
form	Bereiche mit Formularelementen.
search	Bereich mit Suchfunktionalität.
application	Kennzeichnet einen Bereich als Web-Anwendung. Dies bringt allerdings Konsequenzen mit sich, die in diesem Webblog genauer beschrieben wurden.

Sonstige Rollen

Außerhalb der Rollen für Seitenbereiche gibt es auch weitere Rollen, die hauptsächlich zur Korrektur bereits existierender Webseiten eingesetzt werden. Native HTML5 Auszeichnungen sind vorrangig zu verwenden.

Rolle	Beschreibung
alert	Teilt dem Benutzer mit, dass ein Element dynamisch aktualisiert wurde.
button	Wird für Tasten und andere anklickbare Elemente verwendet, mit deren Aktivierung der Benutzer eine Reaktion auslöst.
cell	Informiert darüber, dass es sich bei dem Element um eine Zelle in einer Tabelle handelt.
checkbox	Kennzeichnet ein Element als Kontrollkästchen.
comment	Kennzeichnet ein Element als Kommentar / Reaktion zum Inhalt.
dialog	Kennzeichnet ein Anwendungsdialogfeld oder -fenster, das Inhalt oder Benutzeroberfläche vom Rest der Webanwendung oder der Seite trennt.
document	Weist Hilfstechnologien an, in den Lesemodus zu wechseln.
feed	Kennzeichnet einen Artikel, mit dynamischen Scrollbalken, so dass Inhalt, der durch Scrollen geladen wird, ohne Unterbrechung gelesen werden kann.
figure	Kennzeichnet ein Element als Bild.
grid	Kennzeichnet eine oder mehrere Zellenzeilen als Raster. Die Position jeder Zelle ist signifikant und kann durch Tastatureingaben fokussiert werden.
gridcell	Kennzeichnet eine Zelle im Raster.
heading	Kennzeichnet ein Element als Überschrift.
img	Kennzeichnet mehrere Elemente als ein Bild.
list	Kennzeichnet eine Liste von Elementen.
listbox	Kennzeichnet eine Liste, aus denen Benutzerinnen und Benutzer ein oder mehrere Elemente auswählen können.
listitem	Kennzeichnet ein Element innerhalb einer Liste.
row	Kennzeichnet eine Reihe von Zellen innerhalb einer Tabellenstruktur.
rowgroup	Kennzeichnet eine Gruppe von Zeilen innerhalb einer Tabellenstruktur.
table	Kennzeichnet eine Tabelle.
testbox	Kennzeichnet ein Element, bei dem die Eingabe von Freitext möglich ist.
timer	Kennzeichnet ein Element als numerischen Zähler, der die verstrichene Zeit von einem Startpunkt oder die verbleibende Zeit bis zu einem Endpunkt angibt.

Eigenschaften

Eigenschaften können Elemente näher beschreiben oder Beziehungen zu anderen Elementen herstellen. Im Gegensatz zu Zuständen, ist der Wert der Eigenschaft konstant.

Name

Der zugängliche Name identifiziert und bezeichnet ein Element. Er unterscheidet das Element von anderen Elementen auf der Seite und ermöglicht, direkt damit zu interagieren. Eine detaillierte Beschreibung der Verwendung der folgenden ARIA-Elemente finden Sie unter Formularelemente korrekt auszeichnen.

Zustand	Beschreibung
aria-descibedby	Identifiziert das mit aria-labelledby bezeichnete Objekt näher.
aria-label	Bezeichnet das aktuelle Element ohne sichtbare Beschriftung.
aria-labelledby	Bezeichnet das aktuelle Element mit sichtbarer Beschriftung.

Kennzeichnung

Eigenschaft	Beschreibung
aria-required	Kennzeichnet Pflichtfelder in Formularen.
aria-multiline	Gibt an, ob ein Textfeld eine mehrzeilige Eingabe erlaubt.
aria-multiselectable	Gibt an, ob eine Mehrfachauswahl möglich ist.
aria-orientation	Gibt an, ob ein Element horizontal oder vertikal ausgerichtet ist.
aria-sort	Informiert darüber, ob eine Spalte auf- oder absteigend sortiert ist. Wichtig: aria-sort führt selbst keine Sortierung durch.
aria-readonly	Kennzeichnet ein Formularelement als nicht editierbar. Dass das Formularelement tatsächlich nicht editierbar ist, muss mit anderen Webtechnologien gewährleistet werden.

Wert

Attribut	Beschreibung
aria-valuemin	Gibt den Minimalwert wieder.
aria-valuemax	Gibt den Maximalwert wieder.
aria-valuenow	Gibt den aktuellen Wert wieder.
aria-setsize	Gibt die Gesamtzahl der Elemente in der Liste oder im Baum an.
aria-posinset	Gibt die Position eines Elements in der Liste oder im Baum an.
aria-valuetext	Gibt ergänzend zum aria-valuenow einen beschreibenden Text für den aktuellen Wert wieder.

Zustände

Einige Elemente können unterschiedliche Zustände annehmen (z. B. Kontrollkästchen oder Schalter). Werden native HTML-Elemente verwendet, wird der jeweilige Zustand automatisch weitergegeben. Wurden die Rollen der Elemente mit ARIA codiert, muss auch der Zustand des Elements entsprechend der Nutzereingabe gesetzt werden.

Zustand	Beschreibung
aria-hidden	Zustand, der angibt, dass das Element und dessen Kindelemente nicht sicht- und erkennbar sind.
aria-autocomplete	Zeigt an, ob bei Benutzereingaben Vorschläge zur Auto-Vervollständigung angeboten werden.
aria-busy	Zeigt an, ob ein Element oder seine Kindelemente gerade durch ein Update aktualisiert werden.
aria-checked	Zeigt den aktuellen Zustand von Checkboxen, Radio Buttons und anderen Eingabeelementen an.
aria-activedescendant	Zeigt das aktuelle Kindelement eines composite widget an.
aria-atomic	Zeigt an, ob assistive Technologien vorhanden sind. Geänderte Regionen werden durch das aria-relevant-Attribut gekennzeichnet.
aria-controls	Identifiziert ein Element, dessen Inhalt durch das aktuelle Element kontrolliert wird.
aria-current	Identifiziert das Element mit dem jeweils aktuellen Wert. Mögliche Werte sind: - page - step - location - date - time
aria-invalid	Zustand, der angibt, dass der eingegebene Wert nicht dem erwarteten Format entspricht.
aria-disbaled	Zustand, der angibt, dass das Element sichtbar, aber inaktiv ist. Es kann damit nicht bearbeitet oder bedient werden.
aria-selected	Zustand, der angibt, ob ein Element ausgewählt wurde. Wird üblicherweise für Elemente einer Auswahlgruppe verwendet. Beispielsweise Option, Listbox oder in einer Tabelle.
aria-pressed	Zustand eines Toggle-Schalters.
aria-grabbed	Zeigt in einer Drag & Drop-Operation den "grabbed"-Zustand an, also dass sich das entsprechende Element im Zugriff befindet.
aria-relevant	Filter für die Referenzierung UD Live-Regionen (dynamische Seiteninhalte).
aria-haspopup	Zeigt, dass das Element ein Popup Kontext Menü oder ein Sub-Level Menü besitzt.
aria-level	Info über das Niveau eines Elements. Mit aria-level kann etwa die Überschriftenebene eines Elements festgelegt werden, das mittels role = „heading“ als Überschrift gekennzeichnet wurde.

Stand: 09.01.2024