- Poziom
- A
- Od wersji
- WCAG 2.0
- Pozycje
- 63 / 193
1.1.1 Treść nietekstowa
Wszystko, co nie jest tekstem (obraz, ikona, wykres), potrzebuje tekstu alternatywnego, który przekazuje te same informacje.
/ Czego wymaga
Każdy obraz, ikona, wykres, nagranie dźwiękowe i każda inna treść, która nie jest tekstem, potrzebuje tekstu alternatywnego spełniającego tę samą funkcję. Czytnik ekranu nie opisze pikseli: odczyta atrybut alt, dostępną nazwę albo nic. Gdy alternatywy brakuje, osoba niewidoma słyszy nazwę pliku albo słowo „grafika”, osoba sterująca komputerem za pomocą głosu nie ma jak nazwać przycisku, a ktoś z wolnym łączem i wyłączonymi obrazami widzi puste pole.
Granicę wyznacza funkcja, a nie wygląd. Zdjęcie, które niesie informację, wymaga opisu tej informacji; logo będące linkiem wymaga nazwy celu; czysto dekoracyjny ornament wymaga pustego atrybutu alt, żeby technologia wspomagająca go pominęła. Kryterium samo wymienia wyjątki: kontrolki i pola formularzy potrzebują nazwy, nagrania audio i wideo co najmniej opisowej etykiety, testy i doznania zmysłowe krótkiej identyfikacji, a CAPTCHA etykiety tekstowej oraz wersji alternatywnej przeznaczonej dla innego zmysłu.
/ Jak strony go nie spełniają
- Element img nie ma w ogóle atrybutu alt, więc czytnik ekranu sięga po nazwę pliku.
- Tekst alternatywny to nazwa pliku albo wypełniacz w rodzaju image, photo czy IMG_2043.jpg.
- Obraz będący linkiem albo przycisk z ikoną ma pusty alt, przez co link lub przycisk zostaje bez nazwy.
- Wykres lub infografika ma opis „wykres”, a żadna z pokazanych liczb nie jest dostępna w tekście.
- Obrazy dekoracyjne mają długie opisy, więc strona jest odczytywana z szumem między akapitami.
/ Jak sprawdzić samodzielnie
- Kliknij obraz prawym przyciskiem, wybierz Zbadaj i poszukaj atrybutu alt. Przeczytaj go tak, jak odbierze go ktoś, kto obrazu nie widzi.
- Przy każdym obrazie zapytaj: czy po zastąpieniu go tym tekstem odwiedzający coś by stracił. Dla dekoracji właściwa odpowiedź to alt="".
- Włącz darmowy czytnik ekranu (NVDA w systemie Windows, VoiceOver w macOS) i przejdź tabulatorem po wszystkich obrazach w linkach i przyciskach z ikonami. Każdy powinien oznajmić, dokąd prowadzi albo co robi.
- Sprawdź, czy wykresy, mapy i infografiki mają te same dane w tekście, obok grafiki albo pod linkiem.
- Przeszukaj arkusz stylów pod kątem background-image na elementach, które coś znaczą. Obraz z CSS nie ma atrybutu alt, więc informacja musi być także w kodzie strony.
/ Jak to naprawić
- Dodaj atrybut alt do każdego elementu img. Opisz to, co obraz wnosi w tym miejscu, a nie jego ogólny wygląd.
- Dla dekoracji użyj alt="" (pusty, bez spacji) albo przenieś obraz do CSS jako background-image.
- Gdy obraz jest jedyną zawartością linku lub przycisku, wpisz w alt cel albo czynność, na przykład Strona główna lub Szukaj.
- Do osadzonego SVG dodaj role="img" i aria-label. Przy foncie z ikonami umieść aria-label na przycisku, a na glifie aria-hidden="true".
- Złożonej grafice daj krótki alt z jej nazwą, a pełne dane umieść w tabeli lub akapicie obok.
/ Co sprawdza nasz skaner
Nasz skan statyczny liczy elementy img bez atrybutu alt, chyba że mają role presentation albo none. Skan na wyrenderowanej stronie powtarza to dla widocznych obrazów i wskazuje alt będący nazwą pliku albo wypełniaczem. HTML_CodeSniffer i axe-core dodają obrazy w linkach bez alt, pusty alt połączony z atrybutem title oraz elementy object bez alternatywy tekstowej. Żadne z tych narzędzi nie oceni, czy istniejący opis jest trafny.
/ Kto je łamie, według naszych pomiarów
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| Bundesrat | government · DE | 70 | 14 |
| Politechnika Śląska | education · PL | 33 | 2 |
| Gdańsk | city · PL | 26 | 2 |
| Indianapolis | city · US | 25 | 18 |
| Harris County | government · US | 20 | 19 |
| Uniwersytet Jagielloński | education · PL | 18 | 1 |
| Urząd Ochrony Danych Osobowych | government · PL | 16 | 6 |
| Prezydent RP | government · PL | 15 | 15 |
| Boston | city · US | 12 | 6 |
| Social Security Administration | government · US | 12 | - |
| Uniwersytet Warszawski | education · PL | 12 | 4 |
| Senat RP | government · PL | 11 | 24 |
| Berliner Verkehrsbetriebe | transport · DE | 10 | 21 |
| Narodowy Instytut Dziedzictwa | culture · PL | 7 | 6 |
| Bundesnetzagentur | government · DE | 6 | 9 |
| Poznań | city · PL | 6 | 1 |
| Deutsche Bahn | transport · DE | 5 | 5 |
| Poczta Polska | government · PL | 5 | 16 |
| Radom | city · PL | 5 | 2 |
| Teatr Wielki Opera Narodowa | culture · PL | 5 | 3 |
| Los Angeles County | government · US | 4 | 9 |
| National Weather Service | government · US | 4 | 34 |
| PKP Intercity | transport · PL | 4 | 2 |
| Politechnika Łódzka | education · PL | 4 | 5 |
| Rybnik | city · PL | 4 | 6 |
| Chicago Transit Authority | transport · US | 3 | 4 |
| Düsseldorf | city · DE | 3 | 9 |
| Philadelphia | city · US | 3 | 8 |
| Politechnika Warszawska | education · PL | 3 | 12 |
| University of Florida | education · US | 3 | 23 |
| Łódź | city · PL | 3 | 3 |
| Austin | city · US | 2 | 20 |
| Elbląg | city · PL | 2 | 20 |
| Gdynia | city · PL | 2 | 7 |
| Humboldt-Universität zu Berlin | education · DE | 2 | 35 |
| Narodowy Fundusz Zdrowia | health · PL | 2 | 18 |
| Państwowa Komisja Wyborcza | government · PL | 2 | 15 |
| Phoenix | city · US | 2 | 1 |
| Sejm RP | government · PL | 2 | 9 |
| State of Washington | government · US | 2 | 9 |
| Stiftung Preußischer Kulturbesitz | culture · DE | 2 | 21 |
| Amtrak | transport · US | 1 | 4 |
| Białystok | city · PL | 1 | 37 |
| Bundesministerium der Justiz | government · DE | 1 | 7 |
| Centers for Disease Control | health · US | 1 | 8 |
| Cook County | government · US | 1 | 13 |
| Dallas | city · US | 1 | 23 |
| Department of Justice | government · US | 1 | 39 |
| Houston | city · US | 1 | 7 |
| Instytut Pamięci Narodowej | government · PL | 1 | 43 |
| Kraków | city · PL | 1 | 12 |
| Ministerstwo Sprawiedliwości | government · PL | 1 | 25 |
| München | city · DE | 1 | 22 |
| New Orleans | city · US | 1 | 7 |
| Rzeszów | city · PL | 1 | 8 |
| State of Florida | government · US | 1 | 8 |
| State of Illinois | government · US | 1 | 89 |
| Szkoła Główna Handlowa | education · PL | 1 | 12 |
| Uniwersytet Ekonomiczny w Krakowie | education · PL | 1 | 15 |
| Uniwersytet Mikołaja Kopernika | education · PL | 1 | 6 |
| Uniwersytet Wrocławski | education · PL | 1 | 15 |
| Wrocław | city · PL | 1 | 2 |
| 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
Czy każdy obraz musi mieć tekst alternatywny?
Każdy element img musi mieć atrybut alt, ale nie każdy obraz wymaga opisu. Obraz, który wnosi informację, dostaje krótki tekst mówiący, co wnosi. Obraz czysto dekoracyjny dostaje pusty atrybut, alt="", który każe czytnikowi ekranu go pominąć. Błędem jest pominięcie samego atrybutu, bo wtedy zamiast opisu może zostać odczytana nazwa pliku.
Jak długi powinien być tekst alternatywny?
WCAG nie podaje limitu znaków. Liczy się to, czy tekst pełni w danym miejscu tę samą funkcję co obraz, więc zwykle wystarcza jedno krótkie zdanie. Gdy obraz zawiera więcej, niż zmieści zdanie, na przykład wykres albo schemat, zostaw krótki alt, a pełny opis lub dane umieść w tekście strony tuż obok.
Czym różni się brak atrybutu alt od pustego alt?
Brak atrybutu zmusza technologię wspomagającą do zgadywania i czytnik ekranu może odczytać nazwę pliku albo adres linku. Pusty atrybut, alt="", to świadoma informacja, że obraz jest dekoracją i należy go pominąć. Osoba widząca nie zauważy żadnego z nich. Tylko pierwszy przypadek sam w sobie narusza 1.1.1; drugi narusza je wtedy, gdy obraz jednak niósł informację.