Elemente müssen ihren sichtbaren Text auch als Teil des zugänglichen Namens (accessible name) haben. — die Prüfung „label-content-name-mismatch“

Das Kriterium dahinter

2.5.3 Beschriftung im Namen

Der zugängliche Name eines Bedienelements muss die Wörter enthalten, die darauf stehen.

Stufe A · EN 301 549 § 9.2.5.3

Warum es diese Prüfung gibt

Wer per Sprache steuert, sagt, was er sieht. Steht auf dem Button „Senden“, heißt er zugänglich aber „Formular absenden“, passiert bei „klicke Senden“ nichts.

Was sie üblicherweise auslöst

fällt durchEin Button mit der Aufschrift „Suchen“ und `aria-label="Absenden"`.
fällt durchEin `aria-label`, das den sichtbaren Text ersetzt, statt ihn zu erweitern.

So beheben Sie es

tunBeginnen Sie den zugänglichen Namen mit dem sichtbaren Text: `aria-label="Produkte suchen"` auf einem Button mit der Aufschrift „Suchen“.
tunNoch besser: eine sichtbare Beschriftung gar nicht erst überschreiben.

Wie es gemeldet wird

A11ySignal meldet das mit der Schwere schwerwiegend. Jedes fehlerhafte Element kommt mit seinem CSS-Selektor und dem Markup, das durchgefallen ist — Sie kommen also direkt zur Zeile, statt sie zu suchen. Deque veröffentlicht die Details auf Engine-Ebene:

https://dequeuniversity.com/rules/axe/4.13/label-content-name-mismatch ↗