Przejdź do treści
Grafika przedstawiająca zdjęcie monitora wraz ze stroną wydarzenia - Światowy Dzień Dostępności Cyfrowej, 18 maja 2023, Warszawa wraz z logoPhoto by Andrzej Dąbrowski

O co chodzi w kryterium  1.4.5 WCAG

– tekst w postaci grafiki (poziom AA)?

Główną zasadą jest to, by przedstawiać treści w postaci tekstu zamiast grafiki.

Dlaczego? Tekst dużo łatwiej jest przetworzyć technologiom asystującym niż samą grafikę.

❌ Czego nie powinniśmy robić?

Udostępniać grafik, na których można zobaczyć tekst – wartość merytoryczną – bez odpowiedniego tekstu alternatywnego.

Przykład? Widnieje na naszej stronie internetowej wydarzenia – www.gaad.com.pl. Widzimy na nim grafikę przedstawiającą panoramę Warszawy wraz z tekstem, kiedy odbędzie się konferencja i jej nazwę.

Powinniśmy stworzyć alternatywę dla tego elementu, tak by w przypadku innej formy przeglądania, Użytkownik miał możliwość przeczytania tego, co jest napisane na zdjęciu, obrazku.

Możemy to zrobić na kilka sposobów:

  • opis alternatywny jeżeli jest to zdjęcie,
  • opis za pomocą ukrytej klasy CSS.

✅ Jak powinniśmy to zrobić?

W przypadku strony naszego wydarzenia, zdecydowaliśmy się na tekst alternatywny odpowiadający dokładnie ukazanemu tekstowi.

alt="GAAD - Światowy Dzień Świadomości Dostępności, 18 maja 2023, Warszawa”

Oczywiście nie wszystko jesteśmy w stanie przedstawić za pomocą tekstu. Nie możemy unikać więc wykresów czy diagramów. Pamiętajmy jednak, by wszystkie te elementy posiadały odpowiedni kontrast, opis alternatywny, a także dały się dopasować użytkownikowi do jego ustawień osobistych.

Miłego weekendu!

Małgorzata Szymczak

Małgorzata Szymczak

Accessibility Specialist & Junior Frontend Developer