Atrybut Alt

Kasia Bielawska
>
Kasia Bielawska

Atrybut alt – co to jest i jak go stosować?

Atrybut alt to tekstowa alternatywa przypisana do obrazu w kodzie HTML. Najczęściej występuje w elemencie <img> i opisuje znaczenie lub funkcję grafiki wtedy, gdy użytkownik nie może jej zobaczyć. Ma znaczenie dla dostępności cyfrowej, a jednocześnie pomaga wyszukiwarkom lepiej zrozumieć temat obrazu.

Dobrze napisany alt nie jest podpisem zdjęcia ani miejscem na listę fraz SEO. Powinien przekazać tę informację, którą użytkownik straciłby po usunięciu obrazu z kontekstu strony.

Jak działa atrybut alt?

Przykład: <img src="buty.jpg" alt="Czarne skórzane półbuty męskie">. Jeśli grafika się nie wyświetli albo użytkownik korzysta z czytnika ekranu, tekst alternatywny może zastąpić informację przekazywaną przez obraz. W HTML warto więc traktować alt jako część znaczenia treści, a nie jako techniczny dodatek.

Treść alt zależy od celu obrazu. Zdjęcie produktu opisuje produkt i jego cechy widoczne na fotografii. Wykres powinien przekazywać najważniejszą informację, a przy bardziej złożonych danych potrzebny może być dodatkowy opis w treści strony. Jeśli obraz pełni funkcję przycisku lub linku, alt powinien wyjaśniać działanie, np. Pobierz raport, zamiast opisywać wygląd ikony.

Jeżeli grafika jest wyłącznie dekoracyjna i nie przekazuje informacji, zastosuj alt="". Dzięki temu czytnik ekranu może ją pominąć. Nie jest to to samo co brak atrybutu alt. Pusty atrybut jest świadomą informacją, że grafika nie wnosi treści wymagającej odczytania.

Jak napisać dobry tekst alternatywny?

Dobry alt jest konkretny, zwięzły i dopasowany do kontekstu. Nie ma jednej obowiązkowej liczby znaków. Najważniejsze jest przekazanie potrzebnej informacji bez powtarzania treści znajdującej się tuż obok. Atrybut alt powinien odpowiadać na proste pytanie: co użytkownik musi wiedzieć, jeśli nie widzi obrazu? Unikaj upychania słów kluczowych – fraza może znaleźć się w alt, gdy naturalnie opisuje obraz, ale nie powinna być dodawana na siłę.

Atrybut alt a SEO i dostępność

Atrybut alt jest ważnym elementem dostępności. Dzięki niemu osoby korzystające z czytników ekranu mogą otrzymać tekstowy odpowiednik informacji przedstawionej na grafice. Wiąże się to z zasadami WCAG 2.2 dotyczącymi alternatyw dla treści nietekstowych.

Alt może też wspierać SEO obrazów, ponieważ pomaga wyszukiwarce interpretować zawartość grafiki razem z otaczającym tekstem i innymi sygnałami strony. Nie daje jednak gwarancji wyższej pozycji.

FAQ – atrybut alt

Element img powinien mieć atrybut alt, ale grafika czysto dekoracyjna powinna otrzymać pustą wartość alt=””. Dzięki temu technologie asystujące mogą ją pominąć.

Nie istnieje jedna obowiązkowa liczba znaków. Alt powinien być możliwie zwięzły, ale zawierać informacje potrzebne do zrozumienia znaczenia lub funkcji obrazu.

Może wspierać SEO obrazów, ponieważ dostarcza wyszukiwarce informacji o ich zawartości i kontekście. Nie należy jednak traktować go jako sposobu na sztuczne umieszczanie słów kluczowych.

Nie. Alt jest tekstową alternatywą obrazu, natomiast title może dostarczać dodatkową informację. Atrybut title nie zastępuje poprawnego tekstu alternatywnego.

Opisz przede wszystkim działanie elementu, np. Pobierz raport albo Przejdź do koszyka, zamiast ograniczać się do wyglądu grafiki.

Te hasła mogą Cię zainteresować!

SEO i SEM