Barrierefreiheit

Sichtbarer Text und zugänglicher Name stimmen nicht überein

Üblicher Schweregrad: mittel · Aufwand: minimal

Woran du es erkennst

Ein Button oder Link zeigt sichtbar einen anderen Text, als er per aria-label zugewiesen bekommt (axe-Regel label-content-name-mismatch) — z. B. sichtbar „Mehr erfahren", aria-label „Produktkatalog 2024 als PDF herunterladen".

Warum es zählt

Sprachsteuerungs-Nutzer sprechen den sichtbaren Text („Klick Mehr erfahren") — stimmt der zugängliche Name nicht damit überein, reagiert das Element nicht und die Bedienung scheitert ohne erkennbaren Grund.

So behebst du es

  1. Stelle sicher, dass der zugängliche Name mit dem sichtbaren Text beginnt — der sichtbare Text muss im aria-label vollständig enthalten sein.
  2. Entferne überflüssige aria-labels auf Elementen, deren sichtbarer Text bereits eindeutig ist; ergänze Zusatzinfo lieber per aria-describedby.
  3. Bei Icon-Buttons mit Tooltip-Text: Setze das aria-label exakt auf den Tooltip-Text, damit Sprachsteuerung und Screenreader dasselbe sagen.

Zum Nachlesen