Do czego służy atrybut ALT?
Atrybut alt jest elementem języka HTML stosowanym między innymi w znaczniku img, który służy do umieszczania obrazów na stronach internetowych.
Jego zadaniem jest przekazanie tekstowej alternatywy dla informacji lub funkcji obrazu. Dzięki temu użytkownik, który nie widzi grafiki, może zrozumieć jej znaczenie albo dowiedzieć się, do czego służy.
Tekst alternatywny jest szczególnie istotny dla osób korzystających z czytników ekranu. Może być także prezentowany w sytuacji, gdy obraz nie zostanie poprawnie załadowany.
Wyszukiwarki również analizują zawartość atrybutu alt. Google wykorzystuje ten tekst wraz z informacjami otaczającymi obraz i technologiami rozpoznawania obrazu do lepszego rozumienia jego tematyki.
Jak dodać atrybut ALT w HTML?
Atrybut alt umieszcza się wewnątrz elementu img jako tekst przypisany do obrazu.
Przykładowy kod:
<img src="biurko-elektryczne.jpg" alt="Biurko elektryczne z regulacją wysokości i drewnianym blatem">W tym przykładzie src wskazuje plik graficzny, natomiast alt zawiera alternatywny opis informacji przedstawionej na zdjęciu.
Wartość atrybutu nie musi być dosłownym opisem wszystkich widocznych szczegółów. Powinna przekazywać to, co jest istotne z punktu widzenia funkcji grafiki w danym kontekście.
Jak prawidłowo pisać teksty ALT?
Poprawny tekst alternatywny powinien być zwięzły, konkretny i związany z rzeczywistą zawartością obrazu.
Nie ma jednego obowiązkowego limitu znaków dla wszystkich tekstów ALT. Ich długość powinna wynikać z ilości informacji potrzebnej do zrozumienia grafiki.
Przykładowo zdjęcie produktu może mieć opis „Czarne skórzane półbuty męskie z brązową podeszwą”, jeżeli właśnie te cechy są widoczne i istotne dla użytkownika.
Nie należy natomiast wykorzystywać atrybutu alt do umieszczania długich ciągów słów kluczowych niezwiązanych z obrazem.
W przypadku zwykłych zdjęć nie ma też potrzeby rozpoczynania każdego tekstu od wyrażeń „zdjęcie przedstawia” lub „obraz pokazuje”. Czytnik ekranu zwykle informuje użytkownika o rodzaju elementu.
Różne zastosowania ALT w zależności od rodzaju obrazu
Zdjęcia i grafiki informacyjne
Jeżeli obraz przekazuje informację istotną dla zrozumienia strony, powinien posiadać tekstową alternatywę opisującą jego znaczenie.
Przykładem może być zdjęcie produktu przedstawiające konkretny kolor lub wariant wyposażenia.
Grafiki dekoracyjne
Obrazy pełniące wyłącznie funkcję ozdobną powinny mieć pusty atrybut alt.
Przykład:
<img src="dekoracja.svg" alt="">Pusta wartość informuje technologie wspomagające, że grafika nie wnosi informacji wymagającej odczytania.
Nie należy mylić pustego alt z brakiem atrybutu. Pominięcie alt może spowodować, że niektóre czytniki ekranu odczytają nazwę pliku albo adres grafiki.
Obrazy pełniące funkcję linku
Jeżeli grafika jest jedyną zawartością klikalnego odnośnika, tekst alternatywny powinien przede wszystkim informować o celu linku.
Przykładowo logo prowadzące do strony głównej może posiadać alt „Crafteo Digital – strona główna”.
Jeżeli ten sam link zawiera już odpowiedni tekst obok grafiki, jej alt może pozostać pusty, aby uniknąć powtarzania informacji.
Wykresy i złożone ilustracje
W przypadku wykresów krótki tekst ALT może określać rodzaj przedstawionych danych i najważniejszy wniosek.
Jeśli grafika zawiera wiele wartości liczbowych, sama krótka alternatywa może być niewystarczająca. Szczegółowe informacje powinny być dostępne również w treści strony, na przykład w formie tabeli lub rozbudowanego opisu.
Jak ALT wpływa na pozycjonowanie obrazów?
Google wykorzystuje atrybut alt jako jedno ze źródeł informacji o zawartości grafiki. Może to pomagać w interpretowaniu obrazów i dopasowywaniu ich do zapytań użytkowników, w tym w Google Grafika.
Nie oznacza to jednak, że sam tekst alternatywny decyduje o pozycji zdjęcia. Istotne mogą być również kontekst strony, jej zawartość, nazwa pliku, podpisy oraz inne sygnały.
Warto stosować odpowiednie słowa kluczowe wtedy, gdy rzeczywiście opisują grafikę. Wypełnianie atrybutów ALT przypadkowymi frazami lub ich mechanicznym powtarzaniem jest niezgodne z zaleceniami Google.
ALT a title – czym się różnią?
Atrybut alt zapewnia alternatywę tekstową dla obrazu, natomiast title może przekazywać dodatkowe informacje o elemencie.
W niektórych przeglądarkach zawartość title jest prezentowana po najechaniu kursorem. Takie zachowanie nie jest jednak uniwersalnym ani wystarczającym rozwiązaniem dostępnościowym.
Atrybut title nie powinien zastępować poprawnego alt. Jeżeli obraz wymaga alternatywy tekstowej, należy umieścić ją we właściwym atrybucie.
Najczęstsze błędy przy stosowaniu ALT
Jednym z najczęstszych problemów jest pozostawianie obrazów informacyjnych bez odpowiedniej alternatywy tekstowej.
Do innych błędów należą:
- powtarzanie identycznego tekstu ALT przy obrazach przedstawiających różne informacje,
- stosowanie samych słów kluczowych bez opisu grafiki,
- nadmiernie rozbudowane opisy nieistotnych szczegółów,
- nadawanie opisów grafikom czysto dekoracyjnym,
- stosowanie pustego ALT przy obrazach będących jedynym oznaczeniem funkcji przycisku lub linku,
- zakładanie, że tekst ALT zawsze musi zawierać główną frazę SEO podstrony.
Dobór tekstu alternatywnego powinien wynikać przede wszystkim z funkcji obrazu. To samo zdjęcie może wymagać innego opisu w zależności od tego, czy jest ilustracją artykułu, zdjęciem produktowym czy klikalnym elementem nawigacji.
Jak sprawdzić poprawność atrybutów ALT?
Kontrolę można przeprowadzić ręcznie, analizując kod HTML i sprawdzając, jak obrazy są interpretowane przez technologie wspomagające.
Pomocne są również narzędzia do testowania dostępności oraz crawlery SEO, które potrafią wykrywać obrazy pozbawione atrybutu alt.
Automatyczne wykrycie brakującego lub pustego ALT nie wystarcza jednak do pełnej oceny jakości. Narzędzie może wskazać problem techniczny, ale nie zawsze potrafi ustalić, czy obraz pełni funkcję dekoracyjną i jaki opis będzie najbardziej przydatny użytkownikowi.
Najlepszą praktyką jest więc łączenie automatycznej kontroli z oceną kontekstu obrazu.