Co mówi norma
Wszelka treść nietekstowa przedstawiona użytkownikowi ma swoją alternatywę tekstową, która pełni tę samą funkcję, z wyjątkiem sytuacji wymienionych poniżej.
Dlaczego to ma znaczenie
Czytnik ekranu potrafi odczytać wyłącznie tekst. Obraz bez opisu to cisza; przycisk z samą ikoną bez nazwy to słowo „przycisk” i nic więcej.
Jak wygląda błąd
- błądZdjęcie produktu z `alt=""`, choć to zdjęcie jest jedyną rzeczą nazywającą produkt.
- błądPrzycisk z samą ikoną bez `aria-label`, odczytywany jako „przycisk”.
- błądWykres wrzucony jako PNG z `alt="wykres"` i bez tabeli danych gdziekolwiek.
- błądCzysto ozdobne elementy z opisowym tekstem alternatywnym, przez co odbiorca słyszy szum.
Jak to naprawić
- róbNapisz tekst alternatywny tak, jak przeczytałbyś stronę komuś przez telefon.
- róbCzysto ozdobnym obrazom daj `alt=""` — puste, nie brakujące — żeby technologie asystujące je pominęły.
- róbPrzy przyciskach z ikoną `aria-label` nazywające czynność, nie ikonę: „Usuń szkic”, nie „kosz”.
- róbPrzy wykresach udostępnij gdzieś liczby, na których się opierają — tabelę, zdanie podsumowania, plik do pobrania.
Jak sprawdza to A11ySignal
Przy każdym skanowaniu względem tego kryterium uruchamia się 7 automatycznych sprawdzeń.
krytycznyimage-altObrazy muszą mieć tekst alternatywny.
krytycznyinput-image-altPrzyciski graficzne muszą mieć tekst alternatywny.
poważnyaria-meter-nameLiczniki ARIA (meter) muszą mieć dostępne nazwy.
poważnyaria-progressbar-namePaski postępu ARIA (progressbar) muszą mieć dostępne nazwy.
poważnyobject-altElementy <object> muszą mieć alternatywę tekstową.
poważnyrole-img-altElementy z [role='img'] muszą mieć tekst alternatywny.
poważnysvg-img-altElementy svg z rolą img muszą mieć tekst alternatywny.
Czego narzędzie ci nie powie
Skaner widzi, że tekst alternatywny istnieje. Nie wie, czy „image123.jpg” opisuje obraz — sformułowanie należy do ciebie.