Czym właściwie jest atrybut alt
Z technicznego punktu widzenia atrybut alt to opcjonalny atrybut tagu HTML img, który przyjmuje wartość w postaci ciągu znaków. Kod typowego obrazu z prawidłowo zaimplementowanym atrybutem alt wygląda następująco:
<img src="buty-nike-air-max-90-biale.jpg" alt="Białe buty Nike Air Max 90 z czarnym akcentem na pięcie">.Ten prosty fragment HTML zawiera dwa kluczowe elementy — adres pliku obrazu (atrybut src) oraz jego opis tekstowy (atrybut alt).
Z perspektywy działania przeglądarki internetowej atrybut alt jest wykorzystywany w dwóch sytuacjach. Standardowo, gdy obraz ładuje się poprawnie, atrybut alt pozostaje niewidoczny dla użytkowników korzystających z pełnowartościowych przeglądarek graficznych — widzą oni jedynie sam obraz. W sytuacji, w której obraz nie może zostać wyświetlony (uszkodzony plik, błąd serwera, blokada w sieci firmowej, oszczędność danych mobilnych), przeglądarka wyświetla zamiast obrazu właśnie tekst z atrybutu alt — dzięki czemu użytkownik dowiaduje się, jaką informację miał przekazywać brakujący element.
Najważniejsze zastosowanie atrybutu alt to jednak dostępność dla osób z niepełnosprawnościami. Osoby niewidome i niedowidzące korzystają ze specjalnych programów nazywanych czytnikami ekranu (na przykład JAWS, NVDA, VoiceOver), które „odczytują” zawartość stron internetowych głosem syntetycznym. Czytniki ekranu nie potrafią same „zobaczyć” co przedstawia obraz — odczytują jedynie zawartość atrybutu alt jako tekstowy ekwiwalent obrazu. Strona bez atrybutów alt w obrazach jest dla osoby niewidomej praktycznie niedostępna w wymiarze wizualnym — czytnik mówi jedynie „grafika” lub „obraz” bez żadnej informacji o tym, co miał on przekazywać.
Atrybut alt a wytyczne WCAG
Wytyczne WCAG, opracowywane przez W3C jako międzynarodowy standard dostępności treści internetowych, wprost wymagają stosowania tekstów alternatywnych dla wszystkich istotnych obrazów. Wytyczna WCAG 1.1.1 brzmi: „Treści nietekstowe — wszystkie treści nietekstowe prezentowane użytkownikowi mają tekst alternatywny, który służy temu samemu celowi”.
W praktyce oznacza to, że każdy obraz przekazujący informację, pełniący funkcję nawigacyjną lub zawierający tekst musi posiadać odpowiedni atrybut alt opisujący jego zawartość. Wyjątkiem są obrazy czysto dekoracyjne, niewnoszące żadnej istotnej informacji — w ich przypadku stosuje się pusty atrybut alt (alt=””), który sygnalizuje czytnikom ekranu, by pominęły element, zamiast informować użytkownika o nieistotnej grafice.
Polska Ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych z 4 kwietnia 2019 roku nakłada obowiązek zapewnienia dostępności WCAG 2.1 na poziomie AA dla wszystkich serwisów instytucji publicznych. Ustawa o zapewnianiu dostępności osobom ze szczególnymi potrzebami z 19 lipca 2019 roku rozszerza te wymagania na inne kategorie podmiotów. Z perspektywy biznesowej oznacza to, że szczególnie firmy świadczące usługi dla podmiotów publicznych lub współpracujące z administracją muszą zapewnić zgodność z WCAG — w tym prawidłowe atrybuty alt na wszystkich obrazach. Dla firm prywatnych zgodność z WCAG nie jest jeszcze prawnym obowiązkiem, ale staje się coraz bardziej oczekiwanym standardem branżowym, szczególnie w kontekście oczekiwanej z 2025 roku europejskiej dyrektywy o dostępności.
Atrybut alt z perspektywy SEO
Z perspektywy pozycjonowania stron atrybut alt pełni kilka istotnych funkcji. Po pierwsze, dostarcza wyszukiwarce Google informacji o tematyce obrazu — co bezpośrednio wpływa na pozycję strony w wynikach wyszukiwania grafik. Sklep internetowy ze sprawnie opisanymi atrybutami alt zdjęć produktów regularnie pojawia się w wynikach Google Images dla użytkowników szukających konkretnych produktów wizualnie — co generuje dodatkowy strumień ruchu organicznego niedostępny dla serwisów ignorujących ten obszar.
Po drugie, atrybut alt pomaga Google zrozumieć kontekst całej strony. Jeśli na stronie produktu znajdują się grafiki z prawidłowymi atrybutami alt opisującymi konkretne cechy produktu — „buty do biegania z amortyzacją żelową”, „lekkie buty męskie do treningu”, „buty z oddychającą siatką w cholewce” — wyszukiwarka otrzymuje bogaty obraz tematyki strony wykraczający poza sam tekst opisu produktu.
Po trzecie, atrybut alt jest jednym z miejsc, w których można umieścić frazę kluczową w sposób całkowicie naturalny i pożądany przez algorytmy. W odróżnieniu od sztucznego upychania słów kluczowych w treści, opisanie obrazu prawdziwymi słowami nieuchronnie zawiera odpowiednie frazy kluczowe — bo te są w naturalny sposób związane z tematyką grafiki.
Po czwarte, prawidłowo wdrożone atrybuty alt poprawiają ogólny audyt techniczny strony w narzędziach takich jak Google Lighthouse, PageSpeed Insights czy WAVE. Wysoki wynik audytu dostępności jest jednym z sygnałów Google o jakości serwisu i pośrednio wspiera ogólne pozycjonowanie.
Warto jednak pamiętać, że Google od lat ostrzega przed praktyką tak zwanego „keyword stuffing” w atrybutach alt — czyli upychania słów kluczowych w sposób nienaturalny, niemający związku z faktyczną zawartością obrazu. Atrybut alt typu „buty pozycjonowanie SEO Kraków najtańsze damskie nike adidas” jest sygnałem spamerskim, który Google identyfikuje i może traktować jako negatywny czynnik rankingowy. Najlepszą strategią jest pisanie atrybutów alt w naturalny sposób, opisujący rzeczywistą zawartość obrazu — co paradoksalnie najczęściej zawiera odpowiednie frazy kluczowe samo z siebie.
Jak pisać dobre atrybuty alt
Pisanie dobrych atrybutów alt to umiejętność, która łączy zrozumienie potrzeb użytkownika z niepełnosprawnościami, znajomość zasad SEO oraz świadomość biznesowych celów konkretnego obrazu na stronie. Kilka praktycznych zasad pomaga w tworzeniu efektywnych opisów alternatywnych.
Po pierwsze, atrybut alt powinien być zwięzły, ale wyczerpujący. Rekomendowana długość to od kilku słów do około 125 znaków — czyli zazwyczaj jedno krótkie zdanie. Krótszy opis nie zawiera wystarczających informacji, dłuższy może być uciążliwy dla osób korzystających z czytników ekranu, które słuchają wszystkich opisów w trakcie nawigacji po stronie.
Po drugie, atrybut alt powinien opisywać to, co rzeczywiście widać na obrazie, a nie to, czego by się chciało. „Złoty pierścionek z brylantem o szlifie szmaragdowym” jest dobrym opisem fotografii pierścionka, natomiast „luksusowy prezent dla wymagających klientów” jest opisem marketingowym, który nie pomaga ani osobie niewidomej, ani algorytmom Google.
Po trzecie, dla obrazów produktowych warto stosować naturalny schemat: nazwa produktu, kluczowe cechy, kontekst użycia. Na przykład dla zdjęcia butów: „Białe buty Nike Air Max 90 model damski w rozmiarze 38″. Dla zdjęcia mebla: „Skórzana sofa narożna w kolorze brązowym z funkcją spania”. Dla zdjęcia kosmetyku: „Krem nawilżający do twarzy z kwasem hialuronowym pojemność 50 ml”.
Po czwarte, warto unikać konkretnych słów. „Obrazek pokazujący…”, „Zdjęcie przedstawiające…”, „Grafika z…”. Te frazy są zbędne — czytnik ekranu i tak informuje użytkownika, że ma do czynienia z obrazem przed odczytaniem atrybutu alt. Zaczynanie opisu od „obrazek” jest jak zaczynanie każdego artykułu w gazecie od słów „artykuł o tym, że…”.
Po piąte, dla obrazów dekoracyjnych nie wnoszących informacji należy stosować pusty atrybut alt (alt=””). Linie podziałowe, ozdobne tła, drobne elementy grafiki, ikony bez znaczenia funkcjonalnego — wszystkie te elementy powinny być oznaczone pustym atrybutem alt, aby czytniki ekranu mogły je pominąć i nie przerywać czytania właściwej treści strony.
Po szóste, każdy obraz powinien mieć unikalny atrybut alt. Praktyka kopiowania tego samego opisu do wszystkich obrazów na stronie (na przykład wszystkie obrazy mają alt=”produkt”) jest błędem zarówno z perspektywy dostępności, jak i SEO. Czytniki ekranu identyfikują duplikaty atrybutów i traktują je jako problem, a algorytmy Google podejrzewają tego typu strony o niską jakość techniczną.
Atrybut alt w różnych kontekstach
Praktyczne zastosowanie atrybutu alt różni się w zależności od typu obrazu i jego funkcji na stronie.
Dla zdjęć produktów w sklepach internetowych warto stosować pełny, opisowy schemat: nazwa produktu, marka, kluczowe cechy widoczne na obrazie. Dla wielu zdjęć tego samego produktu (ujęcia z różnych kątów) warto wyróżniać atrybuty alt informacją o perspektywie: „Buty Nike Air Max 90 widok z boku”, „Buty Nike Air Max 90 podeszwa”, „Buty Nike Air Max 90 detale szwów”.
Dla obrazów w artykułach blogowych atrybut alt powinien opisywać to, co przedstawia ilustracja w kontekście tematyki artykułu. Schemat blogu o pozycjonowaniu zawierający ilustrację z wykresami: „Wzrost ruchu organicznego o 200% w ciągu 12 miesięcy współpracy z agencją SEO”. Schemat z infografiką: „Pięć kluczowych elementów algorytmu Google wpływających na pozycję strony”.
Dla obrazów funkcjonalnych — przycisków graficznych, ikon nawigacji, banerów promocyjnych — atrybut alt powinien opisywać funkcję, nie wygląd. Przycisk „dodaj do koszyka” w postaci ikony wózka: alt=”Dodaj produkt do koszyka”. Logo firmy w nagłówku strony prowadzące do strony głównej: alt=”Pozycjonowanie stron – strona główna”. Banner promocyjny: alt=”Promocja Black Friday – wszystkie produkty taniej o 30 procent”.
Dla wykresów, schematów i infografik prezentujących złożone dane atrybut alt powinien syntetycznie podsumować kluczową informację, którą wykres przekazuje. Pełny opis danych źródłowych można umieścić w opisie pod wykresem lub w towarzyszącym tekście — atrybut alt powinien jednak zawierać esencję informacji w 1-2 zdaniach.
Atrybut alt w popularnych CMS-ach
Praktyczne wdrożenie atrybutów alt w nowoczesnych systemach zarządzania treścią jest stosunkowo proste, ale wymaga konsekwentnej dyscypliny zespołu redakcyjnego.
W WordPress przy dodawaniu obrazu do artykułu lub strony pojawia się specjalne pole „tekst alternatywny” w bibliotece mediów. WordPress automatycznie wstawia wprowadzony tam tekst jako wartość atrybutu alt w wygenerowanym HTML. Wtyczki SEO takie jak Yoast SEO lub Rank Math monitorują obecność atrybutów alt na stronach i ostrzegają o brakach, co ułatwia utrzymanie wysokiej jakości technicznej serwisu.
W WooCommerce — popularnej platformie e-commerce opartej na WordPress — atrybut alt zdjęcia produktu można uzupełnić bezpośrednio w karcie produktu lub w bibliotece mediów. Dla sklepów z setkami produktów dobrą praktyką jest stworzenie spójnego szablonu dla atrybutów alt (nazwa produktu + marka + kluczowa cecha) i konsekwentne stosowanie go.
W PrestaShop i Magento dostępne są analogiczne mechanizmy zarządzania atrybutami alt zdjęć produktów. W Shopify atrybut alt można uzupełnić zarówno na poziomie konkretnego produktu, jak i z poziomu biblioteki mediów.
Dla sklepów z bardzo dużym wolumenem produktów istnieją automatyzacje generujące atrybuty alt na podstawie szablonów (na przykład „[nazwa produktu] – [kategoria] – [marka]”). Tego typu rozwiązania są lepsze niż pozostawianie atrybutów alt pustymi, ale ustępują wartością ręcznie napisanym, indywidualnym opisom każdego obrazu.
Audyt atrybutów alt
W ramach standardowych audytów technicznych SEO regularnie wykonuje się sprawdzenie obecności i jakości atrybutów alt w obrazach serwisu. Narzędzia używane do tego celu to między innymi Screaming Frog SEO Spider, Sitebulb, Ahrefs Site Audit czy Semrush Site Audit. Wszystkie te narzędzia potrafią zidentyfikować obrazy na serwisie bez atrybutów alt oraz obrazy z atrybutami zawierającymi tylko nazwę pliku (na przykład alt=”IMG_1234″).
Specjalistyczne narzędzia dostępności jak WAVE, Lighthouse czy axe DevTools dostarczają szczegółowych raportów zgodności z wytycznymi WCAG, w tym konkretnych wskazówek dotyczących atrybutów alt na poszczególnych obrazach. Niektóre z tych narzędzi oferują automatyczne generowanie raportów porównawczych przed i po wdrożeniu poprawek.
Dla agencji Pozycjonowanie stron audyt atrybutów alt jest jednym ze standardowych elementów technicznego audytu SEO realizowanego dla nowych klientów — szczególnie tych prowadzących sklepy internetowe z dużą liczbą produktów lub serwisy z bogatą zawartością wizualną. Identyfikacja braków, zaproponowanie szablonów i strategii uzupełniania, oraz monitoring wdrożenia poprawek to zadania, które systematycznie podnoszą zarówno dostępność serwisu, jak i jego pozycje w organicznych wynikach Google — w tym w Google Grafika.
