WCAG 2.5.3 Beschriftung (Label) im Namen

Das Erfolgskriterium 2.5.3 sorgt dafür, dass Sprachsteuerung funktioniert. Menschen, die weder Maus noch Tastatur nutzen können, bedienen eine Website oft, indem sie den Text aussprechen, den sie sehen — „klicke auf In den Warenkorb“. Das klappt nur, wenn der zugängliche Name des Bedienelements (so kennt es die Software) die sichtbaren Wörter enthält. Außerdem sprechen Screenreader-Nutzer und sehende Kollegen so über dasselbe. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.2.5.3). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Bei Bedienelementen mit Beschriftungen, die Text oder Bilder eines Textes enthalten, enthält der Name den visuell dargestellten Text.

• Die „Beschriftung“ (Label) ist der sichtbare Text, der das Bedienelement kennzeichnet — der Button-Text, der Linktext oder der Text neben einem Formularfeld.
• Der „Name“ ist der zugängliche Name, der assistiven Technologien bereitgestellt wird; er kann aus dem Textinhalt, einem <label>, aria-label oder aria-labelledby stammen.
• Best Practice des W3C: Stellen Sie den sichtbaren Beschriftungstext an den Anfang des Namens. Zusätzliche Wörter danach sind in Ordnung.

Bedienelemente ohne sichtbaren Text (ein reiner Icon-Button) fallen nicht unter dieses Kriterium, brauchen nach 4.1.2 aber trotzdem einen Namen.

Typische Fehler in Onlineshops

• ein Button mit der Aufschrift „Kaufen“ und aria-label="Artikel erwerben";
• ein Button „Suchen“, dessen aria-label „Anfrage absenden“ lautet;
• ein Feld mit der sichtbaren Beschriftung „Postleitzahl“, dessen aria-label „PLZ“ sagt;
• ein Link „Jetzt shoppen“ mit aria-label="Zur Sommerkollektion";
• übersetzte Shops, in denen der sichtbare Text übersetzt ist, das fest codierte aria-label aber auf Englisch bleibt.

So prüfen Sie es

Automatisch: Unser Checker vergleicht den sichtbaren Text von Bedienelementen mit ihren zugänglichen Namen und markiert Namen, die den sichtbaren Text nicht enthalten (label-content-name-mismatch-Regel). Die Regel ist in axe-core als experimentell gekennzeichnet und kann nicht jeden Fall abdecken (zum Beispiel Text in Bildern oder Icons mit Symbolen) — prüfen Sie ihre Befunde also nach und machen Sie manuelle Stichproben.

Manuell: Untersuchen Sie Buttons, Links und Felder im Barrierefreiheits-Panel des Browsers und vergleichen Sie den „Namen“ mit dem, was Sie sehen. Oder nutzen Sie Sprachsteuerung (Sprachsteuerung unter macOS und iOS, Voice Access unter Android) und sagen Sie „klicke auf“, gefolgt vom sichtbaren Text wichtiger Bedienelemente.

So beheben Sie es

• Bevorzugen Sie sichtbaren Text als Namen; ergänzen Sie aria-label nur, wenn es etwas hinzufügt.
• Wenn Sie aria-label verwenden, beginnen Sie es mit genau dem sichtbaren Text: aria-label="In den Warenkorb – Leinenhemd".
• Verbinden Sie Formularfelder über <label for> mit ihrer sichtbaren Beschriftung statt über ein separates aria-label.
• Übersetzen Sie aria-label-Werte zusammen mit dem sichtbaren Text.

Verwandte Kriterien

• 2.4.6 Überschriften und Beschriftungen (Labels) — Beschriftungen müssen den Zweck beschreiben.
• 2.4.4 Linkzweck (im Kontext) — der Linktext muss sagen, wohin er führt.
• 2.1.4 Zeichentastenbefehle — ein weiteres Kriterium für Nutzer von Spracheingabe.

Häufige Fragen

Was verlangt WCAG 2.5.3 Beschriftung (Label) im Namen?

Bei Bedienelementen, deren Beschriftung Text oder Bilder eines Textes enthält, muss der zugängliche Name den Text enthalten, der auf dem Bildschirm angezeigt wird. Das W3C empfiehlt, diesen Text an den Anfang des Namens zu stellen.

Ist aria-label ein Problem für 2.5.3?

Nur wenn es den sichtbaren Text durch andere Wörter ersetzt. Ein Button mit der Aufschrift „Kaufen“ und aria-label="Diesen Artikel erwerben" ist ein Verstoß; aria-label="Kaufen – Leinenhemd" enthält den sichtbaren Text und ist in Ordnung.

Wem hilft die Beschriftung im Namen?

Vor allem Menschen, die Spracherkennung nutzen: Sie sagen „klicke auf In den Warenkorb“, und das funktioniert nur, wenn der zugängliche Name diese Wörter enthält. Auch Screenreader-Nutzer hören einen Namen, der zu dem passt, was Sehende sehen.