Co to jest tekst alternatywny, tzw. alt text?

Tekst alternatywny, nazywany również "alt text", to krótki opis grafiki zapisany w atrybucie alt znacznika img w kodzie HTML. Czytniki ekranu odczytują go na głos, więc osoba niewidoma wie, co przedstawia ilustracja. Gdy przeglądarka nie wyświetli pliku, w miejscu obrazka pojawia się właśnie ten tekst, a Google używa go razem z rozpoznawaniem obrazów, żeby zrozumieć temat zdjęcia.

Rola opisów alternatywnych w dostępności i optymalizacji

Atrybut alt służy jednocześnie ludziom i wyszukiwarce: zastępuje grafikę tym, którzy jej nie widzą, i podpowiada Google, co przedstawia. Cztery główne zastosowania:

• Dostępność - osoby niewidome i słabowidzące korzystają z programów czytających ekran; bez altu zdjęcie jest dla nich puste, a WCAG 2.2 w kryterium 1.1.1 (poziom A) wymaga wersji tekstowej dla każdej treści nietekstowej.
• Indeksowanie - roboty wyszukiwarek analizują atrybuty alt; według dokumentacji Google alt działa razem z algorytmami rozpoznawania obrazów i zawartością podstrony przy ustalaniu tematu grafiki.
• Zastępstwo przy błędzie - jeśli plik nie załaduje się przez awarię serwera, wolne łącze albo blokadę w przeglądarce, użytkownik zobaczy w tym miejscu słowa wyjaśniające, co miało się pojawić.
• Link z obrazka - gdy grafika prowadzi do innej podstrony, Google traktuje jej alt jak tekst kotwicy, czyli jak anchor zwykłego odnośnika.

Zasady pisania dobrego opisu alternatywnego

Dobry alt mówi konkretnie, co widać na ilustracji, i robi to w jednym krótkim zdaniu albo kilku słowach. Praktyczne wytyczne:

• Pomiń ogólniki w rodzaju "obraz", "grafika" czy "zdjęcie" i nazwij obiekt lub scenę: zamiast "kot" napisz "rudy kot siedzący na parapecie".
• Wpleć frazę związaną z treścią podstrony tylko wtedy, gdy rzeczywiście pasuje do ilustracji; Google ostrzega, że wypełnianie altów słowami kluczowymi jest źle odbierane i może sprawić, że strona zostanie uznana za spam.
• Pisz o tym, co rzeczywiście widać, bez domysłów: jeśli fotografia przedstawia biurko z laptopem i notatnikiem, nie dopowiadaj, że "ktoś intensywnie pracuje".
• Dopasuj długość do złożoności obrazka: prosta ikona potrzebuje 2-3 słów, wykres pełnego zdania z osiami i główną wartością.
• Ozdobnik bez informacji dostaje pusty alt (alt=""), dzięki czemu czytnik ekranu ją pomija; WCAG nazywa to wprost: taka treść ma być zaimplementowana tak, by technologie wspomagające mogły ją zignorować.

Przykład dobrze sformułowanego atrybutu

Dobrze napisany alt widać najwyraźniej na przykładzie z dokumentacji Google o obrazach. Google pokazuje trzy wersje dla tego samego zdjęcia psa i ocenia je od najsłabszej do najlepszej:

• źle: <img src="puppy.jpg"/>, bez atrybutu alt,
• lepiej: alt="szczeniak",
• najlepiej: alt="Szczeniak dalmatyńczyka bawi się w aportowanie".

Wzorcowa wersja ma 6 słów i odpowiada na trzy pytania: kto (młody pies), jaka rasa (dalmatyńczyk) i co robi (aportuje). Ten sam schemat sprawdza się w sklepie czy na blogu firmy: obiekt, cecha, która go odróżnia, i czynność albo kontekst. Google pokazuje też wersję zepsutą upychaniem fraz, z kilkunastoma odmianami słowa "szczeniak" i nazwami ras w jednym atrybucie; taki ciąg nie mówi nic więcej niż pojedynczy wyraz, za to wygląda jak spam.

Najczęstsze błędy podczas tworzenia alt text

5 błędów powtarza się najczęściej, od przeładowania frazami po dublowanie podpisu:

• Nadmiar słów kluczowych - jeśli każde zdjęcie w galerii ma tę samą frazę "najlepsze buty trekkingowe", Google może uznać to za upychanie fraz, które dokumentacja wymienia jako przyczynę oceny strony jako spamu.
• Brak zróżnicowania - seria fotografii z tym samym altem, na przykład alt="produkt" przy każdej, nie daje użytkownikowi czytnika żadnej informacji; każdy plik potrzebuje osobnej treści.
• Zbyt rozbudowane narracje - alt nie jest miejscem na akapit z opowieścią; wystarczy jedno zdanie albo kilka rzeczowników z cechami.
• Powielanie podpisu - jeśli pod grafiką stoi widoczny opis, alt powinien dodać informację albo ją streścić, a nie powtarzać te same słowa.
• Atrybut title zamiast alt - pokazuje on dymek po najechaniu kursorem i nie zastępuje altu, bo WCAG wymaga alternatywnej treści dostępnej dla czytników ekranu.

Alt text w różnych typach grafik

Treść altu zależy od rodzaju ilustracji, bo inaczej opisuje się produkt, wykres, logo i zrzut ekranu:

Fotografie produktów

W sklepie internetowym alt zdjęcia na karcie towaru powinien zawierać jego nazwę, kolor, materiał i ujęcie. Przykład: "Czarne sneakersy damskie z białą podeszwą, widok z boku". Nazwę modelu, choćby "Nike Air Max 270", dodaj, gdy klienci jej szukają, a obok zostaw cechy z fotografii; dobór takich fraz opisuje poradnik o tym, jak wybrać silne słowo kluczowe w strategii SEO.

Wykresy i infografiki

Złożone grafiki wymagają streszczenia głównego wniosku. Dla wykresu kolumnowego alt może brzmieć: "Wykres słupkowy: sprzedaż w trzecim kwartale 2024 roku wyższa o 35% niż w drugim" (liczby są tu przykładem). Jeśli infografika zawiera kilkanaście wartości, pełny opis umieść w treści artykułu albo w tabeli pod nią; atrybut longdesc standard HTML uznaje za przestarzały i zaleca zamiast niego zwykły link do opisu.

Logotypy i ikony interfejsu

Logotyp firmy opisz nazwą marki: "Logo Acme Corporation". Ikona funkcjonalna, na przykład przycisk zamykający okno, wymaga określenia akcji: "Zamknij okno dialogowe" zamiast "Ikonka X". Ozdobnik bez znaczenia dostaje pusty alt (alt=""), żeby nie zakłócać nawigacji czytnikiem.

Zrzuty ekranu i screenshoty

Zrzut ekranu opisz przez widoczne elementy interfejsu i ich układ. Przykład: "Panel administracyjny WordPress: menu nawigacyjne po lewej, edytor treści w środku, opcje publikacji po prawej". Taki tekst pozwala osobie niewidomej zrozumieć rozmieszczenie przycisków bez oglądania obrazka.

Wpływ alt text na pozycjonowanie w wyszukiwarce obrazów

Alt pomaga grafice pojawić się w Grafice Google, bo Google łączy go z rozpoznawaniem obrazów i treścią podstrony przy ustalaniu tematu zdjęcia. Opisane obrazy mogą dawać dodatkowy ruch, szczególnie w branżach wizualnych, takich jak moda, wnętrza czy kulinaria. Obok samego atrybutu dokumentacja Google wskazuje kilka innych zasad:

• Nazwa pliku też podpowiada temat: Google podaje, że my-new-black-kitten.jpg jest lepsze niż IMG00023.JPG, i radzi unikać nazw w rodzaju image1.jpg.
• Plik w znaczniku img powinien mieć format obsługiwany przez wyszukiwarkę Google: BMP, GIF, JPEG, PNG, WebP, SVG albo AVIF; lżejsze z nich, takie jak WebP i AVIF, skracają też ładowanie.
• Obraz warto umieścić obok związanego z nim tekstu i na podstronie odpowiadającej jego tematowi; jeśli akapit opisuje technikę baristyczną, zdjęcie ekspresu do kawy powinno stać w tym samym bloku.
• Podpis pod zdjęciem dodaj, gdy niesie informację; obok atrybutu alt daje Google drugi tekst o tym samym obrazie.

Narzędzia i wtyczki ułatwiające zarządzanie alt text

W WordPressie alt uzupełnia się w bibliotece mediów, w polu "Tekst alternatywny", albo podczas wstawiania grafiki do posta. Część wtyczek SEO, na przykład Yoast SEO i Rank Math, pokazuje w analizie treści brak tego atrybutu.

Przy dużych stronach, z setkami zdjęć, pomagają 4 narzędzia:

• Screaming Frog SEO Spider - crawler, który wylicza obrazy bez alt i eksportuje listę do poprawy w arkuszu.
• Google Search Console - raport "Wyniki wyszukiwania" po zmianie typu na obrazy pokazuje kliknięcia i wyświetlenia z Grafiki Google; spadek po przebudowie galerii to sygnał do sprawdzenia altów albo blokad w robots.txt.
• WAVE Web Accessibility Evaluation Tool - sprawdza zgodność z WCAG, w tym obecność i jakość tekstów alternatywnych.
• Microsoft Azure Computer Vision albo Google Cloud Vision API - usługi AI proponujące wstępny opis grafiki; traktuj je jako szkic do ręcznej poprawki, bo przy nietypowych zdjęciach podają ogólniki.

Alt text a standardy dostępności WCAG

WCAG 2.2, rekomendacja W3C w wersji z 12 grudnia 2024 roku, wymaga w kryterium 1.1.1 Non-text Content (poziom A) alternatywy tekstowej dla każdej treści nietekstowej. Spełnienie tego warunku oznacza w praktyce, że:

• Każdy obraz niosący informację ma atrybut alt z treścią pełniącą tę samą funkcję co grafika.
• Grafiki dekoracyjne mają pusty alt (alt=""), żeby nie obciążać użytkownika czytnika zbędnymi słowami.
• Obrazy będące linkami mają alt opisujący cel odnośnika, a nie wygląd ikonki (na przykład "Przejdź do strony kontakt" zamiast "Ikona koperty").

Poziom A to minimum, od którego zaczyna się zgodność z WCAG; wyższe stopnie, AA i AAA, dokładają kryteria dotyczące między innymi kontrastu i tekstu na obrazach. Test czytnikami ekranu (NVDA, JAWS, VoiceOver) pokazuje szybko, czy alt mówi to, co powinien.

Częste pytania dotyczące implementacji alt text

Czy alt text musi być unikalny na całej stronie?

Tak, jeśli grafiki przedstawiają odmienne rzeczy. Powielone teksty nie mówią użytkownikowi czytnika, czym zdjęcia się różnią, a ta sama fraza przy każdym obrazku wygląda na upychanie słów kluczowych. Wyjątkiem są powtarzalne elementy interfejsu, na przykład ikona koszyka w nagłówku każdej podstrony, gdzie identyczny alt jest naturalny.

Jak długi może być alt text?

Dokumentacja Google o obrazach nie podaje limitu znaków, a jej wzorcowy przykład ma 6 słów. Krótki tekst wygodniej słucha się w czytniku ekranu, więc dłuższe wyjaśnienie, choćby do wykresu z kilkunastoma wartościami, lepiej umieścić w akapicie obok grafiki.

Czy puste pole alt (alt="") szkodzi SEO?

Nie, jeśli stosujesz je świadomie przy grafikach dekoracyjnych, bo tak każe WCAG. Problemem jest brak atrybutu (<img src="..."> bez alt): Google pokazuje taki zapis jako nieprawidłowy, a audyty dostępności liczą go jako błąd.

Czy można używać znaków specjalnych i emoji w alt text?

Technicznie tak, ale czytnik ekranu odczyta emoji jego nazwą, na przykład obrazek ognia jako angielskie "fire", co zaburza płynność zdania. Lepiej napisać zwykłymi wyrazami, choćby "popularny produkt", zamiast stawiać ikonkę przed określeniem towaru.

Automatyzacja vs. ręczna redakcja - co wybrać?

Ręcznie pisane alty dają lepszy wynik, a narzędzie AI ma sens jako szkic przy bibliotekach powyżej 1000 plików. Usługi AI, takie jak Microsoft Seeing AI czy Amazon Rekognition, rozpoznają typowe sceny (ludzie, zwierzęta, przedmioty codziennego użytku), ale gubią się przy diagramach technicznych, symbolach branżowych i nietypowych kadrach. Dlatego rozsądny model pracy łączy:

• Automatyczne propozycje jako punkt startu, który przyspiesza pracę przy dużych bibliotekach grafik.
• Ręczną weryfikację przez redaktora znającego branżę, który poprawi nazwę produktu i dopisze cechę widoczną na zdjęciu.
• Okresowe kontrole, na przykład co 30 dni crawlem Screaming Frog, czy nowe obrazy nie zostały bez opisu.

W małej firmie, przy kilkudziesięciu obrazkach, każdy alt warto napisać ręcznie przy wgrywaniu pliku. Duże portale mogą korzystać z modelu mieszanego: AI podpowiada, a redakcja sprawdza najpierw grafiki najbardziej widoczne, czyli te na stronie głównej, podstronach usług i w najczęściej czytanych artykułach.