Audyt WCAG – Kryterium 1.4.5 – Obrazy tekstu: Przewodnik dla osób bez znajomości programowania

Kryterium 1.4.5 – Obrazy tekstu to ważny element WCAG 2.1 na poziomie AA, który ma na celu zapewnienie, że wszelkie teksty w postaci obrazów są dostępne i zrozumiałe dla wszystkich użytkowników. Zgodnie z tym kryterium, tekst umieszczony w obrazkach powinien być dostępny w formie tekstowej lub mieć alternatywne opisy (np. za pomocą tagu „alt”), by osoby z problemami wzrokowymi mogły odczytać jego treść.

W tym artykule pokażemy, jak sprawdzić, czy obrazy zawierające tekst na stronie są dostępne i spełniają wymagania tego kryterium, bez potrzeby znajomości kodu.

Co oznacza „obrazy tekstu”?

Obrazy tekstu to wszelkie grafiki, na których znajdują się wyraźne fragmenty tekstu, np.:

Zgodnie z WCAG 2.1, jeżeli tekst jest wyłącznie obrazem, należy dostarczyć jego alternatywę, by użytkownicy, którzy nie mogą zobaczyć obrazu (np. osoby niewidome, korzystające z czytników ekranu), mieli dostęp do tej samej treści.

Jak sprawdzić zgodność z kryterium 1.4.5 bez wiedzy technicznej?

1. Analiza obrazów z tekstem na stronie

Co zrobić?
Odwiedź stronę i zidentyfikuj wszystkie obrazy, które zawierają tekst. Mogą to być:

Na co zwrócić uwagę?

Przykład błędu:
Na stronie znajduje się baner z napisem „Promocja 50%”. Jeżeli ten tekst jest częścią obrazu i nie posiada odpowiedniego alternatywnego opisu (np. „Promocja 50%”), osoby korzystające z czytników ekranu nie będą w stanie go odczytać.

2. Sprawdzenie użycia alternatywnego tekstu (tag „alt”)

Co zrobić?
Zidentyfikuj obrazy zawierające tekst, klikając prawym przyciskiem myszy na obrazku i wybierając opcję „Zbadaj” (lub „Inspect” w przypadku Chrome).

Na co zwrócić uwagę?

Przykład błędu:
Obrazek logo zawiera napis „Firma XYZ”, ale tag alt jest pusty lub zawiera nieodpowiedni opis, np. „Logo firmy” – użytkownicy nie będą wiedzieć, jaka firma jest przedstawiona na obrazie.

3. Testowanie z czytnikami ekranu

Co zrobić?
Jeśli masz dostęp do czytnika ekranu (np. NVDA, JAWS lub VoiceOver), uruchom go na stronie i sprawdź, czy teksty w obrazach są odczytywane przez program.

Na co zwrócić uwagę?

Przykład błędu:
Obrazek przycisku „Zarejestruj się” ma alternatywny tekst „Kliknij tutaj”, co nie mówi użytkownikowi, co się stanie po kliknięciu przycisku.

Co robić, aby spełnić to kryterium?

  1. Zamień obrazy tekstu na prawdziwy tekst – jeśli to możliwe, użyj prawdziwego tekstu zamiast obrazu. Możesz skorzystać z HTML i CSS, aby dodać napisy, które są w pełni dostępne.

  2. Dodaj alternatywny tekst – jeśli musisz użyć obrazu, upewnij się, że każdy obraz zawierający tekst ma poprawnie wypełniony tag alt. Alternatywny tekst powinien zawierać dokładną treść obrazu, np. dla logo firmy: „Logo firmy XYZ”.

  3. Testuj na różnych urządzeniach – upewnij się, że tekst w obrazach jest czytelny na urządzeniach mobilnych oraz że nie jest zniekształcony.

  4. Zastosuj teksty w formacie wektorowym (SVG) – jeśli potrzebujesz mieć tekst w obrazkach, rozważ użycie obrazów wektorowych (SVG), które zachowują czytelność przy powiększaniu i nie stanowią problemu dla dostępności.

Podsumowanie

Kryterium 1.4.5 – Obrazy tekstu zapewnia, że teksty zawarte w obrazach są dostępne również dla osób, które nie mogą ich zobaczyć, np. osób niewidomych lub słabowidzących. Aby spełnić to kryterium, wystarczy:

Wdrożenie tego kryterium znacząco poprawia dostępność strony internetowej, zapewniając, że każdy użytkownik, niezależnie od swoich umiejętności wzrokowych, będzie mógł zrozumieć zawartość strony.