Aria Attribut einfach erklärt

Kristin RuhsSEO-Expertin

Zuletzt aktualisiert: 17. Dez. 2024

Was sind ARIA-Attribute?

ARIA-Attribute sind HTML-Erweiterungen, die von der Web Accessibility Initiative (WAI) des World Wide Web Consortiums (W3C) speziell dafür entwickelt wurden, die Barrierefreiheit von Websites zu erhöhen. ARIA-Attribute geben zusätzliche Informationen über Elemente auf einer Seite, die für Menschen mit Behinderungen relevant sind. Vor allem für blinde Menschen, die auf Vorleseprogramme zurückgreifen müssen, sind sie hilfreich.

ARIA-Attribute können mit beliebigem Markup-Content verwendet werden, sollten allerdings nur genutzt werden, wenn native HTML-Elemente nicht ausreichen. Fügst Du einem Markup-Element ARIA-Attribute hinzu, können diese Informationen von assistiven Technologien erkannt und herausgelesen werden. Dadurch können auch komplexe Webanwendungen, wie Menüs oder Widgets, besser zugänglich gemacht werden. Mit diesen Attributen können Entwickler beispielsweise beschreiben, welche Funktion ein Button hat oder wie sich ein Widget verhält.

Beispiele für ARIA-Attribute:

• aria-label: Wird verwendet, um einem Element einen beschreibenden Text zuzuweisen, der für Screenreader sichtbar ist, aber nicht auf der Seite angezeigt wird.
• aria-hidden: Signalisiert, dass ein Element von Screenreadern ignoriert werden soll.
• aria-expanded: Gibt an, ob ein Menü oder ein Bereich ausgeklappt (true) oder eingeklappt (false) ist.

Die meisten Browser und Screenreader unterstützen ARIA, allerdings unterscheiden sich die Implementierungen. Ältere Browser bieten oft nur eine eingeschränkte oder gar keine Unterstützung. Daher sollte auf „sicheres“ ARIA geachtet werden. Alternativ ist es sinnvoll, Nutzer:innen zur Verwendung aktueller Browserversionen zu ermutigen.

Was ist ARIA nicht?

Mit ARIA-Attributen kannst Du Elementen semantische Informationen hinzufügen. ARIA bietet jedoch keine eigene Funktionalität. Komponente, die mit ARIA angereichert werden, müssen zusätzlich mit Java Script bedienbar gemacht und mit CSS gestaltet werden.

Warum sind ARIA-Attribute wichtig?

ARIA-Attribute ermöglichen es, dass interaktive und dynamische Webinhalte für alle zugänglich sind, auch für Menschen, die Screenreader oder andere unterstützenden Technologien nutzen. Sie schließen Lücken, die durch standardmäßiges HTML nicht abgedeckt werden, insbesondere bei modernen, komplexen Webanwendungen.

Vorteile von ARIA-Attributen:

• Sie erhöhen die Benutzerfreundlichkeit für Menschen mit Behinderungen.
• Sie reduzieren Barrieren, die durch dynamische Inhalte entstehen.
• Sie helfen Websites, gesetzliche Vorgaben zur Barrierefreiheit (z. B. WCAG oder BITV) zu erfüllen.

Wie funktioniert das aria-label?

Das aria-label ist eines der am häufigsten genutzten ARIA-Attribute. Es dient dazu, einem Element eine Textbeschreibung zu geben, die für Screenreader-Nutzer lesbar ist, aber visuell auf der Website nicht angezeigt wird.

Beispiel:

<button aria-label=“Suche starten“>🔍</button>

In diesem Beispiel sieht der Nutzer lediglich das Symbol „🔍“, aber ein Screenreader liest vor: „Suche starten“. So wird der Button auch für Menschen verständlich, die keine visuellen Inhalte wahrnehmen können.

Typische Anwendungsfälle für aria-label:

• Buttons, deren Funktion nur durch Symbole dargestellt wird.
• Eingabefelder ohne sichtbare Beschriftung. (Oft wird in solchen Fällen allerdings aria-labelledby empfohlen, da es flexibler und leichter zu warten ist.)
• Interaktive Icons, z. B. für Einstellungen oder Navigation.

Was ist mit anderen wichtigen ARIA-Attributen?

Neben aria-label gibt es viele weitere nützliche Attribute. Hier sind einige Beispiele:

• aria-labelledby: Verknüpft ein Element mit einem anderen, das dessen Beschreibung enthält.
  Beispiel: Ein Eingabefeld wird mit einer Überschrift verknüpft.
• aria-live: Markiert dynamische Inhalte, die von Screenreadern automatisch vorgelesen werden sollen.
  Beispiel: Live-Updates in einem Chatfenster.
• aria-expanded: Gibt an, ob ein Element ausgeklappt (true) oder eingeklappt (false) ist.
  Beispiel: Ein Dropdown-Menü, das den aktuellen Zustand anzeigt. Es ist besonders hilfreich, um interaktive Elemente wie Akkordeons oder Menüs für Screenreader zugänglicher zu machen.

Grundregeln für den Einsatz von ARIA-Attributen

ARIA-Attribute sind eine wertvolle Ergänzung, sollten jedoch gezielt und mit Bedacht eingesetzt werden. Falsche oder übermäßige Nutzung kann die Barrierefreiheit beeinträchtigen.

• Bevorzuge semantisches HTML: Verwende nativen HTML-Code wie <button> oder <nav> anstelle von ARIA, da diese Elemente bereits barrierefrei gestaltet sind. Beispiel: Statt <div role=“button“> sollte ein <button> genutzt werden.
• Setze ARIA nur bei Bedarf ein: Ergänze ARIA-Attribute, wenn native HTML-Semantik nicht ausreicht, um Funktionen oder Zustände für assistive Technologien zu beschreiben.
• Vermeide Missbrauch: Nutze ARIA nicht, um die HTML-Semantik umzudeuten (z. B. <button role=“link“>).
• Teste die Umsetzung: Überprüfe die Funktionalität der ARIA-Attribute regelmäßig mit Screenreadern und anderen Tools.

Wann ARIA sinnvoll ist:

• Benutzerdefinierte Widgets: Wenn HTML allein nicht ausreicht, um Zustände oder Funktionen zu beschreiben.
• Barrierefreiheit nachbessern: Um bestehende Barrierefreiheitsprobleme in älteren Projekten zu lösen.
• Designvorgaben umsetzen: Wenn komplexe Designs keine native HTML-Umsetzung erlauben.

Weiterführende Links:

• WCAG einfach erklärt
• Tastaturnavigation für barrierefreie Websites
• Barrierefreie-Informationstechnik-Verordnung (BITV 2.0)