Atrybut alt (tekst alternatywny) w HTML to specjalny opis, który dodaje się do elementu <img>, aby opisać zawartość obrazu na stronie internetowej. Jego odpowiednie użycie jest kluczowe dla dostępności, SEO oraz doświadczenia użytkownika.
Co to jest atrybut alt?
Atrybut alt (od ang. alternative text) to tekstowy opis obrazu, umieszczany w kodzie HTML w elemencie <img>. Umożliwia przekazanie informacji o tym, co przedstawia obraz, gdy nie jest on ładowany, a także gdy korzystają z niego osoby niewidome lub słabowidzące przy użyciu czytników ekranu.
Przykład użycia –
<img src="rower.jpg" alt="Czerwony rower miejski na tle parku"> Kluczowe funkcje atrybutu alt
- Dostępność (accessibility) – opis alternatywny umożliwia osobom korzystającym z czytników ekranu zrozumienie informacji przekazanej przez grafikę. Dzięki temu strona staje się bardziej dostępna dla osób z niepełnosprawnościami wzroku.;
- Rezerwa na wypadek błędów ładowania – jeśli grafika nie może zostać wyświetlona (np. błąd pobierania obrazu), przeglądarka pokaże tekst z atrybutu
alt. Pozwala to użytkownikowi zorientować się, co powinno było się tam znaleźć.; - Optymalizacja SEO – wyszukiwarki, takie jak Google, nie „widzą” obrazów, lecz odczytują ich opisy. Tekst alternatywny pozwala zrozumieć kontekst grafiki, wpływając na pozycjonowanie strony i widoczność w wyszukiwarce grafik.;
- Lepsze doświadczenie użytkownika – przemyślane opisy mogą zwiększyć komfort korzystania z witryny, w tym jej czytelność i intuicyjność.
Zalecenia przy stosowaniu atrybutu alt
- Opisuj konkretnie zawartość obrazu – unikaj ogólników typu “obrazek” czy “grafika”.;
- Nie upychaj słów kluczowych – tekst
altpowinien być naturalny, nieprzeładowany frazami pod SEO.; - Nie powtarzaj tytułu strony czy sekcji – tekst alternatywny ma opisywać tylko to, co widać na obrazku.;
- Puste
altdla grafik dekoracyjnych – jeśli obrazek pełni wyłącznie funkcje estetyczne, powinieneś użyć pustego atrybutu.
<img src="ozdobnik.png" alt=""> Przykłady prawidłowego i błędnego stosowania
| Kod html | Przykład tekstu alternatywnego | Ocena | Wyjaśnienie |
|---|---|---|---|
<img src="buty.jpg" alt="Czarne skórzane buty damskie na obcasie"> |
Precyzyjny, opisowy tekst | ✔️ Dobry | Dokładnie opisuje, co znajduje się na zdjęciu |
<img src="buty.jpg" alt="Buty"> |
Zbyt ogólny | ❌ Błąd | Nie dostarcza wystarczającej informacji |
<img src="buty.jpg" alt="buty damskie, buty skórzane, buty obcas, najlepsze buty skórzane"> |
Wypełnienie słowami kluczowymi | ❌ Błąd | Tekst nie jest naturalny i przesycony frazami pod pozycjonowanie |
Kiedy zostawić pusty atrybut alt?
Nie należy opisywać grafik, które nie niosą wartości informacyjnej (np. tło, ozdobniki). Wtedy użyj pustego atrybutu:
<img src="linie-dekoracyjne.png" alt=""> Czytniki ekranu pominą taki obraz, dzięki czemu osoba niewidoma nie otrzyma zbędnych, mylących informacji.
Praktyczne podsumowanie
- Każdy obrazek na stronie powinien mieć przemyślany, zwięzły oraz opisowy tekst alternatywny,
- opisuj tylko to, co jest istotne z perspektywy treści strony i dla użytkownika,
- dobre teksty
altwspierają zarówno użytkowników, jak i widoczność strony w wyszukiwarce.
Stosowanie atrybutu alt to podstawa nowoczesnego, przyjaznego i profesjonalnego serwisu internetowego. Właściwie napisanie tekstów alternatywnych świadczy nie tylko o trosce o użytkownika, lecz także o znajomości zasad SEO i standardów webowych.
