Najważniejsze wnioski
- Dobry tekst alternatywny przekazuje informację lub cel działania obrazu, a nie mechanicznie opisuje każdy widoczny szczegół.
- Nie każdy obraz potrzebuje opisowego altu. Grafika dekoracyjna powinna zwykle mieć pusty atrybut alt="", aby czytnik ekranu ją pominął.
- Dla obrazu będącego linkiem lub przyciskiem alt powinien mówić, dokąd prowadzi albo co uruchamia element.
- Alt wspiera SEO, ale nie jest miejscem na listę słów kluczowych. Najpierw ma być przydatny dla użytkownika w danym kontekście.
- Widget dostępności może automatycznie uzupełniać wybrane wykrywalne atrybuty, ale trafność opisu wymaga decyzji człowieka oraz kontroli w treści i kodzie.
Dla zarządzającego
Teksty alternatywne są małym, ale powtarzalnym elementem jakości treści i dostępności sklepu lub serwisu. Warto włączyć ich tworzenie do procesu publikacji, katalogu produktów i odbioru zmian, zamiast poprawiać je dopiero po audycie.
Dla sprzedaży
W opisach produktów, banerach promocyjnych i ikonach CTA alt powinien wyjaśniać użytkownikowi ofertę albo cel kliknięcia. Zespół sprzedaży może dostarczyć redakcji kontekst biznesowy, ale nie powinien zamieniać pola alt w listę fraz SEO.
Tekst alternatywny ALT powinien przekazywać użytkownikowi to, co obraz wnosi do treści lub działania strony. Nie jest podpisem pod zdjęciem, nazwą pliku ani miejscem na upychanie fraz SEO. W sklepie internetowym dobry alt pomaga zrozumieć produkt i wariant, a przy ikonie lub banerze wyjaśnia cel kliknięcia.
To ważne, ponieważ brak lub błędne opisy obrazów nadal są powszechne. WebAIM wykrył brak tekstu alternatywnego na 55,5% analizowanych stron głównych w raporcie z 2025 roku. Nie oznacza to, że każdy obraz powinien dostać długi opis. Oznacza natomiast, że każdy obraz powinien mieć świadomie określoną alternatywę.
Najważniejsze wnioski
- Najpierw ustal funkcję obrazu: informuje, prowadzi do celu, uruchamia działanie, dekoruje czy prezentuje złożone dane.
- Opisuj sens dla użytkownika, nie pełną zawartość piksel po pikselu.
- Stosuj
alt=""dla elementów czysto dekoracyjnych zapisanych jako obraz. - Przy linku lub przycisku nazwij cel albo działanie, nie samą grafikę.
- Traktuj alt jako część procesu publikacji, testów i planu WCAG w praktyce dla właściciela strony.
Co to jest tekst alternatywny ALT?
Tekst alternatywny, zapisany zwykle w atrybucie HTML alt, jest tekstowym zamiennikiem obrazu. Czytnik ekranu może go odczytać, gdy użytkownik przejdzie do grafiki. Tekst może też zostać użyty w sytuacji, gdy obraz nie zostanie załadowany.
W standardzie WCAG kwestia ta wiąże się przede wszystkim z kryterium sukcesu 1.1.1 „Treść nietekstowa”. W3C nie wymaga, aby każdy obraz opisać tak samo szczegółowo. Wymaga zapewnienia alternatywy adekwatnej do celu treści nietekstowej.
Dobry alt nie odpowiada na pytanie „co jest na obrazku?”, lecz „czego użytkownik nie dowie się lub nie zrobi bez tego obrazu?”.
Czym ALT różni się od podpisu pod zdjęciem?
Podpis jest widoczny dla wszystkich użytkowników i zwykle rozwija kontekst zdjęcia. Alt jest przede wszystkim alternatywą treści obrazu. Mogą przekazywać podobną informację, ale nie powinny bezrefleksyjnie się dublować.
Jeżeli pod zdjęciem produktu widnieje tekst „Plecak miejski Trail 20 l, granatowy”, alt może brzmieć podobnie tylko wtedy, gdy obraz wnosi tę samą istotną informację. Gdy zdjęcie pokazuje ważny detal, na przykład system mocowania laptopa, opis alternatywny powinien uwzględnić tę cechę albo informacja powinna znaleźć się w tekście obok.
Jak dobrać ALT do rodzaju obrazu?
Najbezpieczniejszą metodą jest klasyfikacja obrazu według jego roli. Poniższa tabela pomaga podjąć decyzję przed wpisaniem czegokolwiek do pola „tekst alternatywny” w CMS-ie.
| Rodzaj obrazu | Co powinien przekazać ALT? | Przykład | Czego unikać? |
|---|---|---|---|
| Obraz informacyjny | Najważniejszy fakt potrzebny do zrozumienia treści. | alt="Zespół pakuje zamówienia przy stanowisku wysyłkowym" | alt="zdjęcie" i opisów bez znaczenia dla tekstu. |
| Zdjęcie produktu | Typ produktu oraz cechę odróżniającą wariant, jeśli ma znaczenie zakupowe. | alt="Czarny plecak miejski Trail 20 l, widok z przodu" | Powielania pełnej listy parametrów i fraz SEO. |
| Obraz jako link | Cel linku. | alt="Przejdź do kolekcji jesiennej" | alt="baner jesienny". |
| Ikona przycisku | Wykonywane działanie. | alt="Dodaj do ulubionych" | alt="serce", jeśli nie wyjaśnia działania. |
| Logo | Nazwę marki albo cel linku. | alt="Strona główna WCAGbot" | alt="logo". |
| Obraz dekoracyjny | Nic — ma zostać pominięty. | alt="" | alt="dekoracyjna fala". |
| Wykres lub infografika | Rodzaj grafiki i główny wniosek; dane szczegółowe umieść poza altem. | alt="Wykres wzrostu sprzedaży w drugim kwartale" | Wpisywania całej tabeli danych w krótkim atrybucie. |
WCAGbot Accessibility Path: proces pracy nad tekstami alternatywnymi
WCAGbot Accessibility Path porządkuje pracę nad obrazami jako część szerszego procesu dostępności cyfrowej. Nie chodzi o jednorazowe uzupełnienie pustych pól, lecz o ustalenie zasad, które zespół stosuje przy każdej publikacji i zmianie katalogu.
Jak wybrać właściwy tekst alternatywny
- Spisz miejsca użycia obrazów. Obejmij zdjęcia produktów, banery, logotypy, ikony, grafiki w artykułach, obrazki w formularzach oraz obrazy w e-mailach i panelu klienta.
- Oceń funkcję każdego typu. Ta sama fotografia może być informacyjna na stronie produktu i dekoracyjna w sekcji wizualnej, jeśli jej sens został już przekazany tekstowo.
- Ustal wzory redakcyjne. Dla produktu określ kolejność: rodzaj produktu, wariant, ważna cecha, ujęcie — ale wyłącznie wtedy, gdy te elementy są potrzebne użytkownikowi.
- Dodaj opisy w źródle. Wprowadzaj alt w CMS-ie, szablonie, danych produktowych lub kodzie komponentu. To trwałe miejsce naprawy, a nie doraźna korekta wyłącznie w warstwie wizualnej.
- Przetestuj kontekst. Sprawdź stronę klawiaturą i czytnikiem ekranu, szczególnie gdy obraz jest linkiem, przyciskiem albo zmienia treść dynamiczną. Pomocny będzie praktyczny plan testów klawiaturą i czytnikiem ekranu.
- Włącz kontrolę do publikacji. Ustal właściciela zadania: redakcję dla artykułów, e-commerce dla kart produktów, UX lub development dla interfejsu.
Jak opisywać obrazy w e-commerce?
W sklepie internetowym tekst alternatywny ma często znaczenie zakupowe. Pomaga odróżnić warianty produktu, zrozumieć zdjęcie zestawu albo rozpoznać funkcję ikony w koszyku. Nie powinien jednak kopiować automatycznie całego tytułu, SKU, opisu marketingowego i wszystkich filtrów z katalogu.
Zdjęcie główne produktu
Zacznij od nazwy rodzaju produktu i cechy odróżniającej wariant, o ile użytkownik nie otrzymuje jej jednoznacznie bezpośrednio przed obrazem. Przykład:
<img src="plecak-trail-czarny.jpg"
alt="Czarny plecak miejski Trail 20 l, widok z przodu">Jeśli galeria prezentuje pięć ujęć tego samego modelu, rozróżniaj je wtedy, gdy wnosi to wartość: „widok z boku”, „wnętrze z przegrodą na laptop”, „zbliżenie na zamek”. Nie twórz sztucznych opisów tylko dlatego, że w galerii jest wiele zdjęć.
Baner promocyjny jako link
Baner może zawierać grafikę, hasło i przycisk. Gdy cały baner jest linkiem, jego alternatywa powinna mówić, dokąd prowadzi:
<a href="/kolekcja-jesienna">
<img src="jesien.jpg" alt="Przejdź do kolekcji jesiennej">
</a>Jeżeli obok grafiki znajduje się już zwykły link o identycznym celu, warto sprawdzić, czy obraz nie powinien być dekoracyjny. Powtarzanie tej samej informacji przez czytnik ekranu może niepotrzebnie wydłużać nawigację.
Ikony koszyka, wyszukiwania i ulubionych
Ikona bez widocznej etykiety musi mieć dostępną nazwę opisującą działanie. W zależności od użytego komponentu nie zawsze będzie to atrybut alt: dla elementu button częściej potrzebny jest dostępny tekst, poprawnie powiązana etykieta albo odpowiednio użyte ARIA. Więcej o granicach tego mechanizmu wyjaśnia artykuł ARIA w praktyce: kiedy wspiera dostępność strony.
Czego nie robić w tekście alternatywnym?
- Nie zaczynaj automatycznie od „zdjęcie przedstawia”. Czytnik ekranu zwykle komunikuje, że element jest obrazem. Zacznij od informacji, która ma znaczenie.
- Nie używaj nazwy pliku.
IMG_4821.jpgnie mówi użytkownikowi nic użytecznego. - Nie wpisuj „grafika”, „obraz”, „image”. To opisy puste znaczeniowo.
- Nie upychaj fraz SEO. Alt typu „buty sportowe damskie tanie buty do biegania sklep Warszawa” jest nieprzydatny i niezgodny z zaleceniem Google dotyczącym naturalnych opisów.
- Nie zostawiaj braku decyzji. Brak atrybutu
altnie jest tym samym co świadomealt=""dla dekoracji. - Nie próbuj opisać całego wykresu w jednym polu. Najważniejszy wniosek podaj w alcie, a tabelę danych lub szczegółową interpretację umieść w treści.
ALT, podpis i opis szczegółowy: różne zadania
Mini-scenariusz ilustracyjny: karta produktu z pięcioma zdjęciami
To scenariusz ilustracyjny, a nie opis wdrożenia u klienta. Sklep sprzedaje termos w dwóch kolorach. Tytuł strony podaje nazwę, pojemność i kolor wybranego wariantu. Galeria zawiera zdjęcie główne, widok korka, detal uchwytu, zdjęcie otwartego termosu i dekoracyjne zdjęcie lifestyle.
Zespół może zastosować następującą decyzję:
- zdjęcie główne:
alt="Zielony termos stalowy 750 ml"; - zbliżenie korka:
alt="Termos z zakręcanym korkiem i uchwytem"; - otwarty termos:
alt="Otwarty termos z szerokim wlewem"; - zdjęcie lifestyle, które nie dodaje informacji o produkcie:
alt="".
Ważne: gdy kolor wariantu jest już jednoznacznie zakomunikowany czytnikowi przy wyborze wariantu i nagłówku produktu, powtarzanie koloru w każdym alcie może być zbędne. Poprawność zależy od całego doświadczenia użytkownika, nie od sztywnego szablonu.
Czy automatyczne uzupełnianie altów wystarczy?
Automatyczne mechanizmy mogą wspierać wykrywanie niektórych brakujących atrybutów i uzupełniać wybrane elementy, które system potrafi rozpoznać. WCAGbot oferuje funkcje automatycznego uzupełniania wybranych wykrywalnych atrybutów ARIA, alt i title. Jest to pomocny pierwszy krok, zwłaszcza gdy strona ma wiele starszych komponentów.
Automatyzacja nie zna jednak zawsze kontekstu biznesowego, intencji autora, znaczenia wariantu produktu ani tego, czy obraz jest celowo dekoracyjny. Dlatego nie zastępuje redakcyjnej decyzji, audytu WCAG ani naprawy źródłowej w kodzie i treści. Zobacz, gdzie automatyczne atrybuty pomagają, a gdzie niosą ryzyko.
Doświadczeniowe CTA: otwórz panel WCAGbot na własnej stronie, sprawdź funkcje czytania treści, zwiększ tekst i przejdź przez najważniejszą kartę produktu. Następnie porównaj, czy obrazy, linki i przyciski nadal przekazują użytkownikowi pełny sens interfejsu. Zakres widgetu oraz granice tego wsparcia opisujemy w materiale Widget dostępności WCAGbot: możliwości i ograniczenia.
Jak sprawdzić jakość altów przed publikacją?
Automatyczny skaner może wykryć brak atrybutu, ale nie oceni pewnie, czy opis jest trafny. Wprowadź krótką kontrolę jakości dla każdej nowej strony, kolekcji lub kampanii:
- Wyłącz obrazy w przeglądarce lub przejrzyj kod i listę mediów w CMS-ie.
- Przy każdym obrazie odpowiedz: jaka jest jego funkcja w tym miejscu?
- Sprawdź, czy alt obrazu-linku komunikuje cel, a nie wygląd banera.
- Sprawdź, czy dekoracje mają
alt="", a nie przypadkową nazwę pliku. - Zweryfikuj kartę produktu klawiaturą oraz czytnikiem ekranu.
- Przejrzyj formularze, koszyk i płatność, ponieważ w tych miejscach ikony i komunikaty wizualne szczególnie łatwo tworzą bariery. Pomocna będzie checklista dostępności formularzy, koszyka i płatności w e-commerce.
Podsumowanie dla zarządzającego i sprzedaży
Tekst alternatywny jest częścią jakości informacji produktowej, obsługi klienta i dostępności cyfrowej. Największą wartość daje wtedy, gdy powstaje razem z kartą produktu, banerem lub komponentem interfejsu, a nie jako późniejsze zadanie techniczne.
Dla zarządzającego oznacza to potrzebę prostego procesu i odpowiedzialności między zespołami. Dla sprzedaży — konieczność przekazania redakcji cech, które rzeczywiście odróżniają produkt lub ofertę. Dla zespołu technicznego — poprawne osadzenie alternatywy w źródle oraz testowanie elementów interaktywnych.
Jeżeli dostępność strony dotyczy także obowiązków związanych z usługą e-commerce, nie ograniczaj oceny do samych altów. Zakres zależy od rodzaju podmiotu i usługi. Materiał ma charakter informacyjny, nie jest poradą prawną; kontekst mikroprzedsiębiorców omawia artykuł Mikroprzedsiębiorca a PAD: kiedy dotyczy e-commerce?.
Karta produktu z poprawnym tekstem alternatywnym
FAQ: tekst alternatywny ALT
Czy każdy obraz musi mieć tekst alternatywny?
Każdy obraz powinien mieć świadomie rozstrzygniętą alternatywę. Obraz informacyjny lub funkcjonalny potrzebuje sensownego opisu. Obraz czysto dekoracyjny powinien zwykle otrzymać pusty atrybut alt="".
Czy pusty alt oznacza błąd?
Nie. Pusty alt jest właściwy, gdy obraz nie wnosi informacji ani funkcji i ma zostać pominięty przez technologie asystujące. Błędem bywa natomiast brak atrybutu alt przy elemencie img, gdy autor nie podjął decyzji o roli obrazu.
Jak długi powinien być tekst alternatywny?
Nie ma uniwersalnego limitu znaków narzuconego przez WCAG. Opis powinien być tak krótki, jak to możliwe, ale wystarczający do przekazania sensu. Przy wykresach i złożonych infografikach szczegóły należy umieścić w tekście obok, tabeli albo osobnym opisie.
Czy alt powinien zaczynać się od słów „zdjęcie przedstawia”?
Zwykle nie ma takiej potrzeby. Czytnik ekranu często informuje, że użytkownik znajduje się na obrazie. Lepiej od razu przekazać istotną treść, na przykład „Czarny plecak miejski Trail 20 l, widok z przodu”.
Jak opisać obraz będący linkiem?
Opisz cel linku. Jeśli kliknięcie otwiera raport, użyj na przykład „Pobierz raport roczny 2025”. Jeśli prowadzi do kategorii, nazwij kategorię. Sam opis wyglądu grafiki nie wystarczy.
Czy nazwa pliku może być tekstem alternatywnym?
Nie. Nazwa typu produkt_12_final.jpg nie przekazuje użytkownikowi ani treści, ani celu elementu. Nazwę pliku można traktować jako wewnętrzną informację techniczną, nie jako alternatywę dla obrazu.
Czy tekst alternatywny wpływa na SEO?
Może wspierać rozumienie obrazu przez wyszukiwarki, szczególnie wraz z kontekstem strony. Nie należy jednak tworzyć altów wyłącznie pod SEO. Google zaleca opisy przydatne i naturalne, a nie ciągi słów kluczowych.
Jak opisać logo firmy?
Jeśli logo jest linkiem do strony głównej, alt powinien zwykle komunikować ten cel, na przykład „Strona główna firmy X”. Gdy logo pełni wyłącznie funkcję informacyjną, może wystarczyć nazwa firmy. Jeśli stoi obok identycznej nazwy w tekście i nic nie dodaje, może być dekoracyjne.
Jak opisać wykres albo infografikę?
W alcie podaj typ grafiki i najważniejszy wniosek. Dokładne dane oraz ich interpretację zapewnij w tekście, tabeli lub opisie po grafice. Użytkownik powinien otrzymać te same istotne informacje niezależnie od możliwości zobaczenia wykresu.
Czy opis wygenerowany przez AI wystarczy?
Może być roboczą propozycją, ale wymaga kontroli człowieka. Narzędzie może nie znać kontekstu strony, nie odróżnić dekoracji od istotnej informacji ani nie rozpoznać funkcji obrazu jako linku lub przycisku.
Czy widget dostępności naprawi wszystkie błędy ALT?
Nie. Widget może wspierać użytkownika i automatycznie uzupełniać wybrane wykrywalne atrybuty, ale nie zastępuje poprawy opisów w CMS-ie, danych produktowych, kodzie ani audytu. Trwałe usuwanie barier wymaga pracy nad źródłem strony i treścią.
Dodaj funkcje dostępności: uruchom WCAGbot jako szybki pierwszy krok, przetestuj narzędzia na swojej stronie i zaplanuj trwałe poprawki w treści oraz kodzie. Dodaj funkcje dostępności swojej strony i przetestuj WCAGbot.
