Zasada 2: Funkcjonalność 2.5 Metody obsługi

2.5.3 Etykieta w nazwie

WCAG 2.5.3 Label in Name

W skrócie

Dostępna nazwa elementu (odczytywana przez czytnik, używana przy sterowaniu głosem) zawiera tekst, który widać na etykiecie – najlepiej na początku.

Poziom: A Podstawowe minimum – bez tego część osób w ogóle nie skorzysta ze strony.
Czy to obowiązkowe?: Wymagane prawem
Kto w zespole odpowiada: Programowanie
Jak to wykryć: Częściowo automatyczne

Wyjaśnienie prostym językiem: Nazwa dostępna, Sterowanie głosem

Komu i dlaczego to pomaga

Osoba sterująca głosem mówi „kliknij Wyślij”. Jeśli przycisk ma aria-label „Prześlij formularz”, polecenie nie zadziała.

Osoby z niepełnosprawnością ruchową
Osoby niewidome

Jak zrobić to dobrze

Jeśli dodajesz aria-label, zacznij go od widocznego tekstu, np. „Czytaj więcej: Nowe godziny urzędu”.
Najlepiej unikaj aria-label tam, gdzie widoczny tekst wystarcza.

Najczęstsze błędy

aria-label różny od widocznego tekstu przycisku.
Link „Czytaj więcej” z aria-label zawierającym tylko tytuł artykułu.

Przykład w kodzie

Źle

<button aria-label="Prześlij formularz">Wyślij</button>

Dobrze

<button>Wyślij</button>

Jak to sprawdzić

Porównaj widoczny tekst elementów z ich nazwą dostępną (DevTools → Accessibility).

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu A z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Powiązane kryteria

4.1.2

Nazwa, rola, wartość

A Wymagane prawem

Każdy element interfejsu (przycisk, pole, przełącznik, zakładka, menu) ma w kodzie nazwę, rolę i aktualny stan, które mogą odczytać technologie wspomagające.

2.4.4

Cel łącza (w kontekście)