Tekst alternatywny, zapisywany w atrybucie alt elementu <img>, zastępuje obraz wszędzie tam, gdzie nie da się go zobaczyć. Odczytuje go czytnik ekranu, wyświetla przeglądarka, gdy grafika się nie wczyta, korzystają z niego wyszukiwarki. Uzupełnienie atrybutu alt to jedno z najprostszych zadań w dostępności cyfrowej, a mimo to brak tekstu alternatywnego od lat jest w czołówce najczęstszych błędów WCAG.
Dobry opis nie relacjonuje piksel po pikselu, co widać na zdjęciu. Przekazuje to, co obraz wnosi do treści w danym miejscu. Poniżej znajdziesz zasady, przykłady „źle/dobrze” oraz wskazówki dla sklepów i WordPressa.
Tekst alternatywny a kryterium 1.1.1
Wymaganie wynika z kryterium 1.1.1 Non-text Content – treść nietekstowa (poziom A): każda treść nietekstowa prezentowana użytkownikowi potrzebuje alternatywy tekstowej, która pełni tę samą funkcję. Dotyczy to zdjęć, ikon, wykresów, grafik w linkach i przyciskach, także tych w formacie SVG. Treść czysto dekoracyjna ma być oznaczona tak, żeby technologie asystujące mogły ją pominąć.
Kluczowe są słowa „ta sama funkcja”. Ten sam obraz może wymagać różnego opisu w zależności od kontekstu: zdjęcie budynku w artykule o architekturze opiszesz inaczej niż to samo zdjęcie użyte jako link do strony „Kontakt”.
Kiedy alt opisowy, a kiedy pusty
Zadaj sobie pytanie: czy osoba, która nie widzi obrazu, coś straci? Jeśli tak, napisz opis. Jeśli nie, zostaw pusty atrybut.
- Obraz informacyjny – zdjęcie produktu, ilustracja do instrukcji, wykres, portret osoby, o której mowa w tekście. Opisz krótko to, co w tym miejscu ważne.
- Obraz dekoracyjny – ornament, zdjęcie „dla klimatu”, ikona obok tekstu, który mówi to samo. Użyj
alt="".
<!-- Źle: brak atrybutu alt -->
<img src="ornament.svg">
<!-- Dobrze: obraz dekoracyjny -->
<img src="ornament.svg" alt="">
<!-- Dobrze: obraz informacyjny w instrukcji -->
<img src="router-tyl.jpg" alt="Przycisk reset z tyłu routera, obok gniazda zasilania">Pusty alt="" i brak atrybutu to dwie różne sytuacje. Pusty alt mówi czytnikowi ekranu „pomiń ten obraz”. Gdy atrybutu brakuje, czytnik może odczytać nazwę pliku, np. „IMG_2034.jpg”. W trudniejszych przypadkach pomoże drzewko decyzyjne W3C dla atrybutu alt (po angielsku).
Obrazy w linkach i przyciskach, logo
Jeśli obraz jest jedyną treścią linku lub przycisku, tekst alternatywny staje się nazwą tego elementu. Opisz wtedy funkcję, a nie wygląd: dokąd prowadzi link albo co zrobi przycisk.
<!-- Źle: opis wyglądu -->
<a href="/cennik.pdf"><img src="pdf.svg" alt="czerwona ikona PDF"></a>
<!-- Dobrze: opis funkcji -->
<a href="/cennik.pdf"><img src="pdf.svg" alt="Pobierz cennik (PDF)"></a>
<!-- Ikona obok widocznego tekstu: pusty alt, żeby nie dublować -->
<button type="submit"><img src="lupa.svg" alt=""> Szukaj</button>Logo w nagłówku, które prowadzi na stronę główną, opisz nazwą firmy i celem linku, np. alt="Piekarnia Nowak – strona główna". Logo bez linku wystarczy opisać samą nazwą firmy.
Obrazy z tekstem, wykresy i infografiki
Jeśli na obrazie jest tekst, np. hasło promocji na banerze, tekst alternatywny powinien zawierać ten sam tekst. Lepiej jednak w ogóle nie zamieniać tekstu w grafikę. Kryterium 1.4.5 Images of Text – obrazy tekstu (AA) wymaga prawdziwego tekstu wszędzie tam, gdzie da się uzyskać ten sam efekt wizualny – taki tekst można powiększyć, przetłumaczyć i skopiować.
Wykres czy infografika niosą zbyt wiele informacji na jeden atrybut. Zastosuj dwa poziomy: krótki alt mówiący, czym jest obraz i jaki jest główny wniosek, oraz pełny opis lub tabelę z danymi w treści strony. Jeśli opis nie stoi bezpośrednio przy obrazie, możesz go z nim powiązać atrybutem aria-describedby.
<figure>
<img src="zamowienia-kwartaly.png"
alt="Wykres słupkowy: liczba zamówień rośnie co kwartał, najmocniej w IV kwartale">
<figcaption>Liczba zamówień w kolejnych kwartałach. Pełne dane w tabeli pod wykresem.</figcaption>
</figure>Ikony SVG i obrazy tła w CSS
Ikona SVG wstawiona bezpośrednio w kod nie ma atrybutu alt. Jeśli niesie informację, nadaj jej rolę obrazu i nazwę – przez aria-label albo element <title> powiązany atrybutem aria-labelledby. Jeśli jest dekoracją albo stoi obok tekstu, który mówi to samo, ukryj ją przed czytnikami ekranu.
<!-- SVG, które niesie informację (np. w tabeli porównania) -->
<svg role="img" aria-label="Tak" viewBox="0 0 24 24">…</svg>
<!-- SVG obok tekstu: ukryte -->
<a href="/kontakt"><svg aria-hidden="true" viewBox="0 0 24 24">…</svg> Kontakt</a>
<!-- Przycisk z samą ikoną: nazwa na przycisku -->
<button type="button" aria-label="Zamknij">
<svg aria-hidden="true" viewBox="0 0 24 24">…</svg>
</button>Obrazy wstawione jako tło w CSS (background-image) są dla czytników ekranu niewidoczne i nie mają gdzie przyjąć tekstu alternatywnego. Nadają się do dekoracji, nie do treści. Jeśli obraz tła niesie informację albo jest jedyną zawartością linku, użyj <img> z opisem lub dodaj tekst ukryty wizualnie, np. klasą visually-hidden albo sr-only z Twojego frameworka.
<!-- Źle: pusty link, ikona tylko w CSS -->
<a href="/koszyk" class="ikona-koszyk"></a>
<!-- Dobrze: nazwa dla czytników ekranu -->
<a href="/koszyk" class="ikona-koszyk">
<span class="visually-hidden">Koszyk</span>
</a>Zdjęcia produktów w sklepie internetowym
W sklepie zdjęcie jest często głównym źródłem informacji o produkcie. Opis powinien zawierać nazwę i cechy widoczne na zdjęciu, które odróżniają je od pozostałych: kolor, wariant, ujęcie, detal.
<!-- Źle: to samo słowo na każdym zdjęciu galerii -->
<img src="nord-1.jpg" alt="kurtka">
<img src="nord-2.jpg" alt="kurtka">
<!-- Dobrze -->
<img src="nord-1.jpg" alt="Kurtka przeciwdeszczowa Nord, granatowa, widok z przodu">
<img src="nord-2.jpg" alt="Kurtka Nord: kaptur z regulacją i odblaskowy pasek">Na liście produktów zdjęcie i nazwa zwykle prowadzą do tej samej karty. Najlepiej umieścić je w jednym linku – wtedy zdjęcie może mieć pusty alt, bo nazwę przekazuje tekst linku. Dwa osobne linki obok siebie to dla użytkownika czytnika ekranu podwójny komunikat, a link z samym zdjęciem i pustym alt to pusty link. Próbki kolorów podpisz słownie, np. „granatowy”, a nie tylko kolorem tła. Więcej o całej ścieżce zakupowej piszemy w artykule WCAG w sklepie internetowym.
Typowe błędy w tekstach alternatywnych
- Nazwa pliku jako opis –
alt="IMG_2034.jpg"alboalt="baner-glowna-v2"nic nie mówi. - „Obrazek”, „zdjęcie”, „grafika” – czytnik ekranu i tak informuje, że to obraz. Rodzaj obrazu podawaj tylko wtedy, gdy ma znaczenie, np. „zrzut ekranu” albo „obraz olejny”.
- Powielanie podpisu – jeśli
<figcaption>lub akapit obok mówi dokładnie to samo, użytkownik usłyszy to dwa razy. Alt powinien uzupełniać podpis, a nie go powtarzać. - Upychanie słów kluczowych –
alt="kurtka damska tania kurtka zimowa kurtki sklep"to spam, a nie opis. - Wypracowanie zamiast opisu – zwykle wystarczy krótka fraza lub jedno zdanie; dłuższy opis umieść w treści.
- Atrybut
titlezamiast alt – nie jest niezawodnym zamiennikiem tekstu alternatywnego.
Brakujące teksty alternatywne pokaże m.in. bezpłatny skan wstępny na stronie głównej, ale to, czy opis ma sens, oceni tylko człowiek. Najlepszym testem jest przesłuchanie strony czytnikiem ekranu – jak to zrobić, opisujemy w poradniku jak sprawdzić stronę pod kątem WCAG.
Atrybut alt a SEO
Wyszukiwarki korzystają z tekstu alternatywnego, żeby zrozumieć, co przedstawia obraz – ma to znaczenie zwłaszcza w wyszukiwaniu grafik. Dobra wiadomość: alt napisany dla ludzi jest dobry także dla SEO. Konkretny opis, np. „Kurtka Nord, granatowa, widok z przodu”, naturalnie zawiera słowa, których ktoś mógłby szukać. Upychanie fraz może zostać potraktowane jak spam, a na pewno pogorszy dostępność.
Jak ustawić alt w WordPressie i innych CMS
W WordPressie tekst alternatywny ustawisz w dwóch miejscach:
- Biblioteka mediów (Media → Biblioteka): kliknij obraz i uzupełnij pole „Tekst alternatywny”. Z tej wartości korzystają m.in. obrazki wyróżniające i zdjęcia produktów w WooCommerce.
- Blok Obrazek w edytorze: zaznacz blok i uzupełnij pole „Tekst alternatywny” w ustawieniach bloku.
Uwaga na pułapkę: przy wstawianiu obrazu do wpisu WordPress kopiuje alt do treści. Późniejsza zmiana w bibliotece mediów nie poprawi obrazów już wstawionych – trzeba je zaktualizować w edytorze. Ani pole „Tytuł”, ani nazwa pliku nie są tekstem alternatywnym.
W innych systemach szukaj przy obrazie pola „Tekst alternatywny” lub „Alt”. Zawsze sprawdź też wynikowy kod strony w narzędziach deweloperskich przeglądarki, bo zdarzają się motywy i wtyczki, które alt gubią albo nadpisują. Typowe problemy tej platformy opisujemy w artykule o dostępności WordPressa i WooCommerce.
Najczęstsze pytania
Czy każde zdjęcie we wpisie blogowym potrzebuje opisu?
Nie. Jeśli zdjęcie tylko buduje nastrój i nie wnosi informacji, pusty alt jest poprawny. Jeśli pokazuje coś, o czym mowa w tekście, np. efekt przed i po, opisz to, co ma znaczenie dla czytelnika.
Jak opisać zdjęcie osoby?
To zależy od kontekstu. Przy cytacie czy notce o autorze zwykle wystarczy imię, nazwisko i rola, np. „Anna Kowalska, projektantka”. Wygląd, emocje czy otoczenie opisuj wtedy, gdy mają znaczenie dla treści.
Czy generator opisów AI może pisać teksty alternatywne za mnie?
Może pomóc przygotować pierwszą wersję, ale nie zna kontekstu strony ani celu, w jakim użyto obrazu. Każdy wygenerowany opis przejrzyj i popraw, a przy obrazach dekoracyjnych zostaw pusty alt.
Czy film też potrzebuje tekstu alternatywnego?
Element video nie ma atrybutu alt. Nagrania potrzebują innych alternatyw: przede wszystkim napisów (kryterium 1.2.2 Captions (Prerecorded) – napisy do nagrań), a zależnie od treści także audiodeskrypcji lub transkrypcji.