Label im Namen

Was gefordert wird

Wenn eine Schaltfläche auf dem Bildschirm „Bewerbung einreichen“ lautet, sollte eine Person mit Sprachsteuerung „Klick Bewerbung einreichen“ sagen und den Klick auslösen können. Das funktioniert nur, wenn das sichtbare Label im zugänglichen Namen enthalten ist — idealerweise als erste Wörter. Lautet der zugängliche Name „Formular absenden“, während der sichtbare Text „Bewerbung einreichen“ zeigt, schlägt der Sprachbefehl stillschweigend fehl.

WCAG verlangt, dass das sichtbare Textlabel Teil des zugänglichen Namens ist. Der zugängliche Name darf mehr enthalten (erklärender Kontext), aber der sichtbare Text muss darin vorkommen — in derselben Wortfolge.

So wird die Anforderung erfüllt

• Bei Schaltflächen und Links mit Text ist keine besondere Maßnahme erforderlich — der Textinhalt wird automatisch zum zugänglichen Namen.
• Wenn einem Steuerelement mit sichtbarem Text ein aria-label hinzugefügt wird, muss der sichtbare Text am Anfang stehen: <button aria-label="Bewerbung einreichen — öffnet Bestätigung">Bewerbung einreichen</button>.
• Bei Symbol- und Textschaltflächen übernimmt der Text die Namensgebung. Ein nur auf das Symbol bezogenes aria-label darf ihn nicht überschreiben.
• Bei Links, deren Text „Mehr lesen“ lautet, wird der zugängliche Name mit aria-label="Mehr lesen über WCAG 2.2 — vollständiger Artikel" ergänzt, sodass „Mehr lesen“ weiterhin das Präfix bleibt.
• Ist das sichtbare Label eines Steuerelements ein Bild (Symbol mit Textüberlagerung, Logo), muss das alt-Attribut exakt mit dem sichtbaren Text übereinstimmen.

Häufige Fehler

• Eine Schaltfläche mit der Aufschrift „Suche“ und aria-label="Finden". Nutzende sagen „Klick Suche“ — nichts passiert.
• Schaltflächen „In den Warenkorb“ mit aria-label="Blaues T-Shirt Größe M in den Warenkorb legen" — der ausführliche Name macht „In den Warenkorb“ nicht mehr zum Präfix. Der Sprachbefehl „Klick In den Warenkorb“ trifft nicht.
• Symbol-und-Text-Schaltflächen, bei denen jemand aria-label="Warenkorb-Symbol" gesetzt und so den sichtbaren Text „Kasse“ verdeckt hat.
• Lokalisierte Websites, bei denen der sichtbare Text übersetzt wurde, das aria-label aber noch in englischer Sprache vorliegt.
• Schwebende Aktionsschaltflächen, die sichtbar „Chat“ zeigen, aber aria-label="Support-Widget öffnen" tragen.

Warum es wichtig ist

Dies ist das Erfolgskriterium, das Barrierefreiheit für Nutzende mit Sprachsteuerung gewährleistet — Menschen, die Dragon NaturallySpeaking, Voice Control unter iOS / macOS, Voice Access unter Android oder die Windows-Spracherkennung verwenden. Für diese Personen ist das sichtbare Label der Befehl. Eine Abweichung ist keine geringfügige Unannehmlichkeit; sie entscheidet darüber, ob ein Steuerelement bedienbar ist oder nicht. Das Kriterium hilft auch Screenreader-Nutzenden, dem Ablauf zu folgen, wenn eine sehende Hilfsperson sagt „Klick die Speichern-Schaltfläche“ — die Ansage entspricht den Wörtern auf dem Bildschirm. 2.5.3 ist einfach zu beheben und leicht zu übersehen, da automatisierte Werkzeuge es selten erkennen: Entwickelnde sehen im Quellcode ein aria-label und gehen davon aus, das sei korrekt. Der zugängliche Name muss stets gegen den sichtbaren Text geprüft werden.