aria-label Beispiele: Wann du es nutzt und 20 Fixes

ARIA-Label-Beispiele

aria-label Beispiele: 20 Vorher-Nachher-Fixes | We.Inc

Wann du aria-label, aria-labelledby, aria-describedby oder einfach sichtbaren Text verwendest, mit 20 Vorher-Nachher-Snippets, typischen Fehlern und einem Prüftool für barrierefreie Namen.

Verwende aria-label nur, wenn ein Element keinen sichtbaren Text hat, der es benennt, etwa bei einem reinen Icon-Button: <button aria-label="Close dialog">. Benennt sichtbarer Text das Element bereits, verlass dich darauf oder verweise mit aria-labelledby darauf. aria-describedby ergänzt zusätzliche Hilfe, die nach dem Namen vorgelesen wird. Native HTML-Labels haben immer Vorrang.

Welches Werkzeug du zum Benennen nimmst

Situation
Verwenden

Sichtbarer Text im Element
Nichts weiter, der Text ist der Name

Formularfeld mit sichtbarer Beschriftung
<label for>

Name steht bereits an anderer Stelle auf dem Bildschirm
aria-labelledby="id"

Überhaupt kein sichtbarer Text (nur Icon)
aria-label="..."

Zusätzlicher Hinweis oder Fehler nach dem Namen
aria-describedby="id"

Jeder Button, jeder Link, jedes Feld und jede Landmark braucht einen barrierefreien Namen, also die kurze Bezeichnung, die assistive Technologie vorliest, sobald der Fokus dort landet. Diese Seite zeigt, wie dieser Name ermittelt wird, zwanzig fehlerhafte Muster neben ihren reparierten Versionen und ein Prüftool, das ein eingefügtes Snippet liest und meldet, welchen Namen es erhalten würde.

Lies die Entscheidungstabelle, um zwischen sichtbarem Text, einem label-Element, aria-labelledby und aria-label zu wählen.
Suche dein Muster unter den zwanzig Vorher-Nachher-Snippets und kopiere die reparierte Version.
Füge dein eigenes Markup in das Namens-Prüftool ein, um einen vereinfachten barrierefreien Namen für das erste interaktive Element zu sehen.
Bestätige das Ergebnis mit einem echten Screenreader anhand der Test-Checkliste ganz unten.

Beginne das Label mit den Wörtern, die man sieht. Nutzer von Sprachsteuerung sagen, was auf dem Bildschirm steht, daher muss ein Button mit der Aufschrift Search einen Namen haben, der mit Search beginnt.
Halte Namen kurz und lass das Rollenwort weg. Ein Button namens Close button wird mit doppelter Rolle angesagt.
aria-label wird auf einfachen div- und span-Elementen ohne Rolle ignoriert, setze es also auf ein echtes Bedienelement oder eine Landmark.
Übersetzungstools überspringen oft Attributwerte, daher übersteht sichtbarer Text, auf den aria-labelledby verweist, eine Seitenübersetzung besser als aria-label.

Häufige Fragen

Was ist der Unterschied zwischen aria-label und aria-labelledby?

aria-label enthält den Namen als Zeichenkette direkt im Attribut. aria-labelledby verweist auf eine oder mehrere Element-ids und setzt den Namen aus deren Text zusammen, sodass der Name immer dem entspricht, was sehende Nutzer sehen. Sind beide vorhanden, gewinnt aria-labelledby.

Ersetzt aria-label den sichtbaren Text eines Buttons?

Ja. Bei den meisten Bedienelementen überschreibt der Wert von aria-label den Textinhalt, ein Button mit der Aufschrift Buy und aria-label="Add to basket" wird also als Add to basket angesagt. Diese Abweichung verwirrt Nutzer von Sprachsteuerung und verstößt gegen WCAG 2.5.3 Label in Name.

Wann sollte ich aria-describedby verwenden?

Verwende es für ergänzende Informationen, die nicht der Name sind: eine Passwortregel, einen Formathinweis oder eine Fehlermeldung. Screenreader lesen die Beschreibung meist nach Name und Rolle vor, oft nach einer kurzen Pause, und manche Nutzer schalten Beschreibungen ab.

Kann ich aria-label auf ein div setzen?

Nur wenn das div eine Rolle hat, die eine Benennung erlaubt, etwa role="region" oder role="dialog". Auf einem generischen div oder span verbietet ARIA die Benennung, und die meisten Screenreader ignorieren das Attribut.

Brauchen Bilder aria-label?

Nein. Bilder beziehen ihren Namen aus dem alt-Attribut. Verwende alt="" für Dekoration, damit das Bild übersprungen wird. aria-label auf einem img funktioniert zwar, bringt aber nichts, was alt nicht auch kann.

Die erste Regel von ARIA

Die W3C-Hinweise zur Verwendung von ARIA beginnen mit einer Regel: Wenn ein natives HTML-Element bereits die Bedeutung und das Verhalten hat, das du brauchst, verwende es, statt ARIA an etwas anderes anzuhängen. Ein echter Button mit echtem Text braucht überhaupt kein ARIA.
ARIA ändert nur, was der assistiven Technologie mitgeteilt wird. Es fügt keine Tastaturunterstützung, keinen Fokus und keine Klickbehandlung hinzu, ein div mit role="button" braucht also weiterhin tabindex und Tasten-Handler, die ein button dir kostenlos mitliefert.

Wie Browser den Namen ermitteln

Die Spezifikation Accessible Name and Description Computation legt eine Reihenfolge fest. Zuerst kommt aria-labelledby, dann aria-label, dann die native Quelle wie ein label-Element, alt-Text oder der Text in einem Button oder Link, und als letzte Notlösung das title-Attribut.
Weil die erste gefundene Quelle gewinnt, kann ein verirrtes aria-label ein völlig korrektes sichtbares Label unbemerkt verdecken. Klingt ein Name falsch, prüfe zuerst die Attribute mit höherer Priorität, bevor du den Text bearbeitest.

Namen, Beschreibungen und Ansagen

Ein Screenreader liest typischerweise zuerst den Namen, dann die Rolle, dann einen Zustand wie gedrückt oder erweitert und dann die Beschreibung. Genaue Formulierung und Reihenfolge unterscheiden sich je nach Produkt, Version und Ausführlichkeitseinstellung, die Ansagen auf dieser Seite sind daher Näherungen.

aria-label, aria-labelledby, aria-describedby oder sichtbarer Text

Geh diese Liste von oben nach unten durch und hör bei der ersten passenden Option auf. Sichtbarer Text steht an erster Stelle, weil er sehende Nutzer, Screenreader-Nutzer und Nutzer von Sprachsteuerung mit einer einzigen Zeichenkette bedient.

Die vier Wege, einem Element seinen Namen oder seine Beschreibung zu geben

Option
Was es bewirkt
Verwende es, wenn
Achte auf

Sichtbarer Text oder ein <label>
Nativer Name aus dem Inhalt oder dem label-Element
Fast immer, für Buttons, Links und Felder
Ein Placeholder ist kein Label

Setzt den Namen über ids aus anderen Elementen zusammen
Eine Überschrift oder Beschriftung auf dem Bildschirm benennt das Element bereits
Referenzierte ids müssen existieren und eindeutig sein

Setzt den Namen als Zeichenkette und überschreibt den Inhalt
Es gibt keinen sichtbaren Text, wie bei Icon-Buttons
Wird auf generischem div und span ignoriert; oft nicht übersetzt

Fügt eine Beschreibung hinzu, die nach dem Namen gelesen wird
Hinweise, Formatregeln, Fehlermeldungen
Kein Name; wird eventuell übersprungen, wenn Nutzer Beschreibungen abschalten

20 Vorher-Nachher-Snippets

Jedes Snippet zeigt das fehlerhafte Muster, die Reparatur und ungefähr das, was ein Screenreader nach der Reparatur sagt. Die Ansagen unterscheiden sich je nach Produkt und Einstellungen.

Close-Button nur mit Icon

Ohne Namen wird der Button meist nur als Schalter angesagt. Verstecke die Grafik, damit sie nicht als unbeschriftetes Bild vorgelesen wird. Nach dem Fix lautet die Ansage typischerweise: Close, Schalter.

Icon-Link zu einem Social-Media-Profil

Ein leerer Link wird oft als seine URL vorgelesen, bei manchen Setups Buchstabe für Buchstabe. Nach dem Fix lautet die Ansage typischerweise: Our shop on Instagram, Link.

Icon plus versteckter Text statt aria-label

Echter Text in einem visuell versteckten span übersteht Übersetzungstools, die Attributwerte gern überspringen. Nach dem Fix lautet die Ansage typischerweise: Cart, 3 items, Link.

Zwei Navigations-Landmarks

Bei zwei unbenannten nav-Elementen zeigt die Landmark-Liste zweimal Navigation, und niemand kann sie unterscheiden. Nach dem Fix lautet die Ansage typischerweise: Main, Navigation.

Suchfeld nur mit Placeholder

Placeholder-Text ist ein schwacher Ersatzname und verschwindet, sobald jemand tippt. Nach dem Fix lautet die Ansage typischerweise: Search products, Suchfeld.

Formularfeld mit sichtbarem Label

Ein echtes label-Element macht auch die Beschriftung klickbar und vergrößert so die Zielfläche. Nach dem Fix lautet die Ansage typischerweise: Email, Eingabefeld.

Hinweis und Fehler mit aria-describedby

Beschreibungen werden in der Reihenfolge der aufgeführten ids zusammengesetzt. Nach dem Fix lautet die Ansage typischerweise: Password, geschütztes Eingabefeld, ungültige Eingabe, At least 12 characters, Too short....

Gruppe von Radiobuttons

Die legend benennt die Gruppe, sodass jede Option für sich verständlich ist. Nach dem Fix lautet die Ansage typischerweise: Delivery speed, Gruppe, Standard, Auswahlschalter, 1 von 2.

Modaler Dialog, benannt durch seine Überschrift

Der Verweis auf die sichtbare Überschrift hält gesprochenen und angezeigten Titel identisch. Öffne ihn mit showModal() für ein echtes Modal. Nach dem Fix lautet die Ansage typischerweise: Delete project?, Dialog, This removes all 14 pages..

Umschalt-Button mit aria-pressed

Lass den Namen gleich und nur den Zustand wechseln. Tausche das Label nicht zusätzlich gegen Unbold aus. Nach dem Fix lautet die Ansage typischerweise: Bold, Umschalter, gedrückt.

Icon-Umschalter: Stummschalten

Label und gedrückten Zustand gleichzeitig zu ändern, klingt wie eine doppelte Verneinung. Nach dem Fix lautet die Ansage typischerweise: Mute, Umschalter, nicht gedrückt.

Menü-Button mit aria-expanded

Das Skript muss aria-expanded und das hidden-Attribut gemeinsam umschalten. Nach dem Fix lautet die Ansage typischerweise: Products, Schalter, reduziert.

Hamburger-Menü-Button

Ein klickbares div ist weder fokussierbar noch wird es überhaupt als Bedienelement angesagt. Nach dem Fix lautet die Ansage typischerweise: Menu, Schalter, reduziert.

Informative und dekorative Bilder

Schreib, was das Bild dem Leser mitteilt. Ein leeres alt kennzeichnet Dekoration, damit sie übersprungen wird. Nach dem Fix lautet die Ansage typischerweise: Sales rose from 40 to 65 orders a week in May, Grafik.

Eigenständiges informatives SVG

role=img macht das SVG zu einem einzigen Objekt statt zu einem Baum aus Formen. Nach dem Fix lautet die Ansage typischerweise: Northgate Bakery, Grafik.

Datentabelle mit caption

Eine sichtbare caption benennt die Tabelle für alle. Verwende aria-labelledby nur, wenn der Titel außerhalb der Tabelle steht. Nach dem Fix lautet die Ansage typischerweise: Opening hours, Tabelle, 2 Spalten, 8 Zeilen.

Statusmeldung in einer Live-Region

Die Region muss existieren, bevor sich ihr Text ändert, sonst verpassen viele Screenreader die Aktualisierung. Nach dem Fix lautet die Ansage typischerweise: Saved (gesprochen, ohne den Fokus zu verschieben).

Benannte Region für ein Karussell

aria-roledescription ändert die gesprochene Rolle. Setze es sparsam ein und nie auf generischen Elementen. Nach dem Fix lautet die Ansage typischerweise: Customer photos, Karussell.

Wiederholte Read-more-Links

Eindeutiger Linktext hilft allen, die eine Liste von Links überfliegen. Wenn er mit den sichtbaren Wörtern beginnt, bleibt Label in Name erfüllt. Nach dem Fix lautet die Ansage typischerweise: Read more about winter opening hours, Link.

Label, das nicht zum sichtbaren Text passt

Wer per Sprachsteuerung click Send sagt, muss genau diesen Button treffen, daher gehört das sichtbare Wort in den Namen. Nach dem Fix lautet die Ansage typischerweise: Send, Schalter.

Typische Fehler

Fehler aus Audits und ihre Lösungen

Fehler
Warum es schadet
Lösung

aria-label auf einem div oder span ohne Rolle
Verboten, daher sagen die meisten Screenreader nichts
Verwende einen Button, Link oder eine Landmark oder vergib eine passende Rolle

aria-label, das von den sichtbaren Wörtern abweicht
Sprachbefehle treffen es nicht
Beginne den Namen mit dem sichtbaren Text

Rollenwort im Namen, wie bei Search button
Die Rolle wird zweimal gesprochen
Nenn es Search

aria-hidden="true" auf einem fokussierbaren Element
Der Fokus landet auf etwas Stummem
Entferne es oder mach das Element ebenfalls nicht fokussierbar

aria-labelledby verweist auf eine fehlende id
Der Name fällt auf eine andere Quelle zurück oder bleibt leer
Prüfe die ids nach jeder Template-Änderung

Gleiches Label auf jedem Delete-Button in einer Liste
Nutzer können nicht erkennen, welche Zeile betroffen ist
Delete invoice 1042 oder aria-labelledby mit dem Zeilentitel

title als einziger Name
Unzuverlässig für Touch- und Tastaturnutzer
Sichtbarer Text oder aria-label

Test-Checkliste

Namen vor dem Livegang prüfen

Prüfung
So geht's

Jedes Bedienelement hat einen Namen
Der Bereich Barrierefreiheit in den Entwicklertools des Browsers zeigt den berechneten Namen

Namen passen zum Angezeigten
Lies das sichtbare Label und vergleiche es mit dem berechneten Namen

Landmarks sind unterscheidbar
Öffne die Landmark-Liste im Rotor oder in der Elementliste eines Screenreaders

Zustände aktualisieren sich
Schalte ein Menü oder einen Button um und hör auf erweitert oder gedrückt

Live-Meldungen sind hörbar
Löse ein Speichern oder einen Fehler aus, ohne den Fokus zu verschieben

Durchgang mit echtem Screenreader
NVDA oder JAWS mit Firefox oder Chrome unter Windows, VoiceOver mit Safari auf Mac und iPhone, TalkBack auf Android

Prüftool für barrierefreie Namen (vereinfacht)

Füge ein Snippet ein. Das Prüftool analysiert es in deinem Browser, ohne Skripte auszuführen, findet das erste interaktive oder benannte Element und ermittelt einen Namen anhand einer gekürzten Version der offiziellen Reihenfolge. Es überspringt mehrere Schritte der Spezifikation, betrachte das Ergebnis also als schnellen Hinweis und bestätige es in den Entwicklertools oder mit einem Screenreader.

Icon-Button

Reparierter Icon-Button

Beschriftetes Feld

Abweichendes Label

Dialog mit labelledby

HTML-Snippet

Kein Button, Link, Feld, keine Landmark, kein Bild und keine Tabelle im Snippet gefunden.

Element

Berechneter Name

(leer)

Herkunft des Namens

Warnungen

Bei dieser vereinfachten Prüfung nichts gefunden.

label-Element

Textinhalt

svg-title

title (schwacher Ersatz)

placeholder (schwacher Ersatz)

aria-labelledby verweist auf die fehlende id "{id}".

aria-label auf einem div oder span ohne Rolle wird von den meisten Screenreadern ignoriert.

Das Bild hat kein alt-Attribut.

Der Placeholder ist der einzige Name. Füge ein Label hinzu.

Kein barrierefreier Name gefunden.

Der sichtbare Text "{visible}" steht nicht am Anfang des Namens (WCAG 2.5.3 Label in Name).

aria-label Beispiele: Wann du es nutzt und 20 Fixes