Postrzegalność · Poziom A

1.1.1 Treść nietekstowa

Wszystkie obrazy i inne treści nietekstowe, takie jak ikony, wykresy, audio, CAPTCHA albo kontrolki, muszą mieć opisową alternatywę tekstową, która przekazuje ich znaczenie. Treści czysto dekoracyjne można ukryć przed technologiami wspomagającymi, na przykład pustym atrybutem alt.

Krótko

Jeśli coś nie jest tekstem, ale przekazuje informację, użytkownik musi dostać równoważną informację w tekście.

Problem w praktyce

Użytkownik widzący często od razu rozumie znaczenie zdjęcia, ikony, wykresu albo przycisku graficznego. Widzi produkt, odczytuje dane z wykresu, rozpoznaje ikonę pobierania albo zauważa, że grafika jest tylko ozdobą.

Użytkownik czytnika ekranu może w tym samym miejscu usłyszeć tylko „grafika”, nazwę pliku, na przykład „image123.jpg”, albo nie usłyszeć nic. Wtedy informacja znika z interfejsu, mimo że wizualnie nadal jest na stronie.

Kogo to dotyczy?

  • Osób niewidomych, które korzystają z czytników ekranu i potrzebują tekstu zamiast informacji przekazanej obrazem.
  • Osób słabowidzących, które powiększają stronę, zmieniają kontrast albo nie są w stanie odczytać szczegółów grafiki.
  • Osób korzystających z technologii asystujących, które opierają się na dostępnej nazwie, opisie albo treści tekstowej.
  • Osób w sytuacjach technicznych, w których obraz się nie ładuje, jest zablokowany, ma zbyt małą rozdzielczość albo nie jest dostępny w danym kanale.

Dobry przykład

  • Zdjęcie produktu: zamiast „plecak” tekst alternatywny mówi, co jest ważne przy zakupie, np. „Czarny plecak miejski z dwiema kieszeniami zewnętrznymi”.
  • Wykres: krótki opis przy obrazie wyjaśnia temat wykresu, a pod wykresem znajduje się dłuższe podsumowanie najważniejszych danych i trendu.
  • Ikona z tekstem obok: ikona telefonu jest dekoracyjna, bo obok widnieje tekst „Zadzwoń do nas”; czytnik ekranu nie musi czytać „ikona telefonu”.
  • Obraz dekoracyjny: ozdobna fala, separator albo tło mają pusty atrybut alt="", bo nie dodają informacji.

Zły przykład

  • Obraz informacyjny bez atrybutu alt.
  • Tekst alternatywny typu alt="zdjęcie" albo alt="grafika", który nie przekazuje znaczenia.
  • Tekst alternatywny z nazwą pliku, np. alt="image123.jpg".
  • Powielanie tekstu stojącego tuż obok obrazu, przez co czytnik ekranu czyta tę samą informację dwa razy.
  • Opisywanie dekoracji tak, jakby była ważną treścią.
  • Tekst alternatywny oderwany od kontekstu, np. opisujący wygląd zdjęcia, gdy użytkownik potrzebuje znać funkcję przycisku.

Przykłady kodu

Obraz informacyjny

Gdy obraz przekazuje informację, tekst alternatywny powinien przekazać sens obrazu w kontekście strony.

Kod — HTML

<img
  src="/images/plecak.jpg"
  alt="Czarny plecak miejski z dwiema kieszeniami zewnętrznymi"
>

Jak to działa

Czytnik ekranu nie odczyta samej nazwy pliku. Przekaże użytkownikowi informację: „Czarny plecak miejski z dwiema kieszeniami zewnętrznymi”.

Obraz dekoracyjny

Gdy obraz jest tylko ozdobą i nie przekazuje treści, powinien mieć pusty atrybut alt.

Kod — HTML

<img
  src="/images/separator-dekoracyjny.png"
  alt=""
>

Jak to działa

Pusty alt oznacza, że obraz jest dekoracyjny i technologia wspomagająca może go pominąć. Jeśli dekoracja nie jest treścią, często lepiej zrobić ją w CSS jako tło albo ozdobnik, zamiast wstawiać ją jako img.

Obraz będący linkiem

Gdy obraz jest linkiem, jego tekst alternatywny powinien opisywać cel linku albo akcję.

Kod — HTML

<a href="/kontakt">
  <img
    src="/images/ikona-kontaktu.png"
    alt="Kontakt z zespołem Accessibility First"
  >
</a>

Jak to działa

W tym przypadku alt opisuje cel linku, bo obraz jest jedyną treścią linku. Użytkownik czytnika ekranu rozumie, dokąd prowadzi link, zamiast słyszeć sam komunikat typu „grafika, link”.

A co z SVG?

SVG trzeba rozróżnić według sposobu osadzenia. Nie mówimy: „SVG ma alt”. Mówimy: „element img ma alt” albo „inline SVG wymaga osobnego sposobu nadania nazwy lub opisu”.

  1. SVG jako plik w img: gdy używasz kodu typu <img src="ikona.svg" alt="...">, tekst alternatywny nadal jest na elemencie img, nie w samym pliku SVG.
  2. SVG jako dekoracja: jeśli jest osadzony przez img i nie przekazuje treści, może mieć alt="". Jeśli jest czysto dekoracyjny, często lepiej użyć CSS.
  3. Inline SVG: jeśli SVG jest wpisany bezpośrednio w HTML jako <svg>, nie używa się atrybutu alt. Dostępna nazwa albo opis mogą wymagać title, desc, aria-labelledby, aria-label albo role="img", zależnie od funkcji grafiki.

Przykład graficzny

Porównanie trzech decyzji o tekście alternatywnym: błędnej, poprawnej i dekoracyjnej.
  • Źle: obraz produktu ma alt="zdjęcie" albo alt="plecak-final-v2.jpg". Użytkownik nie wie, co jest na zdjęciu ani dlaczego obraz jest ważny.
  • Dobrze: ten sam obraz na karcie produktu ma alt="Czarny plecak miejski z dwiema kieszeniami zewnętrznymi". Opis wynika z kontekstu zakupu.
  • Dekoracja: ozdobna fala między sekcjami ma alt="", bo nie wnosi informacji i nie powinna przerywać czytania treści.

Jak sprawdzić?

  1. Znajdź wszystkie obrazy, ikony, wykresy, CAPTCHA i elementy graficzne.
  2. Sprawdź, czy każdy element informacyjny ma równoważną informację tekstową.
  3. Sprawdź, czy elementy dekoracyjne mają pusty alt.
  4. Sprawdź, czy tekst alternatywny pasuje do kontekstu strony.
  5. Uruchom czytnik ekranu, np. NVDA albo VoiceOver.
  6. Przejdź przez stronę i oceń, czy bez widzenia obrazu da się zrozumieć jego znaczenie.
  7. Sprawdź wyniki narzędzi automatycznych, np. axe DevTools, WAVE albo Lighthouse.
  8. Nie kończ oceny na automacie. Sens tekstu alternatywnego trzeba sprawdzić ręcznie.

Co sprawdzi automat, a czego nie?

Automat może wykryć

  • Brak atrybutu alt przy obrazie.
  • Część pustych albo podejrzanych tekstów alternatywnych.
  • Niektóre obrazy-linki bez dostępnej nazwy.

Automat nie oceni pewnie

  • Czy alt jest sensowny.
  • Czy opis pasuje do kontekstu strony.
  • Czy obraz jest dekoracyjny czy informacyjny.
  • Czy wykres ma wystarczający opis.
  • Czy CAPTCHA ma dostępną alternatywę.

Typowe błędy

  • Wrzucanie plakatów wydarzeń jako obrazów bez opisu programu, daty, miejsca i zasad udziału.
  • Publikowanie skanów pism bez tekstowej alternatywy.
  • Dodawanie grafik z harmonogramem bez opisania harmonogramu w treści strony.
  • Umieszczanie wykresów w raportach bez podsumowania danych i wniosków.
  • Dodawanie ikon w CMS-ie bez widocznych etykiet albo dostępnych nazw.
  • Automatyczny alt od nazwy pliku przy zdjęciach w aktualnościach.

Powiązane kryteria

Źródła