SC 1.1.1 Poziom A WCAG 2.0

Treść nietekstowa

Każdy obraz, ikona, wykres, plik audio i inny komponent nietekstowy musi mieć alternatywę tekstową spełniającą ten sam cel — dzięki temu użytkownicy czytników ekranowych, wyświetlaczy brajlowskich i przełączników uzyskują te same informacje co użytkownicy widzący.

Czego wymaga kryterium

Treść nietekstowa — obrazy, ikony, wykresy, animacje, CAPTCHA, osadzone pliki audio, doznania zmysłowe — musi posiadać alternatywę tekstową, która przekazuje tę samą informację lub funkcję. Alternatywa tekstowa to to, co technologia wspomagająca przedstawi użytkownikowi, gdy oryginał nie może zostać odebrany.

Cztery kategorie wyróżniane przez WCAG:

Informacyjne obrazy potrzebują atrybutu alt opisującego przekazywaną informację.
Funkcjonalne obrazy (łącza, przyciski) potrzebują alt opisującego działanie, a nie wygląd.
Dekoracyjne obrazy otrzymują pusty alt (alt=""), aby czytniki ekranowe je pomijały.
Złożone obrazy (wykresy, diagramy) potrzebują krótkiego alt oraz dłuższego opisu w pobliżu — w tekście, bloku <details> lub za pomocą aria-describedby.

Jak spełnić kryterium

Dodaj atrybut alt do każdego <img>. Pusty, jeśli obraz jest dekoracyjny; opisowy, jeśli jest informacyjny.
Nadaj każdemu przyciskowi z samą ikoną dostępną nazwę za pomocą aria-label, widocznego tekstu lub SVG <title>.
Dla wykresów i infografik napisz jednozd aniowy alt i umieść dane w dostępnej tabeli bezpośrednio przed lub za elementem.
Dla CAPTCHA zapewnij co najmniej jedną alternatywę niewidzialną (audio CAPTCHA, weryfikację e-mail, ograniczenie liczby żądań po stronie serwera).
Dla plików audio przekazujących informacje (podgląd podcastu, dźwięk interfejsu) udostępnij odpowiednik tekstowy.

Typowe błędy

alt="image" lub alt="picture of a person" — opisuje nośnik, nie treść.
Przyciski z samą ikoną bez dostępnej nazwy (<button><svg /></button>). Czytniki ekranowe ogłaszają „przycisk” i nic więcej.
Dekoracyjne obrazy bez alt="" — czytniki ekranowe czytają wtedy nazwę pliku.
Tagi <img> wykresów z tytułem wykresu jako alt, a dane źródłowe są niedostępne na stronie.
Znaczące obrazy tła CSS bez etykiety tekstowej w kodzie.

Dlaczego to ważne

To fundament dostępności dla czytników ekranowych. Witryna niespełniająca kryterium 1.1.1 jest bezużyteczna dla niewidomych użytkowników — każdy obraz staje się ślepą uliczką. To także najczęstszy błąd wykrywany przez axe i Lighthouse, ponieważ narzędzia automatyczne potrafią sygnalizować brakujące atrybuty alt, lecz nie oceniają, czy istniejący alt jest sensowny.