Semantik
Der zugängliche Name muss den sichtbaren Text enthalten
- Regel:
label-content-name-mismatch - Schweregrad: Schwerwiegend
- WCAG-Stufe A
Warum das wichtig ist
Wer Sprachsteuerung nutzt, sagt, was zu sehen ist: „Klick Bestellung abschicken“. Steht in aria-label stattdessen „Absenden“, findet der Befehl nichts — das Element ist per Sprache gar nicht bedienbar.
So beheben Sie es
- Der zugängliche Name muss den sichtbaren Text wortwörtlich enthalten, am besten am Anfang.
- Ergänzen Sie Details hinter dem sichtbaren Text, statt ihn zu ersetzen („Bestellung jetzt abschicken“).
- Für zusätzlichen Kontext eignet sich aria-describedby besser, damit der sichtbare Text der Name bleibt.
Im Markup
<button aria-label="Submit">Place order</button><button aria-label="Place order now">Place order</button>Die Anforderung dahinter
Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:
- 2.5.3 Beschriftung im Namen (öffnet in neuem Tab) — WCAG-Stufe A
Weiterführende Quellen
Deque University zu label-content-name-mismatch (öffnet in neuem Tab)
Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.
Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.