A11Y: atrybut alt + ściąga do pobrania

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 atrybut alt pusty.
alt=""

• obrazek przedstawia tekst

Generalnie to zła praktyka, wiesz o tym? Chyba, że obrazek przedstawia logo.
Wpisz w atrybut alt 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 atrybutu alt 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:

1. 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."

2. informacja przekazywana przez obrazek pojawia się w innym miejscu na stronie w postaci tekstowej – pozostaw atrybut alt pusty
alt=""

• obrazek jest czysto informacyjny i NIE mogę opisać go jednym zdaniem (obrazek to graf, wykres…)

Zaleca się wprowadzenie 2 opisów obrazka:

1. krótki – za pomocą atrybutu alt
2. długi – za pomocą atrybutów longdesc/aria-labelledby lub elementów figure oraz figcaption

<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">
<p id="irga-opis">Długi opis możliwości dekoracyjnych irgi wierzbolistnej.</p>

• obrazek to mapa….

Sytuacja, kiedy korzystasz z elementu <map> i za jego pomocą tworzysz mapę na bazie obrazka. Uzupełnij atrybut alt zarówno dla elementu <img>, jak i każdego elementu <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 atrybucie alt 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?