Używanie atrybutu alt do podawania tekstowych alternatyw dla obrazów
Obrazy są ważnym elementem większości stron internetowych i są oczywiście szczególnym problemem dla osób słabowidzących. Aby określić, jaki typ tekstu alternatywnego powinien mieć obraz, musimy wziąć pod uwagę rolę, jaką odgrywa on na stronie. Spójrz na ten obraz.
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500.jpg">
</article>
Badanie wykazało, że 9 na 10 kotów cicho ocenia swoich właścicieli, gdy ci śpią
Na stronie znajduje się zdjęcie kota, które ilustruje artykuł o znanym zachowaniu kotów polegającym na ocenianiu innych. Czytnik ekranu ogłosi ten obraz, używając jego dosłownej nazwy, "/160204193356-01-cat-500.jpg"
. To prawda, ale nie jest to w ogóle przydatne.
Aby podać tekst alternatywny dla tego obrazu, możesz użyć atrybutu alt
, na przykład „Kot złowrogo wpatrujący się w dal.
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
Następnie czytnik ekranu może odczytać krótki opis obrazu (widoczny na czarnym pasku VoiceOver), a użytkownik może zdecydować, czy chce przejść do artykułu.
Kilka uwag dotyczących alt
:
alt
umożliwia określenie prostego ciągu znaków, który będzie używany za każdym razem, gdy obraz nie jest dostępny, na przykład gdy nie uda się go załadować lub gdy jest on wyświetlany przez bota indeksującego sieć lub przez czytnik ekranu.alt
różni się odtitle
lub dowolnego typu podpisu tym, że jest używany tylko, gdy obraz jest niedostępny.
Tworzenie przydatnego tekstu alternatywnego to trochę sztuka. Aby ciąg znaków był użytecznym tekstem alternatywnym, musi przekazywać ten sam koncept co obraz w tym samym kontekście.
Rozważ umieszczenie w stopce strony połączonego logo, jak na przykładach powyżej. Możemy dość dokładnie opisać obraz jako „Logo Funion”.
<img class="logo" src="logo.jpg" alt="The Funion logo">
Możesz być skłonny podać prostszy tekst alternatywny, np. „strona główna”, ale nie jest to dobre rozwiązanie ani dla osób niedowidzących, ani dla osób widzących.
Wyobraź sobie jednak użytkownika czytnika ekranu, który chce znaleźć logo na stronie. Ustawienie wartości atrybutu alt „home” (dom) może w takim przypadku wprowadzić użytkownika w błąd. I użytkownik pełnosprawny ma ten sam problem – musi się dowiedzieć, do czego służy kliknięcie logo witryny – tak samo jak użytkownik korzystający z czytnika ekranu.
Z drugiej strony opisywanie obrazu nie zawsze jest przydatne. Może to być na przykład obraz oka w przycisku wyszukiwania z napisem „Szukaj”. Gdyby nie było tekstu, zdecydowanie nadałbyś obrazowi wartość atrybutu alt „search” (wyszukiwanie). Ponieważ jednak mamy tekst widoczny, czytnik ekranu odczyta na głos słowo „search” (szukaj), więc identyczna wartość alt
na obrazie jest zbędna.
Wiemy jednak, że jeśli pominiemy tekst alt
, prawdopodobnie usłyszymy nazwę pliku obrazu, co jest nieprzydatne i może wprowadzać w błąd. W takim przypadku możesz użyć pustego atrybutu alt
, a czytnik ekranu całkowicie pominie obraz.
<img src="magnifying-glass.jpg" alt="">
Podsumowując, wszystkie obrazy powinny mieć atrybut alt
, ale nie muszą zawierać tekstu. Ważne obrazy powinny mieć opisowy tekst alternatywny, który zwięźle opisuje, co przedstawia obraz, a obrazy ozdobne powinny mieć puste atrybuty tekstu alternatywnego, czyli alt=""
.