ARIA-Label

Symbolknöpfe ohne Namen?

Das ist der häufigste Befund bei Zugänglichkeitsprüfungen — und einer der am schnellsten behobenen. Wir gehen die Stellen durch, an denen es tatsächlich klemmt.

Ein ARIA-Label ist eine Auszeichnung im HTML, die einem Element einen zugänglichen Namen gibt, den Screenreader vorlesen können — dort, wo sichtbarer Text fehlt oder nicht ausreicht. Es gehört zum Standard WAI-ARIA, mit dem sich Rolle, Zustand und Eigenschaften von Bedienelementen beschreiben lassen. Die wichtigste Regel dabei: Kein ARIA ist besser als falsches ARIA.

Kurz zusammengefasst:

• Gibt Elementen einen vorlesbaren Namen, wenn sichtbarer Text fehlt.
• aria-label ersetzt den Inhalt, aria-labelledby verweist auf vorhandenen Text.
• Semantisches HTML zuerst — ein <button> braucht kein ARIA.
• Falsches ARIA macht die Bedienung schlechter als gar keines.
• Nicht auf beliebigen Elementen wirksam.

Wozu es gebraucht wird

Ein Screenreader liest vor, was ein Element ist und wie es heißt. Bei einem beschrifteten Knopf ergibt sich beides aus dem HTML. Problematisch wird es, wenn die Beschriftung rein visuell funktioniert:

• ein Knopf, der nur ein Symbol enthält — Lupe, Hamburger-Menü, Schließkreuz
• mehrere gleichlautende Links („Mehr erfahren“) in einer Liste von Karten
• ein Suchfeld, dessen Beschriftung nur als Platzhaltertext existiert
• Navigationsbereiche, die sich sonst nicht unterscheiden lassen

In diesen Fällen liefert ein ARIA-Label den fehlenden Namen: nicht „Knopf“, sondern „Suche öffnen“.

Die Regeln, die zählen

1. Semantisches HTML zuerst. Ein echter <button>, ein echter <a href>, ein echtes <label> bringen Rolle, Bedienbarkeit und Fokusverhalten mit. Ein <div> mit ARIA-Rolle muss all das nachbauen — und tut es selten vollständig.
2. Sichtbarer Text schlägt unsichtbaren. Wenn eine Beschriftung ohnehin dasteht, sollte aria-labelledby darauf verweisen, statt den Text zu duplizieren.
3. Nicht widersprechen. Steht „Absenden“ auf dem Knopf und im Label „Weiter“, hören und sehen zwei Menschen Unterschiedliches. Besonders betroffen: Menschen, die per Sprachsteuerung „Klicke Absenden“ sagen — und nichts passiert.
4. Nur wo es wirkt. Auf einem reinen <div> oder <span> ohne Rolle wird aria-label von vielen Hilfsmitteln ignoriert.
5. Testen. Die Wirkung lässt sich nur mit einem Screenreader beurteilen, nicht im Quelltext.

Die häufigsten Fehler

Der zweite Punkt ist der folgenreichste. Ein <div> mit Klick-Verhalten wirkt für Sehende wie ein Knopf, ist aber per Tastatur nicht erreichbar, reagiert nicht auf Leertaste und Eingabetaste und erscheint in keiner Elementliste. Eine ARIA-Rolle darauf beschreibt nur — sie repariert nichts.

Wo es sich wirklich lohnt

Statt flächendeckend zu arbeiten, lohnt der Blick auf die wenigen Stellen, an denen fast jede Website dasselbe Problem hat:

• Symbolknöpfe in Kopfzeile und Navigation — Menü, Suche, Schließen, Warenkorb
• Gleichlautende Links in Karten- und Listenansichten
• Formularfelder, die nur einen Platzhalter haben
• Mehrere Navigationsbereiche auf einer Seite — Haupt-, Fuß-, Brotkrumennavigation
• Sprunglinks zum Hauptinhalt

Diese fünf Punkte abzuarbeiten bringt für die tatsächliche Bedienbarkeit mehr als jede großflächige ARIA-Kampagne.

Häufige Fragen

Wann brauche ich ein ARIA-Label?

Wenn ein bedienbares Element keinen sichtbaren Text hat — etwa ein Knopf mit reinem Symbol — oder wenn mehrere gleich benannte Elemente unterschieden werden müssen.

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

aria-label enthält den Text direkt und ersetzt vorhandenen Inhalt. aria-labelledby verweist auf bereits sichtbaren Text auf der Seite. Wo möglich ist die zweite Variante besser, weil Sehende und Hörende dasselbe bekommen.

Kann falsches ARIA schaden?

Ja, deutlich. Widersprüchliche oder überflüssige Auszeichnungen erzeugen falsche Ansagen und können die Bedienung unmöglich machen. Die Faustregel lautet: kein ARIA ist besser als falsches ARIA.

Reicht ein Platzhaltertext als Beschriftung?

Nein. Er verschwindet beim Tippen, ist oft zu kontrastarm und wird nicht von allen Hilfsmitteln als Beschriftung erkannt. Ein echtes <label> ist die richtige Lösung.

Brauchen dekorative Bilder ein ARIA-Label?

Nein. Rein dekorative Grafiken sollten für Hilfsmittel ausgeblendet werden — bei Bildern über ein leeres Alt-Attribut. Ein Label würde nur eine überflüssige Ansage erzeugen.

Wie teste ich, ob es funktioniert?

Mit einem Screenreader und reiner Tastaturbedienung. Die Browser-Entwicklerwerkzeuge zeigen den ermittelten zugänglichen Namen an — das ist ein guter Zwischenschritt, ersetzt den Praxistest aber nicht.