Zasada 1: Postrzegalność 1.1 Alternatywa tekstowa

1.1.1 Treść nietekstowa

WCAG 1.1.1 Non-text Content

W skrócie

Każdy obrazek, ikona, wykres czy przycisk graficzny musi mieć tekstowy odpowiednik, który przekazuje tę samą informację. Grafiki czysto dekoracyjne należy ukryć przed czytnikami ekranu.

Poziom
A Podstawowe minimum – bez tego część osób w ogóle nie skorzysta ze strony.
Czy to obowiązkowe?
Wymagane prawem
Kto w zespole odpowiada
Redakcja treści, Programowanie, Projektowanie UX/UI
Jak to wykryć
Częściowo automatyczne

Wyjaśnienie prostym językiem: CAPTCHA, Czytnik ekranu, Tekst alternatywny (opis obrazka)

Komu i dlaczego to pomaga

Osoba niewidoma słyszy tylko to, co czytnik ekranu znajdzie w kodzie. Obrazek bez opisu to dla niej „grafika” albo nazwa pliku typu IMG_2045.jpg – informacja przepada.

  • Osoby niewidome
  • Osoby słabowidzące
  • Osoby z trudnościami poznawczymi

Jak zrobić to dobrze

  • Pisz alt tak, jakbyś opisywał(a) obrazek przez telefon: co jest ważne w tym kontekście, zwykle do 125 znaków.
  • Grafikom dekoracyjnym daj alt="" (pusty, ale obecny) albo wstaw je jako tło w CSS.
  • Dla złożonych grafik (wykresy, mapy) daj krótki alt i pełny opis w tekście obok lub pod grafiką.
  • Przyciskom-ikonom nadaj nazwę przez aria-label albo tekst ukryty wizualnie.

Najczęstsze błędy

  • Brak atrybutu alt albo alt z nazwą pliku („baner-final-2.jpg”).
  • Alt powtarzający podpis pod zdjęciem albo zaczynający się od „Zdjęcie przedstawia…”.
  • Infografika lub wykres opisane jednym słowem („wykres”) zamiast wniosku, który z niego płynie.
  • Przyciski-ikony (lupa, kosz, X) bez dostępnej nazwy.
  • CAPTCHA obrazkowa bez alternatywy (np. audio).

Przykład w kodzie

Źle
<img src="IMG_2045.jpg">
<button><svg class="icon-search"></svg></button>
Dobrze
<img src="wykres-2025.png"
     alt="Liczba wniosków online wzrosła z 2 do 11 tys. w 2025 r.">
<img src="ornament.svg" alt="">
<button aria-label="Szukaj"><svg aria-hidden="true" class="icon-search"></svg></button>

Jak to sprawdzić

  1. Wyłącz obrazki w przeglądarce (lub użyj rozszerzenia do podglądu altów) i sprawdź, czy strona nadal przekazuje wszystkie informacje.
  2. Przejdź po stronie czytnikiem ekranu (NVDA, VoiceOver) i posłuchaj, co jest odczytywane przy grafikach i ikonach.
  3. Sprawdź, czy ozdobniki mają pusty alt="" – nie powinny być odczytywane w ogóle.

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu A z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

1.4.5

Obrazy tekstu

Poziom AA Wymagane prawem

Tekst ma być tekstem, a nie obrazkiem z tekstem – wyjątkiem są logotypy i sytuacje, gdy konkretny wygląd jest niezbędny.

2.4.4

Cel łącza (w kontekście)

Poziom A Wymagane prawem

Z treści linku (albo z linku i jego najbliższego kontekstu, np. zdania lub akapitu) musi wynikać, dokąd prowadzi.

4.1.2

Nazwa, rola, wartość

Poziom A Wymagane prawem

Każdy element interfejsu (przycisk, pole, przełącznik, zakładka, menu) ma w kodzie nazwę, rolę i aktualny stan, które mogą odczytać technologie wspomagające.

Ostatnia aktualizacja: .
Źródło: Understanding SC 1.1.1: Non-text Content – oficjalne objaśnienie W3C (po angielsku).