# Test tekstu alternatywnego obrazów Wpisz adres strony, aby zobaczyć każdy znajdujący się na niej obraz wraz z tekstem alternatywnym, odczytanym w prawdziwej przeglądarce po wykonaniu skryptów. Sprawdź, które obrazy go nie mają, które są oznaczone jako dekoracyjne, a których tekst alternatywny niczego nie opisuje. ## Co sprawdza to narzędzie - Obrazy bez tekstu alternatywnego: Każdy element img i przycisk graficzny bez atrybutu alt i bez innej dostępnej nazwy, takiej jak aria-label. - Obrazy w linkach, przez które link nie ma nazwy: Logo i ikony wewnątrz linków lub przycisków, które nie mają tekstu alternatywnego ani innego tekstu, więc czytnik ekranu może ogłosić tylko „link”. - Tekst alternatywny, który wygląda jak nazwa pliku: Wartości takie jak IMG_2041.jpg, DSC0042 albo długi ciąg cyfr, które wiele systemów wpisuje automatycznie podczas przesyłania pliku. - Ogólnikowe słowa: Tekst alternatywny, który brzmi po prostu „obraz”, „zdjęcie”, „logo” lub „baner”, nikomu nie mówi, co przedstawia obraz. - Zbędny i powtarzany tekst: Opisy, które zaczynają się od słów w rodzaju „obraz przedstawiający”, powtarzają sąsiedni tekst linku albo są użyte przy trzech lub więcej różnych obrazach. - Obrazy dekoracyjne i ukryte: Obrazy oznaczone alt="" lub role="presentation" oraz obrazy ukryte za pomocą aria-hidden lub CSS są wymieniane osobno, aby można było potwierdzić, że każdy z nich jest naprawdę dekoracyjny. - Podgląd każdego obrazu: Miniatura obok tekstu alternatywnego, dzięki której ocenisz każdy opis w kilka sekund. Filtry pokazują tylko problemy albo tylko pozycje do sprawdzenia. ## Czego nie może sprawdzić - Ocenić, czy tekst alternatywny jest trafny. Może to zrobić tylko osoba, która widzi obraz i wie, dlaczego znajduje się on na stronie. - Sprawdzić obrazów ustawionych jako tła CSS ani alternatyw tekstowych dla grafik SVG i canvas. Narzędzie wymienia elementy img i przyciski graficzne. - Sprawdzić obrazów wewnątrz ramek, takich jak osadzone filmy, mapy i reklamy. - Wymienić więcej niż 150 obrazów. Na bardzo długich stronach pokazuje pierwsze 150 i podaje, ile jest ich łącznie. - Przetestować innych stron. Pełny darmowy skan sprawdza teksty alternatywne wraz z pozostałymi wymaganiami WCAG na maksymalnie pięciu kluczowych podstronach. ## Dlaczego to ważne Tekst alternatywny to to, co czytnik ekranu odczytuje zamiast obrazu, i to, co przeglądarka pokazuje, gdy obraz się nie wczyta. Kryterium sukcesu 1.1.1 WCAG 2.2 na poziomie A wymaga alternatywy tekstowej dla każdego obrazu, który niesie informację, i pustej alternatywy dla obrazów, które jej nie niosą. Brak tekstu alternatywnego to drugi najczęstszy błąd dostępności w internecie: analiza WebAIM z 2026 roku wykazała go na 53,1% stron głównych miliona najpopularniejszych witryn, a 16,2% wszystkich sprawdzonych obrazów w ogóle go nie miało. Czytają go też wyszukiwarki. Google podaje, że wykorzystuje tekst alternatywny wraz z rozpoznawaniem obrazu (computer vision) i treścią strony, aby rozumieć obrazy, a tekst alternatywny obrazu będącego linkiem działa jak tekst kotwicy linku. ## Jak czytać wyniki - Brak tekstu alternatywnego: Obraz nie ma atrybutu alt ani innej nazwy. W zależności od oprogramowania czytnik ekranu może odczytać nazwę pliku albo pominąć obraz. - Dekoracyjne: alt="" lub role="presentation": czytniki ekranu pomijają obraz. Właściwe dla dekoracji; niewłaściwe dla obrazu, który niesie informację lub jest jedyną zawartością linku. - Ma tekst alternatywny: Obraz ma opis. Oznaczamy te, które wyglądają na błędne; trafność pozostałych i tak musi sprawdzić człowiek. - Nazwa z ARIA lub title: Brak atrybutu alt, ale jest nazwa z aria-label, aria-labelledby lub title. To wystarcza w testach automatycznych; alt pozostaje jednak bardziej niezawodnym wyborem. - Ukryte: Obraz nie jest wyświetlany albo jest ukryty przed technologiami wspomagającymi za pomocą aria-hidden. Nie ma czego poprawiać, chyba że obraz powinien być widoczny. - Link bez nazwy: Link lub przycisk, którego jedyną zawartością jest obraz bez alternatywy tekstowej. To błąd nawet wtedy, gdy sam obraz jest dekoracyjny. - Do weryfikacji: Tekst alternatywny, który wygląda jak nazwa pliku lub ogólnikowe słowo, zaczyna się od słów w rodzaju „obraz przedstawiający”, powtarza tekst linku, jest bardzo długi albo został użyty przy kilku obrazach. ## Jak naprawić najczęstsze problemy - Zdjęcia produktów i treści: Opisz w kontekście strony to, co straciłby ktoś, kto nie widzi obrazu. Przy produkcie: przedmiot, jego kolor i pokazane ujęcie. Przy zdjęciu w artykule: to, co pokazuje zdjęcie, a czego nie mówi tekst. - Logo prowadzące do strony głównej: Obraz będący linkiem powinien mówić, dokąd prowadzi link. Dla logo, które prowadzi do strony głównej, użyj nazwy firmy, na przykład alt="Acme – strona główna", a nie „logo”. - Ikony w linkach i przyciskach: Nadaj ikonie tekst alternatywny, który nazywa działanie, na przykład „Szukaj” lub „Koszyk”, albo nadaj linkowi aria-label i oznacz ikonę jako dekoracyjną za pomocą alt="". - Obrazy dekoracyjne: Użyj alt="" (pustej wartości, a nie brakującego atrybutu) dla separatorów, ozdobników w tle i obrazów, które powtarzają tekst znajdujący się tuż obok. - Nazwy plików wpisane przez platformę: Wiele platform kopiuje nazwę pliku do pola alt podczas przesyłania. Popraw ją tam, gdzie zarządzasz obrazem: w Shopify w multimediach produktu, w WordPressie w polu „Tekst alternatywny” w bibliotece mediów. - Wykresy i infografiki: Nadaj krótki tekst alternatywny, który mówi, co pokazuje wykres, a dane lub podsumowanie umieść w tekście albo w tabeli obok. ## Najczęściej zadawane pytania ### Czym jest tekst alternatywny? Atrybut alt obrazu zawiera jego alternatywę tekstową. Czytniki ekranu odczytują go na głos, a przeglądarki pokazują go, gdy obrazu nie da się wyświetlić. ### Czy każdy obraz powinien mieć tekst alternatywny? Każdy element img powinien mieć atrybut alt. W obrazie, który niesie informację, atrybut ten opisuje obraz; w obrazie dekoracyjnym powinien być pusty (alt=""), aby czytniki ekranu go pomijały. ### Jak długi powinien być tekst alternatywny? WCAG nie określa limitu. Dobry tekst alternatywny to zwykle krótka fraza lub zdanie. Jeśli obraz wymaga więcej, opisz go w tekście strony lub w podpisie, a tekst alternatywny zostaw krótki. Teksty alternatywne dłuższe niż 150 znaków oznaczamy do ponownego przejrzenia. ### Czy tekst alternatywny pomaga w SEO? Google podaje, że wykorzystuje tekst alternatywny wraz z rozpoznawaniem obrazu i treścią strony, aby rozumieć obrazy, a tekst alternatywny obrazu będącego linkiem działa jak tekst kotwicy. Ostrzega też, że upychanie słów kluczowych w atrybutach alt może zostać uznane za spam. ### Czy atrybut title to to samo co alt? Nie. title wyświetla się jako podpowiedź po najechaniu kursorem, nie jest niezawodnie ogłaszany przez czytniki ekranu i nie jest dostępny na ekranach dotykowych. Testy automatyczne akceptują go jako nazwę, gdy brakuje alt, ale to alt jest pewnym wyborem. ### Czy AI może napisać za mnie teksty alternatywne? Może przygotować wstępne opisy, ale nie wie, dlaczego obraz znajduje się na Twojej stronie. Przejrzyj każdą propozycję: właściwy tekst alternatywny zależy od kontekstu, który znasz tylko Ty. ## Źródła - [W3C: objaśnienie kryterium sukcesu WCAG 2.2 1.1.1 Treść nietekstowa](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) - [W3C Images Tutorial: drzewo decyzyjne dla atrybutu alt](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C Images Tutorial: obrazy funkcjonalne](https://www.w3.org/WAI/tutorials/images/functional/) - [Google Search Central: sprawdzone metody SEO dotyczące obrazów](https://developers.google.com/search/docs/appearance/google-images) - [Deque: reguła image-alt w axe-core](https://dequeuniversity.com/rules/axe/4.13/image-alt) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)