Tekst alternatywny to krótki opis obrazu zapisany w atrybucie alt elementu img i jest to poprawka dostępności o największym efekcie, jaką większość witryn może wprowadzić. Czytniki ekranu odczytują go osobom niewidomym i słabowidzącym, przeglądarki wyświetlają go, gdy obraz się nie wczyta, a wyszukiwarki opierają się na nim, żeby zrozumieć, co obraz przedstawia. To także kwestia prawna: kryterium sukcesu WCAG 1.1.1 wymaga alternatywy tekstowej dla wszystkich treści nietekstowych już na poziomie zgodności A, czyli minimalnym, a przepisy takie jak European Accessibility Act opierają się dokładnie na tych kryteriach. Dobra wiadomość jest taka, że dobre pisanie tekstów alternatywnych to umiejętność na minuty, a nie na tygodnie. Zasady mieszczą się na fiszce: opisz to, co w obrazie liczy się w jego kontekście, zmieść to w jednym zwięzłym zdaniu, pomiń zwroty w rodzaju obrazek przedstawiający, obrazom czysto dekoracyjnym daj pusty atrybut alt i nigdy nie pomijaj samego atrybutu. Ten przewodnik przechodzi przez każdą zasadę z przykładami, pokazuje, gdzie tekst alternatywny mieszka w WordPressie, i kończy się tym, jak znaleźć na witrynie każdy obraz, któremu go wciąż brakuje.
Czym jest tekst alternatywny i kto go potrzebuje?
W kodzie HTML tekst alternatywny to atrybut elementu obrazu:
<img src="lighthouse.jpg" alt="Biało-czerwona latarnia morska w pasy na skalistym wybrzeżu o zachodzie słońca">Korzystają z niego trzy grupy odbiorców, a myślenie o nich wyjaśnia niemal każdą zasadę, która za chwilę padnie. Osoby korzystające z czytnika ekranu słyszą tekst alternatywny zamiast obrazu, więc dla nich ten tekst po prostu jest obrazem. Według WHO około 2,2 miliarda ludzi na świecie żyje z jakąś formą zaburzenia widzenia, a czytniki ekranu są sposobem, w jaki znaczna ich część korzysta z internetu. Przeglądarki pokazują ten tekst, gdy obraz nie może się wczytać, co wciąż zdarza się codziennie przy wolnych łączach i zepsutych wdrożeniach. A roboty wyszukiwarek, które nie widzą obrazów tak jak ludzie, traktują atrybut alt jako główny sygnał tekstowy o treści obrazu.
Formalny wymóg płynie z kryterium sukcesu WCAG 1.1.1 Non-text Content. Znajduje się ono na poziomie zgodności A, co oznacza, że witryna bez alternatyw tekstowych nie przechodzi najniższej poprzeczki dostępności, niezależnie od tego, jak dobrze zrobiono całą resztę.
Jak pisać dobry tekst alternatywny: pięć zasad na niemal każdą sytuację
Tekst alternatywny to pisanie, a jak każde pisanie zyskuje na kilku ograniczeniach. Te pięć przeprowadzi Cię przez niemal każdy obraz:
- Opisuj treść i cel, a nie piksele. Zapytaj, co obraz komunikuje w tym kontekście, i to właśnie napisz. To samo zdjęcie osoby przy laptopie może być opisane jako Konsultant wsparcia odpowiadający na czaty klientów na stronie pomocy i jako Praca przy kuchennym stole w artykule o pracy zdalnej.
- Bądź konkretny, ale zatrzymaj się na tym, co istotne. Pies mówi mniej niż Szczeniak golden retrievera goniący piłkę po trawniku. Ale jeśli artykuł dotyczy pielęgnacji trawnika, rasa może liczyć się mniej niż zgryziona trawa.
- Zmieść to mniej więcej w jednym zdaniu. Szeroko stosowana wskazówka mówi o mniej więcej 125 znakach, co jest konwencją ze starszych czytników ekranu, które dzieliły dłuższy tekst na kawałki. To nie jest twardy limit, ale dobra motywacja do zwięzłości. Najważniejsze słowa umieszczaj na początku.
- Pomijaj zwroty obrazek przedstawiający i zdjęcie przedstawiające. Czytniki ekranu i tak zapowiadają element jako obraz, więc takie zwroty to czyste powtórzenie. Podanie rodzaju ma wartość tylko wtedy, gdy coś wnosi: obraz olejny, zrzut ekranu czy wykres pomagają słuchaczowi się zorientować.
- Przy obrazach z linkiem lub funkcją opisz cel albo działanie. Logo prowadzące na stronę główną powinno mówić Nazwa firmy, strona główna, a nie opisywać grafikę logo. Przycisk z ikoną uruchamiający wyszukiwanie powinien mówić Szukaj. Kiedy obraz coś robi, funkcja wygrywa z wyglądem.
Jeden przypadek szczególny zasługuje na własne zdanie: obrazy zawierające tekst. WCAG odradza wtapianie tekstu w obrazy w ogóle, ale tam, gdzie już istnieje, na przykład w banerze promocyjnym, tekst alternatywny musi ten tekst zawierać, bo dla wszystkich polegających na alternatywie jest on niewidoczny.
Dobry i słaby tekst alternatywny: porównanie przykładów
| Obraz | Słaby tekst alternatywny | Dobry tekst alternatywny |
|---|---|---|
| Zdjęcie produktu w sklepie | shoe | Niebieski but do biegania Nike Air Zoom, widok z boku |
| Zdjęcie zespołu na stronie o nas | IMG_4032.jpg | Pięcioosobowy zespół InspectWP przed biurem w Hamburgu |
| Wykres we wpisie na blogu | chart | Wykres słupkowy: czas ładowania strony spada z 4,2 do 1,8 sekundy po włączeniu cache'owania |
| Logo z linkiem na stronę główną | logo-final-v3 | ExampleCorp, powrót na stronę główną |
| Dekoracyjny ornament rozdzielający | dekoracyjny zawijas element graficzny separator | (pusty atrybut alt) |
Zauważ wzorzec w kolumnie ze słabymi przykładami: nazwy plików, pojedyncze słowa i opisy pikseli zamiast znaczenia. Największą przepaść pokazuje wiersz z wykresem. Dla osoby korzystającej z czytnika ekranu słowo chart nie znaczy nic, podczas gdy jednolinijkowe podsumowanie wniosku zastępuje całą warstwę wizualną. Jeśli wykres jest zbyt złożony na jedną linijkę, podsumuj w tekście alternatywnym kluczowy wniosek, a pełne dane podaj obok w formie tabeli.
Obrazy dekoracyjne: kiedy pusty tekst alternatywny jest poprawny
Nie każdy obraz niesie znaczenie. Ozdobne separatory, abstrakcyjne kształty w tle i zdjęcia stockowe dodające wyłącznie nastroju to dekoracja, a poprawnym znacznikiem dla nich jest pusty atrybut alt:
<img src="divider-ornament.svg" alt="">Pusty atrybut to celowy sygnał, który każe czytnikom ekranu całkowicie pominąć obraz, a to dokładnie to, co w praktyce robi widzący odwiedzający. Bardzo się to różni od pominięcia atrybutu: przy całkowitym braku atrybutu alt wiele czytników ekranu odczytuje w zamian nazwę pliku, a odwiedzający słyszy w środku zdania grafika ukośnik separator myślnik ornament myślnik final myślnik v2 kropka svg. Dlatego narzędzia do sprawdzania dostępności zgłaszają brakujące atrybuty alt jako błędy, a puste traktują jako poprawne. W3C oferuje na uczciwie graniczne przypadki poręczne drzewo decyzyjne dla tekstu alternatywnego.
Praktyczny test na pytanie, czy to dekoracja: wyobraź sobie, że obrazu nie ma. Jeśli strona nie traci żadnej informacji ani żadnej funkcji, pusty alt jest właściwy. Jeśli znika cokolwiek znaczącego, opisz to.
Jak dodać tekst alternatywny w WordPressie?
WordPress daje każdemu obrazowi pole tekstu alternatywnego, a dotarcie do niego zajmuje trzy kliknięcia:
- W edytorze blokowym: zaznacz blok obrazu, a pole Tekst alternatywny pojawi się w bocznym panelu ustawień bloku w sekcji Ustawienia. To ta wartość ląduje w kodzie HTML strony.
- W bibliotece mediów: otwórz dowolny obraz i wypełnij pole Tekst alternatywny w szczegółach załącznika. Ta wartość jest używana jako domyślna, gdy obraz zostanie gdzieś wstawiony w przyszłości.
- Przy obrazach wyróżniających: tekst alternatywny pochodzi z wartości zapisanej dla tego obrazu w bibliotece mediów, więc miniatury wpisów dziedziczą to, co tam siedzi.
Jedna osobliwość WordPressa odpowiada za mnóstwo zamieszania i zasługuje na wyróżnione ostrzeżenie: zaktualizowanie tekstu alternatywnego w bibliotece mediów nie zmienia obrazów już umieszczonych we wpisach. Edytor blokowy kopiuje tekst alternatywny do treści wpisu w chwili wstawiania i od tego momentu kopia żyje własnym życiem. Jeśli poprawiasz teksty alternatywne w bibliotece mediów i zastanawiasz się, czemu podstrony się nie zmieniły, to właśnie dlatego. Istniejące wstawienia trzeba edytować w samych wpisach albo narzędziem do search-replace, jeśli skala tego wymaga.
A skoro jesteś już przy pracy z mediami: pole tekstu alternatywnego to nie pole tytułu i nie podpis. Tytuł jest w większości wewnętrzny, podpis to widoczny tekst pod obrazem, a czytnikom ekranu i robotom służy wyłącznie atrybut alt. Wypełnianie niewłaściwego pola to najczęstszy sposób, w jaki witryny dorabiają się ładnych podpisów i pustych atrybutów alt.
Tekst alternatywny a SEO: co naprawdę mówi Google
Dokumentacja Google o SEO obrazów nie pozostawia wątpliwości: opisowy tekst alternatywny jest czynnikiem rankingowym w Google Images i pomaga Google zrozumieć zarówno obraz, jak i otaczającą go podstronę. Dla sklepów i witryn contentowych wyszukiwanie grafiki to realny kanał ruchu, a atrybut alt jest jego najbardziej bezpośrednią dźwignią. Ten sam dokument zawiera równie jednoznaczne ostrzeżenie: upychanie słów kluczowych w atrybutach alt psuje doświadczenie użytkownika i może sprawić, że witryna zostanie odebrana jako spam.
Praktyczne tłumaczenie: pisz tekst alternatywny przede wszystkim dla słuchacza, a jeśli temat podstrony naturalnie pasuje do opisu, umieść go tam raz. Niebieski but do biegania Nike Air Zoom, widok z boku to dobry tekst alternatywny, który przy okazji zawiera słowa, jakich szukałby kupujący. Buty do biegania kup tanio buty do biegania najlepsze buty do biegania 2026 to spam przebrany za atrybut alt. Opisowe nazwy plików (but-do-biegania-niebieski.jpg zamiast IMG_4032.jpg) i otaczający tekst pasujący do obrazu dopełniają obrazu, ale to tekst alternatywny pozostaje najsilniejszym sygnałem, który w pełni kontrolujesz.
Jak znaleźć obrazy bez tekstu alternatywnego na swojej witrynie?
Pisanie dobrych tekstów alternatywnych zaczyna się od wiedzy, gdzie ich brakuje, a narzędzia znajdą się na każdą skalę. Dla pojedynczej podstrony odpowie na to sama przeglądarka: otwórz konsolę narzędzi deweloperskich i uruchom jedną linijkę, która wypisze wszystkie przypadki.
// Wypisuje wszystkie obrazy bez atrybutu alt na bieżącej stronie
document.querySelectorAll('img:not([alt])').forEach((img) => console.log(img.src));Do audytu podstrona po podstronie z wizualną informacją zwrotną darmowe narzędzie WAVE od WebAIM oznacza każdy brakujący i podejrzany atrybut alt wprost na wyrenderowanej stronie, a Lighthouse w Chrome zawiera to sprawdzenie w swoim audycie dostępności. Skala problemu jest dobrze udokumentowana: coroczna analiza WebAIM Million, obejmująca milion najpopularniejszych stron głównych, rok po roku wskazuje brakujący tekst alternatywny wśród najczęstszych błędów dostępności, na mniej więcej połowie wszystkich badanych stron głównych. Cokolwiek znajdziesz na własnej witrynie, jesteś w licznym towarzystwie, a w odróżnieniu od większości problemów z dostępnością ten naprawia się obraz po obrazie, w kilka minut.
Jak InspectWP sprawdza Twoje teksty alternatywne?
Raport InspectWP liczy obrazy na analizowanej podstronie i podaje w sekcji SEO, ile z nich ma atrybut alt, a ilu go brakuje, oznaczając braki jako ostrzeżenie. Dostajesz dzięki temu inwentarz brakujących tekstów alternatywnych dla witryny WordPress bez otwierania narzędzi deweloperskich, a ponieważ raporty mogą działać według harmonogramu, wychwytujesz też regresje, które nieuchronnie zdarzają się przy publikowaniu nowych treści w pośpiechu. Połącz liczby z raportu z zasadami pisania z tego przewodnika, a droga jest krótka: znajdź obrazy, opisz to, co się liczy, dekorację zostaw po cichu pustą, a korzyść zbiorą zarówno osoby korzystające z czytnika ekranu, jak i Twój ruch z wyszukiwania grafiki.