Każdy developer wie, że osadzając jakikolwiek obrazek na stronie internetowej, należy określić dla niego atrybut alt
. Po co? Głównie ze względu na kwestię dostępności witryny. Czytniki ekranu dla osób niewidomych nie opiszą automagicznie treści jakiegokolwiek obrazka. One czytają właśnie atrybut alt
. Tyle podstaw.
Niby prosta prawda objawiona. Jednak często developerzy mają problem z uzupełnianiem atrybutu alt
. Załóżmy, że programista pamięta o nim i chce go uzupełnić (ufff, połowa sukcesu). Jednak nie zawsze wie, CO tam wpisać.
Generalnie atrybut alt
możemy uzupełnić na 2 sposoby:
- wpisując cokolwiek
alt="Irga wierzbolistna to krzew z czerwonymi owocami."
Czytnik ekranu czyta „irga wierzbolistna to krzew z czerwonymi owocami”. Może też podpowiedzieć, że to obrazek. - pozostawiając atrybut pusty
alt=""
Czytnik ekranu opuszcza ten obrazek, ignoruje go, nic nie czyta.
Chcecie wiedzieć, co się dzieje, kiedy w ogóle nie podajemy atrybutu alt
?
Bardzo niefajna rzecz. Czytnik ekranu czyta atrybut src
. Oczywiście to nie jest ani użyteczne, ani przyjazne dla użytkownika.
Ale hola hola. Kiedy pisać tekst, a kiedy pozostawiać atrybut pusty? Jaki w ogóle tekst wpisywać?
Tutaj mamy kilka opcji, w zależności od obrazka:
- obrazek jest czysto dekoracyjny
Na początku spróbuj wykorzystać CSS do stworzenia tego dekoratora. Jeśli nie jesteś doktorem Strange i umieszczenie obrazka jest koniecznie, pozostaw atrybutalt
pusty.
alt=""
- obrazek przedstawia tekst
Generalnie to zła praktyka, wiesz o tym? Chyba, że obrazek przedstawia logo.
Wpisz w atrybutalt
dokładnie ten sam tekst, który przedstawia obrazek.
alt="Ten sam tekst, który przedstawia obrazek, np.: irga."
- obrazek przedstawia akcję
Mowa tu o sytuacji, kiedy interakcja z obrazkiem wywołuje jakąś akcję. Być może obrazek jest ikoną (np. umożliwiającą filtrowanie produktów), a jednocześnie przyciskiem. Generalnie – obok nie ma widocznego dla czytnika elementu, który wykonywałby tę samą akcję, z tekstem, który przekazywałby tę samą informację.
Wpisz do atrybutualt
akcję, jaka stanie się po interakcji użytkownika z obrazkiem.
alt="Dodaj do koszyka, polecamy irgę wierzbolistną."
- obrazek jest czysto informacyjny i mogę opisać go jednym zdaniem
Masz dwa wyjścia:- informacja przekazywana przez obrazek NIE pojawia się w żadnym innym miejscu na stronie w postaci tekstowej – wpisz do atrybutu
alt
informację, jaką ma przekazywać obrazek
alt="Irga wierzbolistna to krzew zimozielony."
- informacja przekazywana przez obrazek pojawia się w innym miejscu na stronie w postaci tekstowej – pozostaw atrybut
alt
pusty
alt=""
- informacja przekazywana przez obrazek NIE pojawia się w żadnym innym miejscu na stronie w postaci tekstowej – wpisz do atrybutu
- obrazek jest czysto informacyjny i NIE mogę opisać go jednym zdaniem (obrazek to graf, wykres…)
Zaleca się wprowadzenie 2 opisów obrazka:- krótki – za pomocą atrybutu
alt
- długi – za pomocą atrybutów
longdesc/aria-labelledby
lub elementów
oraz
figurefigcaption
<figure> <img src="irga.jpg" alt="Irga wierzbolistna"> <figcaption>Długi opis możliwości dekoracyjnych irgi wierzbolistnej.</figcaption> </figure>
<img src="
irga.jpg
" alt="Irga wierzbolistna
" longdesc="#irga-opis">Długi opis możliwości dekoracyjnych irgi wierzbolistnej.
</p>
- krótki – za pomocą atrybutu
- obrazek to mapa….
Sytuacja, kiedy korzystasz z elementu
i za jego pomocą tworzysz mapę na bazie obrazka. Uzupełnij atrybut<map>
alt
zarówno dla elementu
, jak i każdego elementu<img>
<area>
.<img src="plan-ogrodka.png" alt="Plan ogródka" usemap="#garden"> <map name="garden"> <area shape="circle" coords="[...]" href="[...]" alt="Krzak irgi"> <area shape="circle" coords="[...]" href="[...]" alt="Inny krzak irgi"> <area shape="circle" coords="[...]" href="[...]" alt="Kolejny krzak irgi"> </map>
- mam kilka obrazków!
Sytuacja, kiedy kilka obrazków razem przekazuje jakąś informację (np. 3 gwiazdki mówią, że hotel jest 3-gwiazdkowy).
Przy jednym z obrazków wprowadź w atrybuciealt
odpowiednią informację, atrybuty pozostałych obrazków pozostaw puste.<img src="star.png" alt="Nasz hotel ma 3 irgi, tfu! gwiazdki."> <img src="star.png" alt=""> <img src="star.png" alt="">
Ot, cała filozofia.
Przygotowałam prostą ściągę, która mam nadzieję pomoże Wam prawidłowo uzupełniać atrybut alt
. Być może po prostu zachęci Was, aby w ogóle cokolwiek tam wpisywać. Jeden i drugi rezultat mnie satysfakcjonuje
POBIERAM ŚCIĄGĘ – ATRYBUT ALT – ACH TE INTERNETY!
A na koniec taki trick. Jeśli chcesz, aby w projekcie atrybut alt nigdy nie został pominięty, dodaj następujące style…
img[alt=""],
img:not([alt]) {
border: 5px dashed #c00;
}
Sprytne, co nie?
Tagi: a11y, alt, freebies, html