Alternatywne teksty do obrazów

Używanie atrybutu alt do podawania tekstowych alternatyw dla obrazów

Alice Boxhall

Dave Gash

Meggin Kearney

Obrazy są ważnym elementem większości stron internetowych, a osoby niedowidzące mogą zobaczyć ich szczególnie. Aby określić, jaki typ tekstu alternatywnego powinien mieć obraz, musimy wziąć pod uwagę rolę, jaką odgrywa 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 odczyta obraz, używając 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, użyj atrybutu alt. Może to być 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 pozwala określić prosty ciąg znaków, który będzie używany zawsze wtedy, gdy obraz będzie niedostępny, np. gdy nie uda się go załadować, uzyska dostęp bota indeksującego strony lub gdy napotka czytnik ekranu.
• alt różni się od title 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ć tę samą koncepcję co obraz w tym samym kontekście.

Rozważ umieszczenie w stopce strony połączonego logo, jak na przykładach powyżej. Obraz możemy opisać dość precyzyjnie jako „Logo The Funion”.

<img class="logo" src="logo.jpg" alt="The Funion logo">

Może wydawać się kuszące, aby postawić na prostszą alternatywę „strona główna” lub „strona główna”, ale szkodzi to zarówno użytkownikom niedowidzącym, jak i niedowidzącym.

Wyobraź sobie jednak, że użytkownik czytnika ekranu chce znaleźć logo nawigacyjne na stronie. Ustawienie dla niego wartości atrybutu alt „home” (dom) może wprowadzić go 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, warto nadać obrazowi wartość alternatywną „search”. 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, czego dotyczy obraz. Obrazy dekoracyjne powinny mieć puste atrybuty alt, czyli alt="".