Co oznacza `alt` w HTML?

Atrybut alt w HTML to tzw. tekst alternatywny (ang. alternative text), który służy do opisywania zawartości plików graficznych na stronach internetowych. Umieszcza się go wewnątrz znacznika <img>, aby zapewnić dostępność oraz wsparcie pozycjonowania SEO. Tekst opisowy pojawia się, gdy obraz nie może być wyświetlony, oraz jest odczytywany przez czytniki ekranów używane przez osoby niewidome i niedowidzące.

Jak działa atrybut alt?

• Opis alternatywny – atrybut alt zawiera krótki, precyzyjny opis tego, co przedstawia obraz lub jaką pełni funkcję; dzięki niemu osoby, które nie widzą grafiki, uzyskują informację o jej zawartości lub znaczeniu;
• Pomoc przy błędach ładowania – gdy obraz nie zostanie załadowany (np. z powodu błędnego adresu lub wolnego połączenia), zamiast grafiki wyświetla się tekst z atrybutu alt;
• Dostępność (WCAG) – jest to podstawowy element budowania dostępnych stron – ułatwia korzystanie z treści wszystkim użytkownikom niezależnie od ich możliwości fizycznych czy używanego sprzętu;
• Wspiera SEO – roboty wyszukiwarek nie „widzą” obrazów tak jak człowiek, dlatego do identyfikowania zawartości grafiki wykorzystują tekst alternatywny; dobrze opisane obrazy wspierają pozycjonowanie strony w wynikach wyszukiwania.

Przykład użycia atrybutu alt w kodzie HTML

<img src="pies.jpg" alt="Siedzący pies rasy golden retriever na trawie">

W powyższym przykładzie:

• Plik zdjęcia ma nazwę „pies.jpg”,
• jeśli obrazek się nie załaduje, użytkownik zobaczy napis: „Siedzący pies rasy golden retriever na trawie”,
• czytnik ekranu odczyta ten opis osobie niewidomej,
• wyszukiwarka internetowa zindeksuje obraz zgodnie z opisem.

Zasady pisania dobrych tekstów alternatywnych

Aby atrybut alt dobrze spełniał swoje zadanie, warto przestrzegać kilku podstawowych reguł:

• Opisuj, co widać – tekst powinien trafnie i konkretnie odzwierciedlać zawartość grafiki;
• Unikaj zbędnych fraz – nie zaczynaj od słów typu „grafika”, „zdjęcie”, „obrazek” – czytniki ekranów już rozpoznają typ zawartości na podstawie znacznika;
• Dostosuj do funkcji – jeśli grafika jest dekoracyjna (nie wnosi wartości informacyjnej), wpisz alt=""; taki pusty atrybut poinformuje czytniki, by pominąć ten element;
• Używaj słów kluczowych (z SEO) – gdy ma to znaczenie pod kątem pozycjonowania, uwzględnij istotne frazy, ale bez upychania ich na siłę i z zachowaniem sensu opisu.

Przykłady zastosowań

1. Obraz informacyjny –

<img src="wykres-sprzedazy.png" alt="Wykres kołowy przedstawiający udział produktów A, B, i C w sprzedaży w 2024 roku">

2. Logo firmy –

<img src="logo-firmy.png" alt="Logo firmy XYZ">

3. Dekoracyjna grafika (nieinformacyjna) –

<img src="ozdobna-linia.png" alt="">

4. Przycisk graficzny z ikoną –

<img src="ikona-koszyk.png" alt="Dodaj do koszyka">

Dobre praktyki

• Każdy obraz powinien mieć atrybut alt.
• Opisy powinny być unikalne i niezbyt długie (zazwyczaj do kilkudziesięciu znaków).
• Nie należy mylić atrybutu alt z atrybutem title, który służy do wyświetlania podpowiedzi po najechaniu myszą – nie wpływa on na dostępność ani SEO.

Podsumowanie

Atrybut alt to kluczowy element poprawiający dostępność stron internetowych i wspierający ich widoczność w wyszukiwarkach. Zapewnienie wszystkim użytkownikom, w tym osobom z niepełnosprawnościami, pełnego dostępu do treści Twojej strony, jest zarówno dobrym standardem, jak i korzystnym działaniem pod kątem pozycjonowania.