Najważniejsze wnioski
- Tekst alternatywny ma przekazać informację albo funkcję obrazu w konkretnym kontekście strony, a nie szczegółowo opisywać każdy widoczny piksel.
- Zdjęcie produktu wymaga opisu cech widocznych na zdjęciu, które mogą wpłynąć na ocenę lub wybór towaru. Kolejne zdjęcia galerii powinny opisywać różnice między ujęciami.
- Grafika czysto dekoracyjna powinna mieć pusty atrybut alt="", aby czytnik ekranu mógł ją pominąć. Brak atrybutu alt nie jest tym samym co świadome oznaczenie dekoracji.
- Ikona będąca linkiem lub przyciskiem powinna komunikować cel albo efekt działania, np. „Otwórz wyszukiwarkę”, a nie „Ikona lupy”.
- Automatyczne uzupełnianie wykrywalnych atrybutów może być pomocnym pierwszym krokiem, ale nie rozpozna pewnie kontekstu biznesowego, znaczenia zdjęcia ani funkcji każdego elementu. Potrzebne są przegląd treści, testy i naprawa źródłowa.
Dla zarządzającego
Teksty alternatywne są niewielkim elementem procesu zakupowego, ale ich jakość wpływa na to, czy część użytkowników otrzyma informacje o produkcie, promocji i funkcjach sklepu. Warto wdrożyć prosty standard redakcyjny dla zdjęć, ikon oraz banerów i kontrolować go przy publikacji asortymentu.
Dla sprzedaży
Dobre alty pomagają przekazać cechy produktu osobom korzystającym z technologii asystujących. Zespół sprzedaży i e-commerce powinien przygotowywać opisy widocznych różnic między wariantami, a nie powielać samej nazwy produktu lub list słów kluczowych.
Tekst alternatywny w e-commerce powinien odpowiadać na jedno pytanie: co użytkownik straci, jeśli nie zobaczy tego obrazu? Jeśli zdjęcie pokazuje cechę produktu, opis ma tę cechę przekazać. Jeśli grafika uruchamia działanie, alt lub dostępna nazwa ma wyjaśniać działanie. Jeżeli obraz jest wyłącznie ozdobą, powinien zostać pominięty przez technologię asystującą.
To ważne zarówno na karcie produktu, jak i w menu, koszyku, wyszukiwarce, listach kategorii oraz banerach promocyjnych. Samo dodanie atrybutu alt nie wystarcza. Tekst może być pusty, zbyt ogólny, powielony albo niezgodny z funkcją elementu.
Najważniejsze wnioski
- Nie istnieje jeden uniwersalny wzór altu dla wszystkich obrazów sklepu.
- Zdjęcie produktu opisuje cechy widoczne i istotne dla decyzji zakupowej.
- Dekoracja otrzymuje
alt="", a nie przypadkowy opis i nie brak atrybutu. - Ikona w linku lub przycisku komunikuje skutek działania, a nie swój kształt.
- Automatyzacja może wspierać wykrywanie wybranych braków, lecz nie zastąpi oceny kontekstu przez człowieka.
Czym jest tekst alternatywny i dlaczego sklep go potrzebuje?
Tekst alternatywny, zwykle zapisany w atrybucie alt elementu img, jest tekstowym odpowiednikiem obrazu. Czytnik ekranu może go odczytać użytkownikowi, a w określonych sytuacjach może on pojawić się także wtedy, gdy grafika się nie załaduje.
W praktyce dostępności cyfrowej nie chodzi o opisanie każdego zdjęcia jak w katalogu muzealnym. Chodzi o przekazanie tej informacji, którą obraz wnosi do zadania użytkownika: rozpoznania produktu, wyboru koloru, znalezienia koszyka, uruchomienia wyszukiwarki albo poznania warunków promocji.
W3C rozróżnia obrazy informacyjne, funkcjonalne, dekoracyjne oraz bardziej złożone grafiki. Podstawowa zasada jest prosta: opisuj funkcję albo informację, nie sam fakt istnienia obrazu. Zobacz też, jak ta zasada wpisuje się w szersze cztery zasady WCAG na przykładzie sklepu internetowego.
Dobry alt nie odpowiada na pytanie „co widać na pliku?”, lecz „jaką informację lub możliwość działania otrzymuje osoba, która widzi ten element?”.
WCAGbot Accessibility Path: jak podjąć decyzję przed wpisaniem altu?
W zespole e-commerce warto stosować powtarzalny proces, szczególnie gdy produkty dodają różne osoby, agencja lub dostawcy danych produktowych. Nazwaliśmy go WCAGbot Accessibility Path. Nie jest to automatyczny test zgodności, lecz praktyczna ścieżka redakcyjna.
- Ustal miejsce użycia obrazu. Ten sam plik może występować na karcie produktu, w banerze i w wynikach wyszukiwania.
- Określ rolę. Czy obraz informuje o produkcie, dekoruje, czy uruchamia akcję?
- Wskaż informację niedostępną poza obrazem. Nie powtarzaj bez potrzeby nazwy produktu, która już jest w sąsiednim nagłówku.
- Napisz krótki odpowiednik tej informacji lub funkcji. Unikaj ocen marketingowych i list fraz SEO.
- Sprawdź działanie w interfejsie. Przejdź do elementu klawiaturą oraz posłuchaj, jak jest komunikowany przez czytnik ekranu.
- Popraw źródło. Jeśli opis generuje system PIM, CMS lub szablon, napraw regułę tam, gdzie powstaje problem.
Testowanie klawiaturą jest ważne szczególnie dla ikon i obrazków będących linkami. Praktyczną procedurę znajdziesz w artykule Nawigacja klawiaturą: test strony bez myszy w 15 minut.
Jak opisać zdjęcie produktu?
Zdjęcie produktu jest zwykle obrazem informacyjnym. Alt powinien przekazywać cechy widoczne na konkretnym ujęciu, jeśli mogą one mieć znaczenie dla oceny towaru: rodzaj, kolor, fason, materiał widoczny w zbliżeniu, perspektywę albo element konstrukcyjny.
Nie ma jednej poprawnej długości tekstu alternatywnego. Zwięzłość jest cenna, ale nie może usuwać informacji, która odróżnia warianty lub ujęcia. Dobra praktyka to rozpoczęcie od nazwy rodzajowej, a następnie dodanie tylko cech widocznych i przydatnych.
WCAGbot Accessibility Path dla obrazów w e-commerce
| Typ obrazu | Słaby alt | Lepszy alt | Dlaczego |
|---|---|---|---|
| Zdjęcie główne sukienki | Sukienka | Czarna sukienka midi z długim rękawem i paskiem w talii | Opisuje widoczne cechy pomocne w ocenie produktu. |
| Drugie zdjęcie galerii | Czarna sukienka midi | Czarna sukienka midi, widok z tyłu | Przekazuje różnicę względem pierwszego ujęcia. |
| Zbliżenie materiału | Materiał | Zbliżenie prążkowanej dzianiny czarnej sukienki | Wyjaśnia, co pokazuje detal. |
| Zdjęcie dekoracyjne | Kobieta w jasnym wnętrzu | alt="" | Jeśli nie przekazuje informacji o produkcie ani usłudze, czytnik może je pominąć. |
| Ikona koszyka | Ikona koszyka | Koszyk, 3 produkty | Komunikuje cel i istotny stan interfejsu. |
| Przycisk z lupą | Lupa | Otwórz wyszukiwarkę | Nazywa efekt aktywacji przycisku. |
Jak opisywać warianty i galerię produktu?
Najczęstszy błąd to powtarzanie identycznego tekstu przy każdej miniaturze: „Buty sportowe model X”. Użytkownik czytnika ekranu słyszy wtedy tę samą informację wiele razy, choć kolejne zdjęcia pokazują widok z boku, podeszwę albo dostępny kolor.
Lepszy zestaw opisów może wyglądać tak:
- „Czarne damskie sneakersy z białą podeszwą, widok z boku”;
- „Czarne damskie sneakersy, widok od góry”;
- „Czarne damskie sneakersy, podeszwa z bieżnikiem”;
- „Czarne damskie sneakersy, zbliżenie sznurowania”.
Jeśli kolor lub wzór są dostępne jako osobne warianty, ich wybór powinien mieć również czytelną nazwę tekstową. Nie polegaj wyłącznie na kolorowych próbkach. To zagadnienie łączy się z projektowaniem dostępności sklepu internetowego od pierwszych kroków.
Kiedy obraz jest dekoracją?
Obraz dekoracyjny buduje estetykę, ale nie przekazuje informacji koniecznej do zrozumienia treści, skorzystania z funkcji albo podjęcia decyzji zakupowej. Może to być tło sekcji, abstrakcyjny kształt, powtarzalna tekstura lub zdjęcie lifestyle’owe, które nie pokazuje produktu ani sposobu jego użycia.
Dla takiego obrazu właściwym rozwiązaniem jest pusty atrybut:
<img src="dekoracja.jpg" alt="">Pusty alt jest informacją dla technologii asystującej: „ten element nie wymaga odczytania”. Brak atrybutu alt oznacza co innego i może spowodować odczytanie nazwy pliku lub niejednoznacznego komunikatu.
Dlaczego ta sama fotografia czasem jest dekoracją, a czasem nie?
Kontekst zmienia znaczenie. Zdjęcie osoby z kremem może być dekoracyjne na stronie kategorii, ale informacyjne na karcie produktu, jeżeli pokazuje konsystencję, sposób aplikacji lub efekt, który opis strony przedstawia jako cechę oferty. W takim przypadku trzeba przekazać dostępnie tę informację, najlepiej również zwykłym tekstem HTML obok grafiki.
Nie przenoś kluczowych informacji wyłącznie do obrazu. Dotyczy to zwłaszcza grafik z terminem promocji, rozmiarem, sposobem montażu, tabelą wymiarów czy warunkami dostawy. Warto sprawdzić, czy istotne komunikaty są obecne także w strukturze tekstowej, podobnie jak w przypadku informacji o dostępności usługi w regulaminie sklepu.
Jak opisywać ikony, logo i banery?
Ikona nie jest automatycznie dekoracją. Jeśli stanowi jedyny widoczny znak przycisku lub linku, musi mieć dostępną nazwę. W przypadku obrazu wewnątrz linku tekst alternatywny może pełnić funkcję tekstu linku. W przypadku przycisku dostępna nazwa może pochodzić z tekstu, atrybutu ARIA albo odpowiednio skonstruowanego elementu graficznego.
Ikony funkcjonalne
- Ikona serca dodająca produkt do listy: „Dodaj do ulubionych” albo „Usuń z ulubionych” zależnie od stanu.
- Ikona zamknięcia okna: „Zamknij okno” zamiast „X”.
- Ikona filtra: „Otwórz filtry”.
- Ikona konta: „Moje konto” albo „Zaloguj się” zależnie od celu.
- Ikona koszyka: „Koszyk” oraz, gdy to istotne, liczba produktów komunikowana w dostępnej nazwie lub osobnym tekście.
Nie należy jednak dodawać tej samej informacji dwa razy. Jeżeli przycisk ma już widoczny tekst „Szukaj”, dekoracyjna ikona lupy powinna być ukryta przed czytnikiem, aby użytkownik nie usłyszał „Szukaj, lupa”.
Produkt, dekoracja i ikona: trzy różne decyzje
Logo i baner promocyjny
Logo będące linkiem do strony głównej powinno komunikować markę i cel linku, np. „Nazwa marki — strona główna”. Baner promocyjny wymaga opisu oferty oraz celu przejścia, jeśli jego treść nie występuje jako tekst HTML obok. Nie wystarczy „Promocja” ani „Baner”.
<a href="/obuwie-jesienne">
<img src="promocja.jpg" alt="-30% na obuwie jesienne, oferta ważna do niedzieli">
</a>Jeżeli oferta ma warunki, które wpływają na decyzję zakupową, pełne warunki powinny być dostępne w treści strony lub po przejściu do jasno nazwanego miejsca. Sam alt nie powinien być jedyną lokalizacją złożonej informacji.
SEO a tekst alternatywny: gdzie jest granica?
Tekst alternatywny może pomagać wyszukiwarkom rozumieć obraz, ale nie jest polem do upychania fraz. Google zaleca opisy użyteczne, osadzone w kontekście strony i ostrzega przed keyword stuffingiem.
Słabo: buty damskie sneakersy czarne tanie obuwie sportowe promocja
Lepiej: Czarne damskie sneakersy z białą podeszwą
Drugi przykład może naturalnie zawierać słowa związane z ofertą, ponieważ opisuje rzeczywisty obraz. Nie powiela jednak mechanicznie wszystkich fraz, pod które sklep chce być widoczny. Dostępność i użyteczność powinny prowadzić decyzję redakcyjną, a efekt SEO traktuj jako możliwą korzyść uboczną.
Co może automatyczne uzupełnianie altów, a czego nie rozstrzygnie?
Narzędzia automatyczne mogą wykrywać część obrazów bez atrybutu, uzupełniać wybrane wykrywalne atrybuty lub sygnalizować powtarzalne problemy. WCAGbot wspiera dostępność między innymi przez automatyczne uzupełnianie wybranych atrybutów ARIA, alt i title w elementach, które system potrafi wykryć.
To może być rozsądny pierwszy krok, ale nie jest równoznaczne z pełną zgodnością z WCAG ani z audytem. Algorytm nie zna pewnie intencji kampanii, znaczenia konkretnego kadru, różnicy między zdjęciem ilustracyjnym i dowodowym ani biznesowej wagi danego wariantu produktu. Nie powinien też samodzielnie przesądzać, czy obraz jest dekoracją w każdym kontekście.
Dlatego po wdrożeniu funkcji wspierających dostępność potrzebna jest praca źródłowa: poprawa danych produktowych, szablonów komponentów, opisów wariantów i mechanizmów koszyka. Więcej o uczciwej granicy między widgetem a naprawą znajdziesz w artykule Widget dostępności a zgodność z WCAG: uczciwe porównanie.
Mini-scenariusz ilustracyjny: karta produktu z powielonymi altami
Scenariusz ilustracyjny — nie opisuje wdrożenia u klienta. Sklep z odzieżą publikuje kartę sukienki z sześcioma zdjęciami. Każda fotografia ma alt „Sukienka Luna”. Użytkownik czytnika ekranu słyszy sześć razy identyczną nazwę, ale nie dowiaduje się, że galeria pokazuje tył, rękaw, fakturę materiału i pasek.
Zespół ustala standard: pierwsze zdjęcie zawiera skrócony opis produktu, a kolejne odnoszą się tylko do nowej informacji wizualnej. Powstają opisy „widok z tyłu”, „zbliżenie prążkowanej dzianiny” i „detal paska w talii”. Jednocześnie zdjęcie modelki w sekcji inspiracyjnej otrzymuje alt="", ponieważ nie dodaje informacji o produkcie.
Na końcu zespół testuje kartę klawiaturą: przechodzi po miniaturach, przycisku powiększenia, wyborze koloru i dodaniu do koszyka. Taki test warto połączyć z kontrolą formularzy oraz komunikatów błędów, ponieważ bariery zakupowe rzadko występują w jednym miejscu. Pomocne wskazówki dotyczące szerszego zakresu wymagań zawiera tekst EN 301 549 dla e-commerce: wymagania poza samym WCAG.
Checklista publikacji obrazu w sklepie
- Czy obraz przekazuje informację, której nie ma już jasno w sąsiednim tekście?
- Czy alt opisuje cechę produktu widoczną na danym ujęciu, a nie tylko nazwę kategorii?
- Czy kolejne zdjęcia galerii różnią się opisem, gdy pokazują różne perspektywy lub detale?
- Czy grafika dekoracyjna ma
alt=""? - Czy ikona w linku lub przycisku komunikuje działanie albo cel?
- Czy tekst promocji, terminy i warunki są dostępne także poza samą grafiką?
- Czy opis nie zawiera marketingowych ocen typu „najlepszy”, „piękny”, „wyjątkowy”, jeśli nie są informacją wizualną?
- Czy alt nie jest listą słów kluczowych?
- Czy element działa i ma sens podczas obsługi klawiaturą oraz z czytnikiem ekranu?
- Czy poprawka została wprowadzona w CMS, PIM lub komponencie źródłowym, a nie wyłącznie doraźnie?
Kontrola galerii produktu przed publikacją
Temat obrazów jest jednym z elementów dostępności sklepu. Jeśli analizujesz obowiązki związane z usługami e-commerce, zacznij od materiału Czy Polski Akt o Dostępności dotyczy sklepu online?. Artykuł ma charakter informacyjny i nie stanowi porady prawnej; wymogi dla konkretnej firmy zależą od zakresu usługi oraz jej sytuacji.
FAQ: tekst alternatywny w e-commerce
Czy każde zdjęcie w sklepie musi mieć tekst alternatywny?
Każdy element img powinien mieć właściwie podjętą decyzję dotyczącą alternatywy tekstowej. Dla obrazu informacyjnego będzie to opis, dla funkcjonalnego nazwa działania, a dla dekoracyjnego pusty atrybut alt="".
Czy pusty alt oznacza błąd?
Nie. Pusty alt jest prawidłowym rozwiązaniem dla grafiki czysto dekoracyjnej. Błędem może być natomiast brak atrybutu alt tam, gdzie obraz powinien zostać świadomie pominięty albo opisany.
Jak długi powinien być alt zdjęcia produktu?
Powinien być tak krótki, jak pozwala przekazać istotną informację. Nie ma uniwersalnego limitu znaków. Opisuj cechy odróżniające produkt lub konkretne ujęcie, bez zbędnych ocen i powtórzeń.
Czy trzeba wpisywać „zdjęcie” lub „obraz” na początku altu?
Zwykle nie. Czytnik ekranu zazwyczaj komunikuje typ elementu. Lepiej przeznaczyć tekst na faktyczną informację, np. „Granatowa kurtka pikowana, widok z przodu”.
Jak opisać zdjęcia różnych kolorów tego samego produktu?
Wskaż kolor oraz cechę potrzebną do odróżnienia wariantu, np. „Plecak miejski model Nova w kolorze oliwkowym”. Jeżeli kolor jest wybierany przez osobny kontroler, sam kontroler również powinien mieć czytelną nazwę tekstową.
Czy ikona koszyka powinna mieć alt „koszyk”?
Jeśli ikona jest jedyną zawartością linku, „Koszyk” jest lepsze niż „Ikona koszyka”. Gdy interfejs przekazuje liczbę produktów, warto udostępnić także tę informację, np. „Koszyk, 3 produkty”.
Czy logo powinno mieć alt „logo firmy”?
Jeśli logo jest linkiem do strony głównej, opis powinien przekazywać markę i funkcję linku, np. „Nazwa marki — strona główna”. Jeśli obok występuje już identyczny tekstowy link, należy unikać niepotrzebnego dublowania komunikatu.
Czy alt wpływa na SEO obrazów?
Może być jednym z sygnałów pomagających wyszukiwarce zrozumieć obraz, ale nie należy traktować go jako miejsca na frazy kluczowe. Najpierw opisuj obraz użytecznie dla użytkownika i zgodnie z kontekstem strony.
Czy automatyczne generowanie altów wystarczy?
Nie. Automatyzacja może pomóc wykrywać część problemów i wspierać uzupełnianie rozpoznawalnych elementów, ale nie zastępuje oceny kontekstu, testów z technologią asystującą, audytu ani trwałych poprawek w kodzie i treści.
Jak sprawdzić, czy alt jest dobry?
Przeczytaj go bez patrzenia na obraz i odpowiedz, czy użytkownik otrzymałby informację potrzebną do wykonania zadania. Następnie sprawdź element w kontekście: nawigacją klawiaturą, z czytnikiem ekranu oraz w relacji do sąsiedniego tekstu.
Podsumowanie
Tekst alternatywny w e-commerce nie jest technicznym dodatkiem do zdjęcia. Jest częścią opisu produktu, ścieżki zakupu i obsługi interfejsu. Najlepsze rezultaty daje rozdzielenie obrazów na informacyjne, funkcjonalne i dekoracyjne, a następnie poprawa opisów w źródle danych oraz komponentach strony.
WCAGbot może pomóc jako pierwszy krok do dostępności: po instalacji jedną linią kodu udostępnia między innymi funkcje kontrastu, typografii, czytania treści, skupienia i wybrane automatyczne uzupełnianie wykrywalnych atrybutów. Nie zastępuje jednak audytu WCAG, testów z użytkownikami ani napraw źródłowych opisów produktów i interfejsu.
Dodaj funkcje dostępności swojej strony i sprawdź WCAGbot na własnym sklepie. Dodaj funkcje dostępności.
