Jak pisać tekst alternatywny zgodny z WCAG 2.1 AA — poradnik dla sklepów
· alt text · WCAG · polski · dostępność
Jak pisać tekst alternatywny zgodny z WCAG 2.1 AA — poradnik dla sklepów
Tekst alternatywny shopify, WooCommerce, Shoper — nieważne, na jakiej platformie prowadzisz sklep, zasada jest ta sama: każde zdjęcie produktowe bez atrybutu alt to bariera dla klientów korzystających z czytników ekranu i jednocześnie punkt niezgodności z kryterium sukcesu 1.1.1 WCAG 2.1 AA. Ustawa o dostępności cyfrowej obowiązuje polskich przedsiębiorców od 28 czerwca 2025 roku, a jej niewykonanie może skutkować dotkliwymi konsekwencjami finansowymi. Warto zacząć od podstaw — od dobrze napisanego opisu obrazu.
Czym jest tekst alternatywny i dlaczego ma znaczenie dla Twojego sklepu
Atrybut alt to krótki opis obrazu osadzony bezpośrednio w kodzie HTML. Czytniki ekranu odczytują go na głos osobom niewidomym lub słabowidzącym. Roboty Google również go indeksują — poprawnie napisany alt text poprawia widoczność produktów w wynikach wyszukiwania grafik.
Dla sklepu internetowego to podwójna wartość: lepsza dostępność cyfrowa i potencjalnie wyższy ruch organiczny. Badania WebAIM z 2024 roku pokazują, że 22,3% stron głównych dużych sklepów zawiera obrazy z pustym lub brakującym atrybutem alt. W polskim e-commerce odsetek ten bywa jeszcze wyższy.
Jak wygląda dobry alt text dla zdjęć produktowych
Dobry opis jest konkretny, zwięzły i oddaje kontekst użycia produktu. Unikaj ogólnych fraz pokroju „zdjęcie produktu" lub samej nazwy pliku.
Kilka polskich przykładów:
| Produkt | Zły alt | Dobry alt |
|---|---|---|
| Sukienka | sukienka.jpg | Damska sukienka w kratę, rozmiar M, biało-czerwona, zapięcie na guziki |
| Buty sportowe | produkt123 | Buty do biegania Nike Air Zoom, kolor szary, rozmiar 42 |
| Lampa stołowa | lampa zdjęcie | Lampa stołowa z podstawą z drewna dębowego i białym kloszem, wys. 45 cm |
Kilka praktycznych zasad:
- Opisuj kolor, materiał i rozmiar, jeśli są widoczne na zdjęciu
- Podawaj markę i model, gdy są istotne dla decyzji zakupowej
- Nie powtarzaj treści, która jest już w nagłówku lub tytule produktu
- Pomijaj frazy „obrazek przedstawia" — czytnik ekranu sam komunikuje, że to grafika
- Ogranicz opis do około 100–120 znaków
Obrazy dekoracyjne (np. tło sekcji, separator graficzny) powinny mieć pusty atrybut alt="". To celowe działanie — czytnik ekranu pomija wtedy grafikę, nie przerywając odczytu treści użytkownikowi.
Tekst alternatywny w Shopify, WooCommerce i Shoper
Każda z platform umożliwia edycję atrybutu alt, choć robi to inaczej.
Shopify — alt text edytujesz w panelu administracyjnym przy każdym zdjęciu produktu: Produkty → wybrany produkt → zdjęcie → Edytuj alt. Shopify nie wymaga go przy przesyłaniu, więc tysiące zdjęć mogą być bez opisu.
WooCommerce — atrybut alt ustawiasz w bibliotece multimediów WordPress lub bezpośrednio na karcie produktu w polu „Tekst alternatywny". Wtyczki takie jak Yoast SEO ostrzegają o brakujących opisach, ale nie uzupełniają ich automatycznie.
Shoper — wbudowany edytor zdjęć w panelu produktu posiada pole alt text. Przy imporcie produktów z pliku CSV kolumna image_alt pozwala wypełnić opisy hurtowo.
Dla sklepów z setkami lub tysiącami produktów ręczne uzupełnianie opisów jest nierealne. Stąd rosnące zainteresowanie generatorami alt text opartymi na AI.
Generator tekstu alternatywnego AI — jak to działa po polsku
Nowoczesne generatory analizują obraz przy użyciu modeli multimodalnych i zwracają opis w wybranym języku. Ważne, żeby narzędzie rzeczywiście rozumiało język polski — nie tylko tłumaczyło angielski opis na polski.
Altvisor generuje teksty alternatywne w 24 oficjalnych językach UE, w tym po polsku, używając modeli Mistral hostowanych w Europie. Dane nie opuszczają serwerów UE, co jest istotne przy przetwarzaniu zdjęć produktowych, które mogą zawierać wizerunki osób.
Przykładowy kod HTML z dobrze wygenerowanym atrybutem alt:
<img
src="/produkty/sukienka-kratka-M.webp"
alt="Damska sukienka w kratę, rozmiar M, biało-czerwona, zapięcie na guziki"
width="800"
height="1000"
loading="lazy"
/>
Zwróć uwagę na obecność width, height i loading="lazy" — to dodatkowe atrybuty istotne dla wydajności strony i poprawnego renderowania layoutu.
Deklaracja dostępności a alt texty
Ustawa o dostępności cyfrowej zobowiązuje sklepy do opublikowania deklaracji dostępności — dokumentu zgodnego z Annex V dyrektywy EAA. Deklaracja musi zawierać m.in. informację o poziomie zgodności z WCAG 2.1 AA oraz o znanych barierach dostępności.
Brakujące alt texty na zdjęciach produktowych to jedna z najczęściej wymienianych niezgodności w audytach dostępności polskich e-commerceów. Automatyczny skan dostępności pozwala szybko zidentyfikować skalę problemu — Altvisor oferuje bezpłatny skaner WCAG, który przejrzy Twoją stronę i wskaże brakujące opisy.
Po naprawieniu obrazów możesz wygenerować deklarację dostępności Annex V bezpośrednio w narzędziu, bez angażowania zewnętrznego audytora na tym etapie.
Uruchom bezpłatny skan WCAG swojego sklepu — a następnie zacznij za darmo generować alt texty automatycznie.