4.1.2 ARIA Attribute

Dieses Thema wird laufend ergänzt.

Letzte Änderung:

4. Juni 2024

ARIA (Accessible Rich Internet Applications)

An dieser Stelle ist es wichtig, sich die erste Regel von ARIA zu merken.

Verwende keine ARIA-Elemente, wenn es native semantische HTML-Elemente gibt.

Ein HTML-Button ist besser als andere Elemente wie span oder div mit einem ARIA-konformen Button, der zudem alle Funktionalitäten des Buttons benötigt. Das Rad muss nicht neu erfunden werden. Native HTML-Elemente sind barrierefrei und kostenlos mit allen Funktionalitäten verfügbar.

ARIA Attribute (Name, Rolle, Wert)

Im Wesentlichen ermöglicht ARIA Entwicklern, zusätzliche Informationen und Funktionen zu ihren Webseiten und Webanwendungen hinzuzufügen.

ARIA kann beispielsweise dabei helfen, Screenreader-Software zu sagen, was sich auf einer Webseite befindet und wie sie interagiert werden kann. Dadurch können blinde oder sehbehinderte Menschen den Inhalt der Webseite besser wahrnehmen und mit ihr interagieren.

Wenn es ein HTML-Element oder -Attribut mit der erforderlichen Semantik oder dem benötigten Verhalten gibt, sollte HTML und nicht ARIA genutzt werden. Die Semantik von HTML sollte durch ARIA nicht verändert werden.

Es fehlen jedoch einige Steuerelemente, die in heutigen interaktiven Websites oftmals benötigt werden und deren Funktionalität meist über die von Standard-HTML hinausgeht. Beispiele sind Tabs, Akkordeons, Mega-Dropdowns, Tooltips usw.

aria-label

«aria-label» ist ein Attribut in HTML, das dazu dient, eine barrierefreie Alternative zum visuellen Textbereich bereitzustellen. Es wird verwendet, um einem Element, wie zum Beispiel einem Button, Links, Videos, Formularsteuerelemente, Landmark-Rollen oder Widget, eine sprachliche Beschreibung zuzuweisen.

Das Attribut «aria-label» ermöglicht es Entwicklern, einen kurzen Text anzugeben, die den Zweck oder die Funktion des Elements beschreibt. Diese Beschreibung wird von assistiven Technologien, wie Screenreadern, verwendet, um Personen mit Sehbehinderungen den Inhalt der Webseite zu vermitteln.

Wenn beispielsweise ein Button keine visuelle Beschriftung hat, kann das «aria-label»-Attribut verwendet werden, um den Button für Screenreader-Nutzer zu kennzeichnen. Der darin enthaltene Text wird dann vorgelesen, um den Zweck des Buttons zu erklären.

aria-hidden

Im Prinzip ähnelt das aria-hidden-Attribut der CSS-Eigenschaft display: none; mit dem Unterschied, dass das aria-hidden-Attribut keinen Einfluss auf die visuelle Darstellung hat, d.h. Inhalte mit aria-hidden="true" sind für Screenreader unsichtbar.

Wenn ein Element das Attribut «aria-hidden» mit dem Wert «true» erhält, signalisiert es assistiven Technologien wie Screenreadern, dass der Inhalt dieses Elements ignoriert werden sollte. Das bedeutet, dass der Inhalt nicht vorgelesen oder anderweitig von der assistiven Technologie verarbeitet wird.

Das Attribut «aria-hidden» wird normalerweise verwendet, wenn bestimmte Informationen oder Elemente visuell dargestellt werden, aber für Nutzer mit Behinderungen keinen Mehrwert haben oder sie verwirren könnten. Ein typisches Beispiel ist das Verbergen von dekorativen Grafiken oder visuellen Effekten, die keine wichtige Bedeutung für den Inhalt haben.

aria-labelledby

Dies ermöglicht assistiven Technologien, wie Screenreadern, den Inhalt der Komponente mit der entsprechenden Beschriftung vorzulesen. Es verbessert die Zugänglichkeit, indem es Menschen mit Sehbehinderungen ermöglicht, den Kontext und die Bedeutung der Komponente besser zu verstehen.

Durch die Verwendung von «aria-labelledby» wird die Barrierefreiheit erhöht, da die Informationen in einer klaren und strukturierten Weise präsentiert werden, sodass Screenreader-Nutzer den Inhalt der Abschnitte besser verstehen können.

Konkrete Beispiele

Eine Schaltfläche mit dem Text «Mehr lesen». Du fügst ein unsichtbares Textelement hinzu und gibst ihm den Text «Weitere Informationen anzeigen». Diesem Textelement gibst du die ID «beschreibung-mehr-lesen». Dann fügst du das Attribut «aria-labelledby» zur Schaltfläche hinzu und weist ihm den Wert «beschreibung-mehr-lesen» zu. Wenn nun der Screenreader die Schaltfläche erreicht, wird er den Text «Weitere Informationen anzeigen» vorlesen, um den Zweck der Schaltfläche zu erklären.

Bei einem Akkordion würde der Screenreader die erste Überschrift, also «Abschnitt 1», vorlesen und dem Benutzer mitteilen, dass weitere Informationen in diesem Abschnitt enthalten sind. Der Benutzer kann dann entscheiden, ob er den Abschnitt öffnen möchte, um den Inhalt anzuzeigen.

aria-expanded

Ist ein Attribut, das den aktuellen Zustand eines erweiterbaren Elements kennzeichnet. Es wird verwendet, um anzuzeigen, ob ein Element geöffnet oder geschlossen ist.

Das Attribut «aria-expanded» hat zwei mögliche Werte:

• Wenn «aria-expanded» den Wert "true" hat, bedeutet dies, dass das Element geöffnet ist und sein Inhalt sichtbar ist.
• Wenn «aria-expanded» den Wert "false" hat, bedeutet dies, dass das Element geschlossen ist und sein Inhalt nicht sichtbar ist.

Das «aria-expanded»-Attribut wird in Verbindung mit anderen Elementen wie Akkordeons, Dropdown-Menüs oder Tabs verwendet, um den Zustand des erweiterbaren Elements zu kennzeichnen.

Ein einfaches Beispiel ist ein Akkordeon-Menü. Jeder Abschnitt des Menüs kann geöffnet oder geschlossen werden. Wenn ein Abschnitt geöffnet ist und sein Inhalt sichtbar ist, wird das «aria-expanded»-Attribut auf "true" gesetzt. Wenn ein Abschnitt geschlossen ist und sein Inhalt nicht sichtbar ist, wird das «aria-expande»-Attribut auf "false" gesetzt.

Durch die Verwendung von «aria-expanded» können Benutzer mit assistiver Technologie, wie z.B. Screenreadern, den Zustand eines erweiterbaren Elements erkennen und die Navigation und Interaktion damit erleichtern. Es trägt zur Barrierefreiheit bei, indem es den Benutzern klare Informationen über den Zustand des Elements vermittelt.

aria-describedby

Ist ein ARIA-Attribut, das verwendet wird, um dem Benutzer zusätzliche Beschreibungen oder Erklärungen für ein Element bereitzustellen. Es ermöglicht Entwicklern, den Bezug zu einem oder mehreren beschreibenden Texten herzustellen, die dem Element zugeordnet sind.

Es wird oft verwendet, wenn ein Element komplexere oder detailliertere Informationen enthält, die für Benutzer wichtig sind. Es kann beispielsweise bei Formularelementen verwendet werden, um zusätzliche Anweisungen oder Fehlermeldungen zu vermitteln.