Funkcjonalność · Poziom A

2.5.3 Etykieta w nazwie

To, co widać na przycisku lub polu, powinno być częścią jego dostępnej nazwy.

Występuje w: WCAG 2.1 i WCAG 2.2.

Krótko

Jeśli kontrolka ma widoczną etykietę, jej dostępna nazwa musi zawierać ten sam tekst. Najlepiej, gdy dostępna nazwa zaczyna się od widocznej etykiety.

Problem w praktyce

Na ekranie widać przycisk „Kup teraz”, ale w kodzie ma nazwę dostępną „Dodaj produkt do koszyka”. Osoba sterująca głosem mówi „kliknij Kup teraz”, a program szuka kontrolki o takiej nazwie. Nie znajduje jej, mimo że użytkownik widzi taki tekst.

To kryterium nie dotyczy samej widoczności tekstu. Dotyczy zgodności widocznej etykiety z nazwą, którą dostają technologie wspomagające.

Kogo to dotyczy

  • Osób używających sterowania głosem.
  • Użytkowników czytników ekranu, którzy porównują widoczną treść z nazwą kontrolki.
  • Osób korzystających z pomocy innej osoby, która mówi „kliknij Zapisz”.
  • Osób z trudnościami poznawczymi, które potrzebują spójnych nazw działań.

Dobry przykład

  • Przycisk widoczny jako „Zapisz” ma dostępną nazwę „Zapisz”.
  • Przycisk „Zapisz” ma dodatkową nazwę „Zapisz ustawienia profilu” - widoczny tekst jest na początku.
  • Pole z etykietą „E-mail” ma nazwę dostępną „E-mail”.
  • Link widoczny jako „Pobierz fakturę” ma nazwę, która zawiera dokładnie te słowa.

Zły przykład

  • Widoczny tekst „Szukaj”, ale dostępna nazwa „Uruchom filtr”.
  • Przycisk „Kup teraz” nadpisany przez aria-label="Dodaj do koszyka".
  • Ikona z tekstem „Pobierz” ma nazwę dostępną „PDF”.
  • Widoczna etykieta pola nie jest połączona z polem i pole nie ma nazwy.

Przykłady kodu

Dobry przykład: widoczny tekst jest nazwą

Natywny przycisk dostaje nazwę z własnego tekstu.

Kod — HTML

<button type="button">
  Zapisz zmiany
</button>

Dobry przykład: widoczny tekst na początku nazwy

Dodatkowy kontekst nie usuwa widocznej etykiety z nazwy.

Kod — HTML

<button type="button" aria-label="Zapisz zmiany w profilu">
  Zapisz zmiany
</button>

Zły przykład: dostępna nazwa nie zawiera etykiety

Sterowanie głosem może nie znaleźć widocznego przycisku.

Kod — HTML

<button type="button" aria-label="Przejdź do płatności">
  Kup teraz
</button>

Przykład graficzny

Źle

Widocznie: Kup teraz

Nazwa: Przejdź do płatności

Widoczna etykieta nie jest w nazwie.

Dobrze

Widocznie: Kup teraz

Nazwa: Kup teraz

Komenda głosowa może użyć widocznej etykiety.

Schemat pokazuje, że dostępna nazwa powinna zawierać widoczny tekst kontrolki.

Jak sprawdzić

  1. Znajdź przyciski, linki i pola z widocznym tekstem.
  2. Sprawdź ich dostępną nazwę w narzędziach deweloperskich albo accessibility tree.
  3. Porównaj nazwę z widoczną etykietą.
  4. Upewnij się, że widoczny tekst jest zawarty w nazwie, najlepiej na początku.
  5. Nie oceniaj tutaj samego kontrastu ani widoczności tekstu.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część przypadków, w których aria-label nadpisuje widoczny tekst,
  • kontrolki bez dostępnej nazwy,
  • różnice między tekstem przycisku a dostępną nazwą.

Automat nie oceni pewnie

  • który tekst jest rzeczywistą widoczną etykietą,
  • czy dodatkowy kontekst w nazwie pomaga czy przeszkadza,
  • czy symboliczny tekst, np. „B” dla pogrubienia, jest etykietą w rozumieniu kryterium.

Typowe błędy

  • Nadpisywanie tekstu przycisku przez inne aria-label.
  • Widoczna etykieta pola niepołączona z polem.
  • Ukryty tekst dodany przed widoczną etykietą w nazwie.
  • Ikony z podpisem, których nazwa dostępna opisuje tylko ikonę, a nie widoczny podpis.