Was genau bedeutet ARIA?

ARIA ist eine Abkürzung und steht für Accessible Rich Internet Applications, also frei übersetzt: umfangreiche barrierefreie Internetanwendungen. Da es sich hierbei aber um eine offizielle Spezifikation des W3C handelt, wird immer die englische Bezeichnung verwendet.

Was macht ARIA?

ARIA ist eine Sammlung von definierten Attributen, die vorwiegend für den Einsatz in HTML-Quellcode entwickelt worden sind, um diesen Quellcode mit zusätzlichen Informationen auszustatten, die wiederum von assistiven Technologien erkannt und interpretiert werden können.

ARIA ist in erster Linie für individuell erstellte Widgets und andere Komponenten gedacht, die nicht die erforderlichen Zugänglichkeitsinformationen enthalten, damit die Bedienung insgesamt auch mit assistiven Technologien ermöglicht wird. Mit ARIA-Attributen können zusätzliche Informationen, Zustände und Relationen abgebildet werden, die notwendig sind, um den jeweiligen Kontext verständlich zu machen.

Wann und wie sollte man ARIA verwenden?

Es gilt: „Keine ARIA-Attribute sind besser als schlechte ARIA-Attribute.“ Oft lassen sich Inhalte auch ohne ARIA-Attribute halbwegs bedienen; schlechte ARIA-Attribute würden dann oft die halbwegs vorhandenen Möglichkeiten verschlechtern.

ARIA-Attribute dienen der Informationsanreicherung und sollten nicht in der Art eingesetzt werden, dass falsch verwendete HTML-Elemente korrigiert werden.

Bevor man also ARIA-Attribute verwendet, sollte man immer prüfen:

Gibt es bereits ein semantisch korrektes HTML-Element, das genau für den Einsatz vorgesehen ist:
Anstelle von: <div role="navigation"> das korrekte HTML-Element verwenden: <nav>
Anstelle von: <div role="paragraph"> das korrekte HTML-Element verwenden: <p>

ARIA sollte keine Redundanzen bei Elementen erzeugen, deren Semantik aufgrund des HTML-Tags eindeutig ist.
Anstelle von: <button role="button"> lieber: <button>

ARIA sollte nicht verwendet werden, um die Semantik eines HTML-Tags umzudeuten.
Das bitte nicht: <button role="link">
(Ergänzung: Der Grund dafür ist, dass native HTML-Elemente bereits von sich aus barrierefrei sind, während ARIA-Unterstützung von Browsern und Assistenztechnologien nicht immer zuverlässig ist.)

Was kann ARIA?

ARIA-Attribute können Zustände, Eigenschaften und Rollen ausweisen! Hier sind ein paar typische Anwendungsfälle der unterschiedlichen Attribute anhand von Beispielen:

Zustände von Elementen

Elemente können unterschiedliche Zustände oder Status annehmen, wie z. B. Sichtbarkeit oder auch „aktiv ausgewählt“. Diese sind aber oft – ohne ARIA-Attribute – nur rein visuell wahrnehmbar. Hier schaffen ARIA-Attribute einen echten Mehrwert, z. B.:

• Welches Toggle-Element innerhalb eines Akkordeons derzeit ausgeklappt und somit sichtbar ist.

• Ob ein Modalfenster geöffnet worden ist und dort ein Zwischendialog stattfindet.

• Welches Element z. B. durch einen Button gesteuert wird (an welcher Stelle ändern sich ggf. Informationen, wenn ich diesen Button klicke).

Eigenschaften, Spezifizierung und Beziehungen von ARIA

ARIA-Beispiel für Eingabefelder:

<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" aria-describedby="emailInfo">
<div id="emailInfo">Bitte geben Sie eine gültige E-Mail-Adresse ein (z. B. name@example.com).</div>

Was passiert hier:

Das input-Feld in der zweiten Zeile (id=“email“) enthält das Attribut aria-describedby=“emailInfo“ und verweist somit auf ein anderes Element. Das entsprechende DIV HTML-Element mit der ID „emailInfo“ enthält eine Beschreibung. Ein Screenreader erkennt nun diese Relation und liest zusätzlich zur Standardbeschriftung die Beschreibung aus dem verknüpften DIV vor.

Warum ist das wichtig:

Der Beschreibungstext kann ohne diese Relation nur im rein visuellen Kontext durch den User zugeordnet werden.

ARIA-Beispiel für Suchbuttons:

<input name="suchbegriff" type="text" aria-labelledby="suchbutton"/>
<input name="suchbutton" id="suchbutton" type="submit" value="Suchen"/>

Was passiert hier:

Das Textfeld erhält hier durch den bereits zugänglichen Text des Suchbuttons ein Label. Wichtig ist dabei, dass der Text, der als Label verwendet wird, im Quelltext erst nach dem Button steht, dennoch kann er zur Beschriftung des Textfeldes herangezogen werden. Ein Screenreader liest in diesem Fall „Suche, Bearbeitungsfeld“ vor.

Warum ist das wichtig:

Sofern Informationen bereits zugänglich auf einer Seite vorhanden sind, sollte man diese nutzen, um redundante Informationen zu vermeiden.

Beispiel für Elemente:

Oft werden Elemente ohne sichtbaren Text verwendet, typisches Beispiel ist eine Lupe zum Aufrufen der Suchfunktion. Ohne das Attribute aria-label wäre dieser Button komplett ohne inhaltliche Information und somit nicht wirklich wahrnehmbar: <button aria-label="Suche starten" />

Was passiert hier:

Screenreader können den Inhalt verwendent und vorlesen

Warum ist das wichtig:

Damit auch Elemente ohne sichtbaren Inhalt eine zugänglich Information beinhalten

Die Verwendung von Rollen

Das Verwenden von Rollen muss wohlüberlegt erfolgen, da es eben oft semantisch korrekte HTML-Elemente gibt, die verwendet werden können. Eine abweichende Empfehlung bezieht sich jedoch auf die Verwendung von Landmarks, diese können, neben der eigenen implizierten Rolle, zusätzlich mit einer Rolle ausgestattet werden.

Es kann aber auch sein, dass z. B. systembedingt nicht die richtigen HTML Elemente verwendet werden können, oder Anpassungen unverhältnismäßig wären. In dem Fall kann die Verwendung des Attributes role eine Lösung sein.

Beispiel:

<div role="listbox" aria-labelledby="listLabel">
<div role="option" aria-selected="true">Option 1</div>
<div role="option">Option 2</div>
<div role="option">Option 3</div>
</div>

Was passiert hier:

Das Attribut role="listbox" kennzeichnet das Element als eine Sammlung auswählbarer Optionen.
role="option" definiert die einzelnen Auswahlmöglichkeiten innerhalb dieser Liste.
aria-selected="true" gibt an, welche Option aktuell ausgewählt ist.

Warum ist das wichtig:

Diese Attribute machen die Funktion und den Zustand des Elements für assistive Technologien verständlich – Informationen, die sonst ausschließlich visuell wahrnehmbar wären.

---

Semantisch korrektes HTML ist besser

ARIA-Attribute machen Informationen zugänglich, ermöglichen die Herstellung von Beziehungen zwischen Elementen, helfen dabei, Redundanzen zu vermeiden und verbessern die Bedienbarkeit interaktiver Komponenten.

Mit ARIA-Attributen wird die digitale Welt ein Stück barrierefreier. Am schönsten ist es jedoch, wenn dieses Ziel mit möglichst wenig zusätzlichem Aufwand erreicht werden kann, indem bereits vorhandene semantisch korrekte HTML-Strukturen genutzt werden.