Funkcjonalność · Poziom A

2.5.3 Etykieta w nazwie

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

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.