- Poziom
- A
- Od wersji
- WCAG 2.1
- Pozycje
- 57 / 193
2.5.3 Etykieta w nazwie
Słowa widoczne na przycisku lub przy polu muszą być częścią nazwy, którą słyszy technologia wspomagająca, żeby osoba wypowiadająca je na głos trafiła w tę kontrolkę, o którą jej chodziło.
/ Czego wymaga
Kontrolka ma dwie nazwy. Pierwsza to tekst, który widać na ekranie, a druga to nazwa dostępna, czyli ta, którą przeglądarka przekazuje technologii wspomagającej. Kryterium wymaga, żeby druga zawierała pierwszą zawsze wtedy, gdy kontrolka ma widoczną etykietę złożoną z tekstu lub z obrazu tekstu. Osoby, które obsługują komputer głosem, wypowiadają słowa z ekranu, na przykład „kliknij Szukaj”, a program rozpoznający mowę porównuje je z nazwą dostępną. Jeśli nazwa brzmi inaczej, polecenie nie robi nic.
Nazwa może być dłuższa od etykiety, o ile widoczne słowa się w niej znajdują, a W3C zaleca umieszczać je na samym początku. Wielkość liter i interpunkcja nie muszą się zgadzać. Przycisk, na którym jest sama ikona, nie podlega temu kryterium, bo nie ma etykiety tekstowej, którą nazwa miałaby zawierać. Kryterium nie wymienia żadnych wyjątków. Kontrolka nie spełnia wymogu, gdy aria-label lub aria-labelledby zastępuje widoczny tekst innym sformułowaniem, także synonimem o tym samym znaczeniu.
/ Jak strony go nie spełniają
- Na przycisku widać napis „Szukaj”, a w kodzie ma on aria-label="Znajdź produkty".
- Link „Czytaj więcej” dostaje aria-label, który opisuje artykuł i pomija słowa „Czytaj więcej”.
- Pole ma widoczną etykietę „Telefon”, a nadpisuje ją aria-label o treści „Numer kontaktowy”.
- Przycisk zrobiony z obrazu tekstu pokazuje słowo „Wyślij”, a jego tekst alternatywny brzmi „Prześlij formularz”.
- Atrybut aria-labelledby wskazuje ukryty tekst, którego brzmienie różni się od tekstu widocznego na kontrolce.
/ Jak sprawdzić samodzielnie
- Przejdź przez stronę i wypisz wszystkie kontrolki, na których widać tekst: przyciski, linki, karty oraz pola z widoczną etykietą.
- Wyszukaj w źródle strony atrybuty aria-label i aria-labelledby. To w tych dwóch miejscach nazwa najczęściej rozjeżdża się z widocznym tekstem.
- Zbadaj każdą z tych kontrolek w narzędziach deweloperskich przeglądarki i otwórz panel Accessibility. Porównaj wyliczoną nazwę (Name) ze słowami na ekranie.
- Włącz sterowanie głosem wbudowane w system operacyjny i powiedz „kliknij”, a po nim widoczne słowa. Kontrolce, która nie reaguje, trzeba przyjrzeć się dokładniej.
/ Jak to naprawić
- Usuń aria-label i pozwól, żeby nazwą był tekst znajdujący się wewnątrz elementu button lub a.
- Jeśli potrzebna jest dłuższa nazwa, zacznij ją od widocznych słów, na przykład aria-label="Czytaj więcej o raporcie rocznym" na linku z napisem „Czytaj więcej”.
- Możesz też zostawić nazwę równą widocznemu tekstowi, a dodatkową informację dołączyć atrybutem aria-describedby, który dodaje opis i nie zmienia nazwy.
- W przypadku obrazu tekstu wpisz w atrybucie alt dokładnie te słowa, które widać na obrazie.
- Pole nazwij elementem label powiązanym z nim atrybutem for i nie nadpisuj tej etykiety atrybutem aria-label.
/ Co sprawdza nasz skaner
Nasz test label-in-name działa na wyrenderowanej stronie i obejmuje kontrolki, do których da się dojść klawiaturą. Gdy nazwa dostępna pochodzi z aria-label lub aria-labelledby, porównuje ją z tekstem widocznym na samej kontrolce, pomijając wielkość liter i interpunkcję, i zgłasza nazwę, która tego tekstu nie zawiera. Nie odczyta tekstu z obrazu i nie porównuje pola z osobną etykietą wyświetloną obok niego.
/ Kto je łamie, według naszych pomiarów
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| San Francisco | city · US | 19 | 28 |
| Nürnberg | city · DE | 18 | 2 |
| Szkoła Główna Handlowa | education · PL | 18 | 12 |
| Gliwice | city · PL | 17 | 13 |
| Poznań | city · PL | 17 | 1 |
| Politechnika Łódzka | education · PL | 16 | 5 |
| Deutsche Bahn | transport · DE | 9 | 5 |
| Baltimore | city · US | 8 | 7 |
| Elbląg | city · PL | 7 | 20 |
| Leipzig | city · DE | 6 | 26 |
| PKP Intercity | transport · PL | 6 | 2 |
| Policja | government · PL | 5 | 12 |
| Tychy | city · PL | 5 | 20 |
| Warszawski Uniwersytet Medyczny | education · PL | 5 | 13 |
| Boston | city · US | 4 | 6 |
| Uniwersytet Mikołaja Kopernika | education · PL | 4 | 6 |
| Hamburg | city · DE | 3 | 23 |
| LA Metro | transport · US | 3 | 17 |
| Las Vegas | city · US | 3 | 8 |
| Muzeum Narodowe w Warszawie | culture · PL | 3 | 11 |
| Warszawa | city · PL | 3 | 20 |
| Narodowy Instytut Dziedzictwa | culture · PL | 2 | 6 |
| Philadelphia | city · US | 2 | 8 |
| State of Georgia | government · US | 2 | 53 |
| Universität Heidelberg | education · DE | 2 | 21 |
| Uniwersytet Ekonomiczny w Krakowie | education · PL | 2 | 15 |
| Uniwersytet Łódzki | education · PL | 2 | 9 |
| Austin | city · US | 1 | 20 |
| Biblioteka Narodowa | culture · PL | 1 | 16 |
| Bundesagentur für Arbeit | government · DE | 1 | 16 |
| Bundesministerium für Bildung und Forschung | government · DE | 1 | 8 |
| Bundestag | government · DE | 1 | 17 |
| Cook County | government · US | 1 | 13 |
| Denver | city · US | 1 | 51 |
| Deutsche Rentenversicherung | government · DE | 1 | 5 |
| Gdańsk | city · PL | 1 | 2 |
| Hannover | city · DE | 1 | 10 |
| Houston | city · US | 1 | 7 |
| Indianapolis | city · US | 1 | 18 |
| Komisja Nadzoru Finansowego | government · PL | 1 | 17 |
| Library of Congress | culture · US | 1 | 30 |
| Ohio State University | education · US | 1 | 6 |
| Opole | city · PL | 1 | 8 |
| Pacjent.gov.pl | health · PL | 1 | 9 |
| Phoenix | city · US | 1 | 1 |
| Prezydent RP | government · PL | 1 | 15 |
| Płock | city · PL | 1 | 52 |
| Robert Koch-Institut | health · DE | 1 | 10 |
| Rzecznik Praw Obywatelskich | government · PL | 1 | 42 |
| Social Security Administration | government · US | 1 | - |
| Stuttgart | city · DE | 1 | 6 |
| Travis County | government · US | 1 | 37 |
| Universität Hamburg | education · DE | 1 | 36 |
| Uniwersytet Śląski | education · PL | 1 | 9 |
| Veterans Affairs | government · US | 1 | 33 |
| Zakład Ubezpieczeń Społecznych | government · PL | 1 | 27 |
| Zielona Góra | city · PL | 1 | 7 |
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czym różni się widoczna etykieta od nazwy dostępnej?
Etykieta to to, co człowiek widzi na kontrolce lub obok niej: tekst albo obraz tekstu. Nazwa dostępna to to, co przeglądarka przekazuje technologii wspomagającej, wyliczone z zawartości elementu, elementu label, tekstu alternatywnego, aria-label lub aria-labelledby. Zwykle obie są takie same. Rozchodzą się wtedy, gdy atrybut ARIA nadpisuje widoczny tekst.
Czy nazwa dostępna musi być identyczna z widocznym tekstem?
Nie. Nazwa musi zawierać widoczny tekst i może mieć dodatkowe słowa. W3C radzi stawiać widoczne słowa na początku, bo część programów do rozpoznawania mowy dopasowuje polecenie od początku nazwy. Różnice w wielkości liter i interpunkcji się nie liczą. Nazwa, w której widoczne słowo zastąpiono synonimem albo je pominięto, nie spełnia kryterium.
Czy kryterium Etykieta w nazwie dotyczy przycisków z samą ikoną?
Tylko wtedy, gdy na kontrolce widać tekst. Przycisk z samą lupą nie ma widocznej etykiety, więc nazwa nie ma czego zawierać i to kryterium go nie obejmuje. Taki przycisk nadal potrzebuje nazwy dostępnej na mocy kryterium 4.1.2 Nazwa, rola, wartość. Gdy obok ikony pojawia się tekst, ten tekst musi znaleźć się w nazwie.