Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

A: Elemente müssen ihren sichtbaren Text auch als Teil des zugänglichen Namens (accessible name) haben (WCAG 2.5.3)

label-content-name-mismatch

Stellt sicher, dass Elemente, die durch ihren Inhalt beschrieben sind, auch ihren sichtbaren Text als Teil des zugänglichen Namens (accessible name) haben.

Das bedeutet

Interaktive Elemente wie Links, Schaltflächen oder Steuerelemente zeigen einen sichtbaren Text, aber der zugängliche Name (z. B. aus aria-label, aria-labelledby oder dem Button Inhalt) enthält diesen Text nicht. Sprachsteuerung und Screenreader können das Element dann nicht zuverlässig über den sichtbaren Wortlaut ansprechen.

Auswirkung

Nutzerinnen und Nutzer mit Screenreader oder Sprachsteuerung verlieren Orientierung. Befehle wie „Klicke Mehr erfahren“ funktionieren nicht, wenn der Name z. B. „Details anzeigen“ lautet. Das erhöht Fehlbedienungen und verstößt gegen WCAG.

Empfehlung

  • Der zugängliche Name muss den sichtbaren Text enthalten (idealerweise am Anfang).

  • Kein abweichendes aria-label setzen, wenn der sichtbare Text schon passt – lieber Textinhalt nutzen.

  • Zusätzlichen Kontext anhängen, nicht ersetzen (z. B. „Jetzt kaufen – Größe M“).

  • Für zusammengesetzte Beschriftungen aria-labelledby verwenden und sicherstellen, dass der sichtbare Wortlaut enthalten ist.

Beispiel

Problematisch

<!-- Sichtbar: "Mehr erfahren", zugänglicher Name: "Details anzeigen" (ohne "Mehr erfahren") -->
<a href="/guide" aria-label="Details anzeigen">Mehr erfahren</a>
 
<!-- Sichtbar: "Senden", zugänglicher Name: "Abschicken" (abweichend) -->
<button aria-label="Abschicken">Senden</button>

Besser

<!-- Sichtbarer Text ist Teil des Namens -->
<a href="/guide">Mehr erfahren</a>
 
<!-- Zusätzlicher Kontext angehängt, sichtbarer Text enthalten -->
<button aria-label="Senden – Nachricht verschicken">Senden</button>
 
<!-- Zusammengesetzt mit aria-labelledby; sichtbarer Wortlaut enthalten -->
<h2 id="buy-h">Jetzt kaufen</h2>
<button aria-labelledby="buy-h">Jetzt kaufen</button>

Verknüpfte WCAG-Kriterien:
WCAG 2.5.3 - Beschriftung (Label) im Namen