Elementy muszą mieć swój widoczny tekst jako część ich dostępnej nazwy. — sprawdzenie „label-content-name-mismatch”

Kryterium, które za tym stoi

2.5.3 Etykieta w nazwie

Dostępna nazwa kontrolki musi zawierać słowa, które są na niej widoczne.

Poziom A · EN 301 549 § 9.2.5.3

Po co jest to sprawdzenie

Osoby sterujące głosem mówią to, co widzą. Jeśli na przycisku jest „Wyślij”, a jego dostępna nazwa to „Prześlij formularz”, powiedzenie „kliknij Wyślij” nic nie da.

Co zwykle je wywołuje

błądPrzycisk z napisem „Szukaj” i `aria-label="Prześlij"`.
błąd`aria-label`, które zastępuje widoczny tekst zamiast go rozszerzać.

Jak to naprawić

róbZacznij dostępną nazwę od widocznego tekstu: `aria-label="Szukaj produktów"` na przycisku z napisem „Szukaj”.
róbJeszcze lepiej: w ogóle nie nadpisuj widocznej etykiety.

Jak to jest raportowane

A11ySignal zgłasza to z wagą poważny. Każdy błędny element ma swój selektor CSS i kod, który zawiódł, więc trafisz prosto do właściwej linii, zamiast jej szukać. Deque publikuje szczegóły na poziomie silnika:

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