Opisy alternatywne zdjęć i grafik. Jak tworzyć teksty alternatywne zgodne z zasadami dostępności i WCAG?

Chcesz, by Twój sklep internetowy, blog lub strona firmowa były bardziej dostępne i przyjazne dla każdego użytkownika – również tego, który korzysta z czytnika ekranu? Kluczem są dobrze napisane opisy alternatywne (tzw. alty) zdjęć i grafik. W tym artykule znajdziesz wszystkie najważniejsze informacje na ten temat.

Co to jest tekst alternatywny i do czego służy?

Opis alternatywny (ang. alt text) to krótki tekst przypisany do obrazka, wyjaśniający, co się na nim znajduje. Nie jest widoczny na pierwszy rzut oka – odczytują go programy wspierające osoby niewidome i słabowidzące, ale również przeglądarki, gdy z jakiegoś powodu obrazek nie może zostać załadowany. 

Opisy alternatywne wykorzystujemy nie tylko na stronach internetowych – ich rola rośnie także w social mediach (np. Facebook, Instagram, LinkedIn umożliwiają dodawanie altów do zdjęć), a także w dokumentach cyfrowych, jak np. pliki PDF, prezentacje, e-booki. 

Dobrze napisane alty pełnią potrójną funkcję: 

• wspierają dostępność cyfrową, 
• poprawiają doświadczenia użytkownika,
• pozytywnie wpływają na SEO, bo roboty Google również „czytają” teksty alternatywne. 

Kiedy stosować teksty alternatywne?

✅ Zdjęcia produktów w sklepach internetowych
Każde zdjęcie przedstawiające produkt powinno mieć opis alternatywny – to istotne z perspektywy użytkowników korzystających z czytników ekranu, ale też w kontekście SEO. Tekst alt powinien opisywać produkt w sposób konkretny i informacyjny, np. “Szare sneakersy damskie z białą podeszwą i różowym logo”.

✅ Grafiki i ilustracje w artykułach
Jeśli ilustracja coś wyjaśnia, ilustruje treść lub zawiera ważne informacje, należy dodać alt. Tekst powinien oddawać sens ilustracji w kontekście treści, np. “Mapa pokazująca najczęściej odwiedzane miasta w Europie w 2024 roku”.

✅ Infografiki i wykresy
W przypadku wykresów, tabel i infografik sam alt nie wystarczy. Oprócz krótkiego opisu powinna się pojawić wersja tekstowa danych zawartych w grafice (np. pod wykresem lub w treści artykułu). Alt może brzmieć np.: “Wykres słupkowy przedstawiający wzrost sprzedaży e-booków w latach 2021–2024”.

✅ Media społecznościowe
Alt warto stosować również przy zdjęciach publikowanych w social mediach – wiele platform (w tym np. Instagram, LinkedIn) umożliwia dodanie opisu alternatywnego.

✅ Obrazy dekoracyjne – kiedy alt może być pusty
Jeśli obraz nie wnosi żadnej treści (jest jedynie elementem ozdobnym), wówczas – zgodnie z WCAG – alt powinien być pusty (alt=””). Dzięki temu czytnik ekranu zignoruje grafikę i nie rozproszy użytkownika zbędnymi informacjami.

Zasady tworzenia dobrych opisów alternatywnych

Dobre opisy alternatywne to nie tylko kwestia spełnienia wymogów WCAG, ale też wyraz troski o dostępność i użyteczność treści dla wszystkich użytkowników. 

• Tworząc alt teksty, należy kierować się zasadą konkretności i zwięzłości – optymalna długość to zazwyczaj od 5 do 15 słów. 
• Warto unikać fraz typu “na zdjęciu widać…” – są zbędne, bo czytniki ekranu i tak informują użytkownika, że mają do czynienia z grafiką. 
• Zamiast opisywać obraz biernie, lepiej użyć strony czynnej i czasowników, które ożywią przekaz, np. „Dziecko trzyma kolorowy balon” zamiast „Balon jest trzymany przez dziecko”. 
• Zbyt wiele przymiotników może rozmywać sens opisu, dlatego warto je ograniczyć na rzecz precyzyjnych czasowników i rzeczowników. 
• Najważniejsze jest to, by opis odnosił się do kontekstu strony – inny będzie sens tej samej grafiki w sklepie, inny w blogowym poradniku.
• Nie zapominaj o hierarchii informacji – alt powinien opisywać to, co najważniejsze na obrazie z perspektywy użytkownika i celu treści. 

Tak skonstruowany opis alternatywny jest zgodny z zasadą dostępności, a przy okazji wspiera zarówno UX i SEO.

Przykłady dobrych i złych tekstów alternatywnych

Przykład 1: Zdjęcie produktowe (np. ubranie)

Zły alt: sukienka.jpg
Nazwa pliku nie informuje użytkownika, co dokładnie znajduje się na zdjęciu.

Dobry alt: Letnia sukienka maxi w kwiaty, z krótkim rękawem i paskiem w talii, na tle białej ściany
Konkretny opis produktu z kluczowymi cechami, które mogą pomóc w podjęciu decyzji zakupowej.

Przykład 2: Infografika/wykres

Zły alt: Infografika pokazująca dane
Ogólnikowy, nieprzydatny użytkownikowi, który nie widzi obrazu.

Dobry alt: Wykres słupkowy przedstawiający wzrost sprzedaży e-booków od 2020 do 2024 roku: z 2 mln do 7 mln sztuk rocznie
Oddaje sens wykresu i przekazuje kluczowe informacje w skrócie.

Przykład 3: Fotografia w artykule

Zły alt: Na zdjęciu widać mężczyznę stojącego na tle miasta
Niepotrzebne wprowadzenie („na zdjęciu widać”), brak informacji o znaczeniu zdjęcia w kontekście tekstu.

Dobry alt: Przedsiębiorca rozmawiający przez telefon na tle nowoczesnych biurowców – ilustracja do tematu pracy zdalnej
Przekazuje sens zdjęcia i jego powiązanie z treścią artykułu.

Przykład 4: Post w mediach społecznościowych

Zły alt: Zdjęcie lub brak altu
Ignoruje potrzeby użytkowników korzystających z czytników ekranu.

Dobry alt: Kubek z napisem „Monday mood” na biurku obok otwartego laptopa i notatnika – post motywacyjny o produktywności
Opisuje obraz, jego nastrój i kontekst posta, co pomaga zrozumieć przekaz osobie niewidomej.

Teksty alternatywne a WCAG. Co warto wiedzieć?

Zgodnie z WCAG 2.1 teksty alternatywne są wymagane na poziomie zgodności A, czyli stanowią absolutne minimum w zakresie dostępności cyfrowej. Ważna jest w tym kontekście Wytyczna 1.1.1 „Treść nietekstowa”, która mówi, że każda treść graficzna powinna mieć odpowiedni opis alternatywny, umożliwiający jej zrozumienie osobom korzystającym z czytników ekranu. 

Co to oznacza w praktyce? Że wszystkie zdjęcia, grafiki informacyjne, wykresy czy przyciski graficzne muszą być opisane w sposób zrozumiały i adekwatny do ich funkcji. Teksty alternatywne są więc fundamentem dostępności na każdym poziomie zgodności.

Dodawanie tekstów alternatywnych – jak to zrobić krok po kroku?

Dodawanie tekstów alternatywnych w praktyce sprowadza się jednego: uzupełnienia specjalnego pola „alt” (atrybutu alt) w kodzie HTML obrazka lub w dedykowanym miejscu w systemie zarządzania treścią (CMS). 

W przypadku sklepu zbudowanego na platformie Shoper wystarczy podczas dodawania zdjęcia w formularzu przesyłania pliku wpisać opis alternatywny w odpowiednie pole. System automatycznie zapisze go jako tekst alternatywny przypisany do obrazu, który będzie odczytywany przez czytniki ekranu oraz brany pod uwagę przez wyszukiwarki. 

Narzędzia pomocne przy tworzeniu opisów alternatywnych

• WebAIM WAVE – popularny walidator dostępności online, który analizuje strukturę strony i wskazuje brakujące lub nieprawidłowe teksty alternatywne.
• axe DevTools (by Deque) – darmowe rozszerzenie do Chrome i Firefox, które pozwala sprawdzić błędy dostępności, w tym związane z grafikami.
• Alt Text Tester – wtyczka do Chrome, która wizualnie pokazuje, jakie teksty alternatywne przypisano do obrazów na stronie.
• Lighthouse (wbudowane w Chrome DevTools) – narzędzie analizujące m.in. kwestie dostępności i SEO, z uwzględnieniem tekstów alternatywnych.
• Contrast Checker (WebAIM) – pozwala sprawdzić kontrast między tekstem a tłem w grafikach zawierających tekst, zgodnie ze standardami WCAG.
• Microsoft Accessibility Insights – rozbudowane narzędzie do testowania dostępności stron, również pod kątem altów i elementów wizualnych.

Tworzenie poprawnych opisów alternatywnych nie wymaga zaawansowanej wiedzy technicznej – wystarczy zrozumieć kilka prostych zasad, które omówiliśmy w tym poradniku. Jeśli korzystasz z platformy Shoper, masz wszystkie narzędzia, by wdrożyć alt teksty od razu, krok po kroku.

Sprawdź też inne artykuły:

Europejski Akt o Dostępności w praktyce – co musisz wiedzieć jako przedsiębiorca działający w sieci?