Dostępność obrazów i ilustracji na stronie internetowejPrzeczytasz w 2 min
Niemal każdą stronę internetową wyróżnia to, że posiada ona dużą ilość różnego rodzaju obrazów, zdjęć i ilustracji.
Mogą one pełnić jedną z następującą ról:
- Informacyjną
- Wizerunkową
- Dekoracyjną
Rola informacyjna ilustracji
Ilustracje pełniące rolę informacyjną to wszelkiego rodzaju tabele, wykresy itp., które zostały przedstawione nie jako tekst, ale jako ilustracja. To właśnie tego typu grafiki aby spełniać zasady dostępności powinny zawierać opis alternatywny. który bardzo dokładnie opisywałby to co na nich się znajduje. Służy do tego atrybut alt. Należy jednak zaznaczyć, że najlepiej było by gdyby ilustracje posiadające tekst i liczby w ogólne się nie pojawiały a były przedstawione w naturalnej. Zdarzają się jednak sytuacje, że dane tego typu ciężko było by przedstawić w innej formie niż graficzna.
Poniżej znajduje się przykład takiej ilustracji:
Źródło: https://www1.grupappmsa.pl/pl/p/TESA-50600-Tasma-poliestrowa-zielona/1426
Dane techniczne produktu zostały przedstawione w formie ilustracji. Ilustracja nie posiada jednak opisu alternatywnego więc osoba z niepełnosprawnością wzrokową nie jest w stanie zapoznać się z danymi.
W tym przypadku są to bardzo istotne dane więc opis alternatywny powinien zawierać dokładnie to co zostało przedstawione na ilustracji ale w formie tekstowej.
Przykład:
<img src="adres_obrazka.jpg" alt="Ilustracja przedstawia szczegółowe dane produktu. Dane techniczne. Materiał nośnika: PET, Grubość całkowita 80 mikrometrów (...)"/>
Rola wizerunkowa ilustracji
Rolę wizerunkową pełnią przede wszystkim wszelkiego rodzaju logotypy, ,symbole, herby itp.
Źródło: Allegro
Co do zasady nie ma konieczności przedstawiania dokładnego opisu tego co zostało przedstawione na grafikach tego typu. Wystarczy w opisie alternatywnym umieścić informacje, że jest to logo danej firmy.
Przykład:
<img src="adres_obrazka.jpg" alt="Ilustracja przedstawia logo firmy Allegro"/>
Rola dekoracyjna ilustracji
Są to wszelkiego rodzaju grafiki, których celem jest upiększenie strony i sprawienie, że będzie ona atrakcyjna wizualnie. Może to być tło, tekstura lub ilustracja, która nie przedstawia żadnych istotnych treści dla użytkownika.
Źródło: https://www.fotezja.pl/jak-nalozyc-teksture-na-zdjecie
Przykład:
<img src="adres_obrazka.jpg" alt=""/>
W takim przypadku atrybut alt zostaje pusty.
Polecane wideo

Jestem absolwentem Uniwersytetu Morskiego w Gdyni. Zdobyłem tytuł magistra zarządzania na kierunku kierunek Biznes Elektroniczny. Od 2014 roku jestem związany z dostępnością stron internetowych. Wykonałem audyty dla takich podmiotów jak Ministerstwo Edukacji, Ośrodek Rozwoju Edukacji, Urząd Miasta Podkowa Leśna, Urząd Gminy Kosakowo. Uczestniczyłem w ponad 30 projektach związanych z dostępnością oraz ukończyłem kilka szkoleń z zakresu dostępności.
Polecane artykuły z tej kategorii:
- WordPress 6.0 wprowadza ulepszenia dotyczące dostępności
- Dlaczego warto wyróżnić odnośniki w treści?
- Czym różnią się napisy dialogowe od napisów dla niesłyszących?
- Które materiały filmowe powinny posiadać napisy?
- Raport dostępności za rok 2021
- Dodawanie opisu alternatywnego dla ilustracji w WordPressie
- Dostępność obrazów i ilustracji na stronie internetowej
- Urządzenia i aplikacje przyjazne osobom niepełnosprawnym.
- Transkrypcja dla filmów – dostępność filmów
- Dostępność sprzętu RTV AGD dla osób niepełnosprawnych