Jak dodać tekst alternatywny do obrazu (alt text)

Czym jest atrybut alt?

Tekst alternatywny (atrybut alt) to <img> tagu i opisuje treść obrazu za pomocą słów: <img src="..." alt="...">. Gdy obraz nie może zostać załadowany (z powodu wolnego połączenia lub nieprawidłowej ścieżki do pliku), tekst alternatywny jest wyświetlany w przeglądarce zamiast niego, jest odczytywany na głos przez czytniki ekranu dla użytkowników z dysfunkcją wzroku oraz pozwala wyszukiwarkom zrozumieć, co przedstawia obraz, ponieważ Google nie „widzi” obrazu na poziomie pikseli, a opiera się głównie na otaczającym go tekście i atrybucie alt.

Tekst alternatywny służy zupełnie innemu celowi niż nazwa pliku obrazu (np. IMG_2031.jpg): nazwa pliku jest przeznaczona dla serwera/systemu plików, natomiast tekst alternatywny służy do przekazywania znaczenia. Nie należy ich mylić.

Tekst alternatywny różni się również od podpisu (caption) wyświetlanego pod obrazem: podpis jest tekstem widocznym dla wszystkich użytkowników na stronie, natomiast tekst alternatywny w normalnych warunkach jest niewidoczny i pojawia się tylko wtedy, gdy obraz nie może zostać załadowany lub gdy jest odczytywany przez czytnik ekranu. To rozróżnienie jest często mylone.

W niektórych środowiskach programistycznych pozostawienie atrybutu alt pustego może przejść walidację HTML, jednak ta techniczna poprawność nie oznacza, że tekst alternatywny ma rzeczywisty sens; narzędzie walidacyjne sprawdza jedynie, czy atrybut istnieje, a nie jakość jego treści.

Dlaczego to jest ważne?

Tekst alternatywny ma kluczowe znaczenie zarówno z punktu widzenia dostępności, jak i wizualnego SEO. Użytkownicy z dysfunkcją wzroku, poruszając się po stronie za pomocą oprogramowania do odczytu ekranu, poznają zawartość obrazu na podstawie tekstu alternatywnego; jeśli tekst ten jest nieobecny, czytnik ekranu zazwyczaj odczytuje jedynie słowo „obraz” lub nazwę pliku, co prowadzi do utraty informacji. W niektórych krajach dostępność może być również wymogiem prawnym.

Z kolei wyszukiwarki, ponieważ nie „widzą” bezpośrednio treści obrazów, opierają się na tekście alternatywnym przy ustalaniu pozycji strony w wynikach wyszukiwania graficznego (Google Grafika). Dodanie odpowiednich tekstów alternatywnych do zdjęć produktów w witrynach e-commerce może zwiększyć dodatkowy ruch pochodzący z Google Grafiki. Brak tekstu alternatywnego negatywnie wpływa zarówno na komfort użytkowania, jak i na ruch z wyszukiwania graficznego.

Gdy obraz ładuje się powoli przy słabym połączeniu lub w ogóle się nie ładuje, tekst alternatywny jest jedynym źródłem informacji pozwalającym użytkownikowi zrozumieć, czego powinien się spodziewać w danym miejscu; to sprawia, że tekst alternatywny jest ważny nie tylko z punktu widzenia SEO, ale także ogólnej użyteczności.

Jak to naprawić?

• Do każdego znaczącego obrazu należy dodać krótki, opisowy tekst alternatywny.
• W przypadku obrazów służących wyłącznie celom dekoracyjnym (np. elementy tła) alt="" , aby czytnik ekranu mógł pominąć ten element; różni się to od całkowitego pominięcia atrybutu alt.
• Słowo kluczowe należy używać tylko wtedy, gdy rzeczywiście opisuje obraz, i to w naturalny sposób.
• Tekst alternatywny powinien być krótki i jasny; unikaj niepotrzebnie długich zdań – zazwyczaj wystarczy kilka słów.
• W przypadku zdjęć produktów należy podać nazwę produktu oraz jego istotne cechy (takie jak kolor, model, kąt ujęcia).
• Jeśli korzystasz z funkcji zbiorczego przesyłania w systemie zarządzania treścią, zamiast automatycznego wypełniania tekstu alternatywnego, twórz go w miarę możliwości ręcznie lub przynajmniej za pomocą sensownego szablonu opartego na nazwie produktu.
• W przypadku złożonych obrazów, takich jak infografiki lub tabele, warto rozważyć umieszczenie szczegółów, które nie mieszczą się w opisie, w postaci zwykłego tekstu bezpośrednio pod obrazem.

Przykład

<img src="kirmizi-spor-ayakkabi.jpg" alt="Kırmızı renkli erkek spor ayakkabısı, yan görünüm">

Zły przykład: <img src="IMG_2031.jpg" alt="resim"> — ani nazwa pliku, ani tekst alternatywny nie zawierają żadnych informacji na temat treści obrazu. Kolejny zły przykład: alt="ayakkabı ayakkabı spor ayakkabı ucuz ayakkabı indirimli ayakkabı satın al" — zamiast opisać pojedynczy obraz, służy on jedynie wypełnieniu treści słowami kluczowymi, co dla użytkownika czytnika ekranu stanowi bezsensowne i nużące doświadczenie.

Często popełniane błędy

• Całkowite pominięcie atrybutu alt (w przypadku obrazów, które nie pełnią funkcji dekoracyjnej).
• Używanie jako tekstu alternatywnego bezsensownych nazw plików, takich jak „obraz1.jpg” czy „IMG_2023”.
• Wpisywanie wielu słów kluczowych pod rząd w tekście alternatywnym (np. „buty, buty sportowe, tanie buty, buty w promocji”).
• Powtarzanie tego samego ogólnego tekstu alternatywnego we wszystkich obrazach.
• Raport Seoraporu.co wylicza pojedynczo wszystkie brakujące opisy alt; w przypadku dużych witryn jest to zazwyczaj problem wymagający zbiorczej korekty w szablonie zarządzania produktami/obrazami.