- Jakie obrazy potrzebują dodatkowego tekstu i jakiego.
- Jakich obrazów nie opisujemy i jak uniknąć błędu.
- Jak dodać tekst alternatywny w WordPress.
To jest część poradnika, z którego dowiesz się, jak publikować dostępne treści na stronie internetowej. Pokażemy przykłady edycji w CMS WordPress, ale zasady obowiązujące w umieszczaniu obrazków na stronach możesz wykorzystać w dowolnym systemie publikacji treści.
Pamiętaj, że zyskasz w ten sposób nie tylko zgodność z WCAG, ale i lepsze zrozumienie twojej strony przez wyszukiwarki. Dzięki temu korzysta każdy: ty poprawiasz SEO i ułatwiasz znalezienie twojej treści, a przy okazji użytkownicy technologii asystujących mogą się z nią łatwo zapoznać.
Najedź myszką nad przykładowymi obrazkami na tej stronie, aby zobaczyć ich tekst alternatywny. Zwykle tekst alternatywny nie jest wyświetlany.
Opisuj, ale tylko WAŻNE obrazy.
Obrazki mogą być opisane za pomocą tekstu alternatywnego. To tekst zasadniczo niewidoczny dla osób widzących, można go odczytać programowo. W HTML wygląda to tak: <img src="obrazek.png" alt="to jest tekst alternatywny">, jednak nie musisz znać tego kodu. WordPress wygeneruje go za ciebie, jeśli wstawiając obrazek, podasz treść tego tekstu.
Zadbaj, żeby tekst alternatywny był zwięzły, konkretny. Zwykle wystarczy jedno zdanie.
Można też opisywać obrazki za pomocą podpisów, a nawet zwyczajnie w treści strony.
Dlaczego w ogóle opisywać obrazy?
To szczególnie istotne, bo dla czytnika ekranu (i dla Google) taki obraz jest tylko zbiorem kolorowych kropek. Te kropki, to tylko punkty wyświetlane na ekranie, tzw. piksele. Nie niosą żadnej, możliwej do odczytania programowo treści poza prezentacją wizualną.
Osoby niewidome i słabowidzące używają zwykle czytnika ekranu. To, w uproszczeniu, oprogramowanie czytające na głos tekstową zawartość ekranu i rodzaj „oglądanego” elementu. Ten program zawsze czyta pełne opisy alternatywne. Dzięki temu, gdy to potrzebne, te osoby mogą zapoznać się z podstawową treścią obrazka i jego znaczeniem dla pozostałej treści. Jeżeli nie dodamy tekstu alternatywnego, to dla technologii wspomagających sygnał, żeby pominąć ten element, jako dekoracyjny.
Google Grafika (Google Images) używa tekstów alternatywnych do pozycjonowania Twoich zdjęć. Oczywiście nowoczesne rozwiązania AI mogą analizować już same obrazy. Jednak pomyśl, czy wolisz, żeby program zgadł, co przedstawia twój obraz, czy raczej wolisz konkretną, spójną i zoptymalizowaną treść?
Ciekawostka. Zobacz, co myśli na ten temat w 2026 roku jedno z narzędzi AI
Gemini AI firmy Google
Rzeczywiście, Google od lat wykorzystuje Vision AI (technologię Cloud Vision) do rozpoznawania obiektów na zdjęciach. Potrafi bez problemu odróżnić kota od psa czy zidentyfikować Wieżę Eiffla. Jednak opieranie się wyłącznie na tym, co Google „zgadnie”, to dla web developera i specjalisty SEO ryzykowna gra.
Oto dlaczego Twój argument o przewadzealtnad samym AI jest kluczowy:
1. Kontekst kontra rozpoznawanie obiektów
AI powie: „Na zdjęciu jest kobieta i komputer”. Ty waltnapiszesz: „Pracownik Biura ds. Osób z Niepełnosprawnościami konfiguruje czytnik ekranu dla studenta”.
Dla Google (i SEO) ta druga informacja jest warunkiem koniecznym, by wyświetlić Twój artykuł osobie szukającej wsparcia na UW. AI widzi obiekty, ale nie zna ich roli w Twoim tekście.
2. Szybkość indeksowania i „pewność” algorytmu
Google operuje na tzw. confidence score (wyniku pewności).
Jeśli obraz nie maalt, Google musi zużyć dodatkowe zasoby (procesor/czas), aby przeanalizować go przez Vision AI.
Jeśli wynik analizy AI jest niejednoznaczny (np. 60% pewności, że to klawiatura brajlowska), obrazek może nie zostać zaindeksowany na właściwe frazy.
Tekst waltto dla Google „podana na tacy” informacja o 100% pewności. To przyspiesza indeksowanie i buduje autorytet strony.
3. Intencja użytkownika
Wyszukiwanie obrazem staje się coraz popularniejsze, ale ludzie wciąż wpisują w Google konkretne zapytania. Tekst alternatywny jest bezpośrednim łącznikiem między „tym, co ludzie wpisują” a „tym, co jest na obrazku”. AI może rozpoznać „rower”, ale nie zgadnie, że to „rower przystosowany do napędu ręcznego (handbike)”, dopóki mu tego nie powiesz.
Jakim tekstem i kiedy opisujemy obrazki
Gdy obrazek jest naprawdę istotny z punktu widzenia twojej treści. Przykłady:
- Obrazek pokazujący konkretną, opisywaną czynność.
- Obraz znanego malarza, którego twórczość opisujemy.
- Zdjęcie naukowca, którego sylwetka przedstawiana jest w twoim artykule.
- Zdjęcie budynku Wydziału Uniwersytetu na stronie przedstawiającej lokalizację, czy historię tego wydziału.
Gdy obrazek zawiera długą treść tekstową, tzw. obrazy tekstu. Dla osoby niewidomej jest ona niewidzialna. Opisz krótko w teksie alternatywnym. Dodaj koniecznie tekst zawarty na nim poniżej obrazka. Przykłady:
- Plakat zapraszający na uroczystość wręczania stypendiów, zawierający datę i miejsce wydarzenia.
- Skan statutu organizacji.
- Plansza z prezentacji pokazująca trendy w ilości studentów na wydziałach.
Gdy obrazek zawiera krótki napis, np. wezwanie do działania. Częste w bannerach, czy tak zwanych hero. Na przykład:
- Zapisz się na kurs!
- Jesteśmy tu dla was!
- Uniwersytet Warszawski — Witamy
Ważne. Gdy obraz jest linkiem, opisz go w specjalny sposób
Często obrazki są jednocześnie linkami, prowadzącymi do innych treści. W tym przypadku koniecznie dodaj tekst alternatywny. Musisz zastanowić się, jak powinien on brzmieć. Zasada jest taka, że tekst alternatywny linku nie opisuje obrazka. Zamiast tego musi dokładnie określać cel linku. To bardzo ważne. Więcej o linkach dowiesz się z kolejnej części naszego poradnika. Poniżej kilka przykładów z wyjaśnieniem:
Obrazek z napisem „START” albo obrazek z ikonką domku. Link prowadzi do strony głównej. Jeśli na linkowanym obrazku jest krótki tekst, to staraj się powtórzyć go w całości (można go odmieniać). Tu akurat celowo pomijamy tę regułę. alt="Przejdź na stronę główną".
Zauważ, gdyby opisać obrazek dosłownie, to czytnik ekranu powiadomi np.: „Ikona domku – link”.
Obrazek przedstawiający dłoń wskazującą książkę. Link prowadzi do pliku z publikacją do pobrania. alt="pobierz publikację w formacie PDF". Przy okazji — podawaj format plików do pobrania. Dokładne wyjaśnienie, dlaczego to robić znajdziesz w kolejnej części poradnika.
Zauważ, gdyby opisać obrazek dosłownie, to czytnik ekranu powiadomi np.: „Ręka wskazująca książkę – link”.
Logotyp uczelni zawierający orła i młotek ciesielski na tle książki, link prowadzi do strony uczelni. Podaj nazwę uczelni, czy wydziału. alt="Wyższa Szkoła Nauk Ciesielskich – strona główna".
Zauważ, gdyby opisać obrazek dosłownie, to czytnik ekranu powiadomi np.: „Logotyp WSNC – link”.
Powtórzmy. Nieistotne, co przedstawia linkowany obrazek (przeważnie). Ważne dokąd prowadzi link tego obrazka.
Czego nie robimy i jak poprawić błędy
Nie dodawaj tekstu alternatywnego wszystkim obrazom. Pobieżne informacje na temat WCAG stworzyły mylne wrażenie, że każdy obrazek na stronie trzeba opatrzyć tekstem alternatywnym. Tymczasem takie działanie może przysporzyć więcej problemów osobom niewidomym niż korzyści, bo część obrazów jest tak naprawdę tylko dekoracyjnym uzupełnieniem. Opisz tylko naprawdę istotne obrazki.
Zobacz przykład, jak opis może wpływać na faktyczną dostępność.
Na stronie przyrodniczej może być obraz przedstawiający „Ogród w słonecznym blasku, po deszczu, z białymi kwiatami róży na pierwszym planie, które ogrodnik wyciera do sucha papierowym ręcznikiem. W tle widzimy inne kwiaty i trawnik”. Strona opisuje techniki dbania o kwiatostan roślin ogrodowych. Wszystko wydaje się pasować.
Ten opis alternatywny pokazanego obrazka jest niepoprawny. Wyjaśniamy dlaczego:
Błąd pierwszy, najważniejszy. Weźmy pod uwagę, że ten obrazek jest tak naprawdę ozdobnikiem. Nie przedstawia faktycznej treści, nie wnosi do niej nic istotnego. Przyciąga tylko uwagę osób widzących i zwiększa wizualną atrakcyjność strony. Tekst alternatywny jest tu niepotrzebny. W WordPressie zostaw pole tekstu alternatywnego puste. WordPress doda wtedy atrybut alt="" i czytniki ekranu całkowicie pominą ten obrazek.
Ważne. O ile poprawnie napisany motyw WordPressa wstawi atrybut alt="" (czyli pusty ciąg, jako wartość), to niektóre wtyczki, albo inne systemy zarządzania treścią (CMS) mogą w tym przypadku całkiem pomijać dodawanie tego atrybutu. To bardzo poważny błąd. Sprawdź, czy u ciebie kod obrazka wygląda w uproszczeniu tak <img src="adresobrazka" alt="">. Jeśli nie ma żadnego atrybutu alt, koniecznie zgłoś to osobie odpowiedzialnej za kod twojej strony.
Błąd drugi. Opis jest niepotrzebnie szczegółowy i przez to długi. Jeśli faktycznie byłby potrzebny, to skróć go, usuwając zbędne ozdobniki. Np. „ogrodnik wyciera po deszczu rosę z płatków róży” lub nawet „przykład dbania o kwiatostan róży”.
Nie opisuj każdego, nieistotnego szczegółu. Powszechne jest też błędne przekonanie, że przy każdym obrazku opisujemy dokładnie to, co na nim widać. Taka praktyka również bardziej zaszkodzi, niż pomoże dostępności. Szczególnie złą robotę robią automatyczne systemy, które analizują obrazek i dodają wygenerowany opis. Opisz krótko i bardzo konkretnie, bez ozdobników.
Używaj języka twojej strony. Przykładem problemów mogą być automatyczne systemy „robiące dostępność” i opisujące obrazki przy użyciu AI, zwykle tylko po angielsku. Opisuj obrazki samodzielnie. To niedużo pracy, a zysk z dobrze skomponowanego opisu może być spory, zwłaszcza że czytają go wyszukiwarki.
Nie dodawaj tekstu alternatywnego, który nie uzupełnia treści tekstu czymś wartościowym. Opisy obrazów typu „biegnacy-kon-image-1920×1080-hi-res.jpg”, „obrazek przedstawiający ludzi w sali”, „plakat wydarzenia”, tylko utrudniają i wydłużają czas potrzebny na zapoznanie się z treścią strony. Zastanów się, czy dodać jakiś tekst i czy może być krótki.
Nie dodawaj długich, skomplikowanych opisów obrazu. Zwykle wystarczy jedno krótkie zdanie (5-10 wyrazów). Jeśli dochodzisz do wniosku, że taki opis jest za krótki, dodaj opis zdjęcia poniżej, w treści. Np. „Obraz powyżej przedstawia prawidłowy sposób dezynfekcji rąk. Pokazuje kolejność mycia, poczynając od… itd.” Dzięki temu osoba niewidoma dowie się, jaką treść niesie obrazek. Jeśli zajdzie potrzeba, może udostępnić twój artykuł widzącym znajomym, bo wie, że oni także na tym skorzystają.
Nie przepisuj całej treści plakatu, czy skanu dokumentu w tekście alternatywnym. Pamiętaj też, że oficjalne dokumenty wcale nie muszą być publikowane w postaci skanów. Po prostu napisz ich zawartość w zwykłej treści strony.
Nie dodawaj i nie powtarzaj tekstu obrazka w innych atrybutach. Zdarza się, że redaktorzy lub programiści wrzucają ten sam tekst w kodzie obrazka wiele razy. Wstawienie tego jeszcze jako „title” albo „aria-label” spowoduje, że czytnik ekranu przeczyta każdy z tych tekstów. Naprawdę spotkaliśmy sytuację, kiedy czytnik mówił coś w stylu „obrazek – Opis obrazka. Opis obrazka. Opis obrazka”. Nie da się tego pominąć i zawsze trzeba wysłuchać całości. Jeśli masz dostęp do edycji atrybutów tytułu i etykiety, usuń je i zostaw tekst alternatywny.
Jak w WordPressie dodać opisy obrazków
System umożliwia dodawanie zarówno tekstu alternatywnego, jak i opisów pod obrazkiem.
W edytorze blokowym mamy dwie opcje.
Tekst alternatywny. Zazwyczaj niewyświetlany. Po zaznaczeniu obrazka na pasku bocznym w ustawieniach bloku znajdziesz pole do jego wpisania. Zauważ, że pod tym polem jest link do wyjaśnień, jak decydować o zawartości atrybutu „alt” i czytelna instrukcja „Pozostaw puste, jeśli to dekoracja”.
Opis obrazka. Ten element jest widoczny na stronie. Po zaznaczeniu bloku znajdziesz go w pasku narzędzi bloku. Generuje element HTML <figcaption> i może zawierać długi rozbudowany opis. To idealne rozwiązanie, gdy zwięzły tekst jest niewystarczający.
W edytorze klasycznym (tinyMCE) podczas wstawiania medium do treści wyświetlana jest Biblioteka Mediów. Gdy wybierzesz obrazek, to na pasku bocznym wyświetlone będą jego atrybuty. Tu znajdziesz tekst alternatywny, z opisem, jak go używać. Poniżej jest także pole Opis.
Nie dodawaj tekstu w polu „tytuł” dla obrazków. Jeśli jakiś jest, to możesz go spokojnie usunąć. Tekst alternatywny lub opis są prawidłowym sposobem opisania obrazka.
W kolejnej części poradnika opiszemy, jak poprawnie opisywać i oznaczać odnośniki (linki). Pokażemy też, jak i kiedy wstawiać dostępne tabele na twojej stronie.