Alternatywne teksty do obrazów

Używanie atrybutu alt do podawania alternatywnych tekstów tekstowych

Alice Boxhall

Dave Gash

Meggin Kearney

Obrazy są ważnym elementem większości stron internetowych i z pewnością przykują uwagę użytkowników niedowidzących. Musimy zastanowić się, jaką rolę odgrywa obraz na stronie, aby ustalić rodzaj alternatywnej treści tekstowej. 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 pokazuje, że 9 na 10 kotów po cichu ocenia swoich właścicieli podczas snu

Na stronie znajduje się zdjęcie kota ilustrujące artykuł na temat dobrze znanego sposobu osądzania kotów. Czytnik ekranu odczyta ten obraz, używając jego dosłownej nazwy "/160204193356-01-cat-500.jpg". Tak, to prawda, ale zupełnie nieprzydatna.

Możesz użyć atrybutu alt, aby umieścić przydatny tekst alternatywny dla tego obrazu, np. „Kot groźnie patrzący w przestrzeń”.

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

Następnie czytnik ekranu może wypowiedzieć zwięzły opis obrazu (widoczny na czarnym pasku VoiceOver), a użytkownik może zdecydować, czy przejść do artykułu.

Kilka komentarzy na temat alt:

• alt pozwala określić prosty ciąg znaków, który będzie używany, gdy obraz będzie niedostępny, np. gdy obraz nie zostanie wczytany, zostanie otwarty przez robota indeksującego sieć lub zostanie potraktowany przez czytnik ekranu.
• Parametr alt różni się od title, czyli jakiegokolwiek rodzaju podpisu, tym, że jest używany tylko wtedy, gdy obraz jest niedostępny.

Pisanie przydatnego tekstu alternatywnego to nie lada wyzwanie. Aby ciąg znaków mógł być użyteczną alternatywą tekstową, musi przekazać to samo znaczenie co obraz, w tym samym kontekście.

Rozważmy obraz logo, do którego prowadzi link w banerze głównym strony, jak w przykładzie powyżej. Obraz możemy dość trafnie opisać jako „logo The Funion”.

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

Prostsza, tekstowa alternatywa dla słów „główna” czy „strona główna” może być kusząca, ale jest to niekorzystne zarówno dla użytkowników niedowidzących, jak i niedowidzących.

Wyobraź sobie jednak, że użytkownik czytnika ekranu chce znaleźć logo mastheada na stronie. Nadanie mu wartości alternatywnej „home” (główna) może w ogóle nie przeszkadzać. A użytkownik widzący musi zmierzyć się z tym samym wyzwaniem, jakie otrzymuje kliknięcie logo witryny, jako użytkownik czytnika ekranu.

Z drugiej strony opisanie obrazu nie zawsze jest przydatne. Wyobraź sobie np. obraz lupy na przycisku wyszukiwania z tekstem „Szukaj”. Gdyby tekstu nie było, obraz powinien mieć wartość alternatywną „search”. Ponieważ jednak mamy widoczny tekst, czytnik ekranu odczyta słowo „szukaj” i odczyta na głos, więc identyczna wartość alt na obrazie jest zbędna.

Wiemy jednak, że jeśli pominiemy tekst alt, prawdopodobnie usłyszysz nazwę pliku obrazu, która jest bezużyteczna 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 wszystkie muszą zawierać tekst. Ważne obrazy powinny mieć opisowy tekst alternatywny, który zwięźle opisuje obraz, a obrazy dekoracyjne powinny mieć puste atrybuty alt, czyli alt="".