Etykieta w nazwie

Czego wymaga

Jeśli przycisk na ekranie wyświetla tekst „Wyślij zgłoszenie”, użytkownik sterowania głosem powinien móc powiedzieć „kliknij Wyślij zgłoszenie” i sprawić, by kliknięcie trafiło w cel. Działa to tylko wtedy, gdy widoczna etykieta jest zawarta w dostępnej nazwie — najlepiej jako pierwsze słowa. Jeśli dostępna nazwa to „Prześlij formularz”, a widoczny tekst to „Wyślij zgłoszenie”, polecenie głosowe zawodzi bezgłośnie.

WCAG wymaga, aby widoczna etykieta tekstowa była częścią dostępnej nazwy. Dostępna nazwa może zawierać więcej (kontekst wyjaśniający), ale widoczny tekst musi się w niej znajdować, w tej samej kolejności słów.

Jak spełnić wymaganie

• Dla przycisków i łączy z tekstem nie rób nic specjalnego — treść tekstowa automatycznie staje się dostępną nazwą.
• Gdy dodajesz aria-label do elementu sterującego, który już ma widoczny tekst, umieść widoczny tekst na początku: <button aria-label="Wyślij zgłoszenie — otworzy potwierdzenie">Wyślij zgłoszenie</button>.
• Dla przycisków z ikoną i tekstem pozwól, by tekst decydował o nazwie. Nie nadpisuj jej przez aria-label dotyczący tylko ikony.
• Dla łączy, których tekst brzmi „Czytaj więcej”, rozszerz dostępną nazwę przez aria-label="Czytaj więcej o WCAG 2.2 — pełny artykuł", tak aby widoczne „Czytaj więcej” było nadal prefiksem.
• Gdy widoczna etykieta elementu sterującego to obraz (ikona z nałożonym tekstem, logo), upewnij się, że alt dokładnie odpowiada widocznemu tekstowi.

Typowe błędy

• Przycisk z napisem „Szukaj” i atrybutem aria-label="Znajdź". Użytkownicy głosowi mówią „kliknij Szukaj” — nic się nie dzieje.
• Przyciski „Dodaj do koszyka” z aria-label="Dodaj niebieską koszulkę rozmiar M do koszyka" — rozbudowana nazwa, a widoczne „Dodaj do koszyka” nie jest już prefiksem. Polecenie głosowe „kliknij Dodaj do koszyka” nie trafia w cel.
• Przyciski z ikoną i tekstem, gdzie projektant dodał aria-label="ikona koszyka" i nadpisał widoczny tekst „Do kasy”.
• Zlokalizowane witryny, gdzie widoczny tekst został przetłumaczony, ale aria-label nadal jest po angielsku.
• Pływające przyciski akcji wyświetlające „Czat”, ale z atrybutem aria-label="Otwórz widget pomocy".

Dlaczego to ważne

To kryterium warunkuje dostępność dla użytkowników sterowania głosem — osób używających Dragon NaturallySpeaking, Voice Control w iOS / macOS, Voice Access w Androidzie lub Windows Speech Recognition. Dla tych użytkowników widoczna etykieta jest poleceniem. Rozbieżność to nie drobna niedogodność — to różnica między możliwością obsługi a jej brakiem. Pomaga też użytkownikom czytników ekranu, gdy widząca osoba towarzysząca mówi „kliknij przycisk Zapisz” — komunikat odpowiada słowom na ekranie. Kryterium 2.5.3 jest łatwe do naprawienia i łatwe do przeoczenia, bo narzędzia automatyczne rzadko je oznaczają: programista widzi aria-label i zakłada, że jest dobrze. Zawsze sprawdzaj dostępną nazwę względem widocznego tekstu.