Darmowe narzędzie: Dostępność

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.

Za darmo. Sprawdza wpisany adres w około 20 sekund.

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.

Obrazy bez tekstu alternatywnego: jak to naprawić w Shopify, WooCommerce i na każdej stronie

Pytania o to narzędzie

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

Powiązane narzędzia

Raport naprawy dostępności ($174, jednorazowo) zaczyna od pełnego darmowego skanu i dodaje więcej podstron, zmianę do wprowadzenia dla każdego wykrytego problemu, plik PDF i ponowne testy do weryfikacji poprawek.

Raport naprawy dostępności: szczegóły