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:
- Zmiany w WCAG 2.2 w porównaniu do 2.1
- Spotkanie z cyklu: A11y – Accessibility – Dostępność
- Skarga na brak dostępności
- Dostosowanie strony internetowej Centrum Medycznego ALMA MED do WCAG 2.1 AA
- Szkolenie dla Centrum Wsparcia i Rozwoju UPP
- Audyt dostępności standard WCAG 2.1
- Doradztwo do spraw dostępności
- Konsultacje
- Dostępność dla szkół – Akademia Teatralna w Warszawie
- Dodawanie Tłumacza na język migowy do filmu