Atrybut „alt” w HTML, czyli tekst alternatywny, to opis tekstowy stosowany w znacznikach obrazów (<img>) na stronach internetowych. Jego główną rolą jest opisanie zawartości obrazu w sytuacjach, gdy sam obraz nie może być wyświetlony lub gdy użytkownik korzysta z oprogramowania wspierającego dostępność, takiego jak czytniki ekranowe.
W jakim celu stosuje się atrybut „alt”?
- Dostępność (web accessibility) – dzięki atrybutowi alt osoby niewidome lub słabowidzące, korzystające z czytników ekranu, mogą zrozumieć, jaka treść znajduje się na obrazku. Tekst alternatywny jest odczytywany przez oprogramowanie, zapewniając pełny kontekst strony;
- SEO (optymalizacja pod wyszukiwarki) – roboty wyszukiwarek nie potrafią analizować samych obrazów; atrybut alt pomaga zrozumieć i indeksować ich zawartość. Prawidłowy opis wpływa na lepszą widoczność strony w wynikach wyszukiwania grafiki;
- Doświadczenie użytkownika – jeśli obraz z jakiegoś powodu się nie załaduje (błąd wczytywania, słabe połączenie), użytkownik zobaczy opis z atrybutu alt, dzięki czemu nie traci istotnej informacji.
Jak stosować atrybut „alt” – zasady i dobre praktyki
- Każdy obraz powinien mieć unikalny i precyzyjny opis (nie powielać tych samych fraz na różnych grafikach),
- tekst alt powinien jak najlepiej oddawać treść ilustracji lub jej funkcję na stronie,
- jeśli obraz ma charakter wyłącznie dekoracyjny, atrybut alt pozostaw pusty (
alt=""), aby nie wprowadzać niepotrzebnego hałasu dla czytników ekranowych.
Przykłady zastosowań
Obraz informacyjny
<img src="pies.jpg" alt="Szczeniak rasy labrador bawiący się piłką na trawie">
Ten opis pozwala użytkownikowi zrozumieć, co znajduje się na zdjęciu, nawet bez jego oglądania.
Ikona nawigacyjna
<img src="szukaj.png" alt="Wyszukiwarka">
Czytnik ekranu wyświetli wtedy komunikat: „Wyszukiwarka”.
Obraz dekoracyjny
<img src="ozdobnik.png" alt="">
Brak tekstu alternatywnego sprawi, że czytniki ekranowe pominą tę grafikę jako nieistotną dla treści strony.
Najczęstsze błędy przy używaniu atrybutu „alt”
- pozostawianie pustego alt dla istotnych obrazów (utrata istotnej treści dla osób z niepełnosprawnością wzroku),
- używanie zbyt ogólnych opisów, np. „obrazek”, „grafika”, co nie wnosi żadnej wartości informacyjnej,
- zbyt długie lub zbyt krótkie opisy – kluczem jest zwięzłość i precyzja.
Różnica między „alt” a „title”
- Atrybut alt służy do opisywania zawartości obrazu i jest odczytywany przez czytniki ekranowe oraz wyświetlany w miejsce niedostępnego obrazu,
- a trybut title pojawia się po najechaniu kursorem na obraz, nie wpływa na SEO i nie pełni roli dostępnościowej.
Podsumowanie
Poprawne stosowanie atrybutu „alt” jest kluczowe zarówno z punktu widzenia dostępności, jak i SEO. Każdy obraz zamieszczony na stronie powinien posiadać przemyślany i unikalny opis alternatywny, dostosowany do jego treści i funkcji na stronie. Dzięki temu strona będzie bardziej dostępna, przyjazna użytkownikom i korzystna z punktu widzenia widoczności w wyszukiwarkach.
