Jak sprawdzić alt obrazków na stronie - kompletny poradnik 2026

Tekst alternatywny przekazuje znaczenie obrazu osobie, która go nie widzi. Pomaga też, gdy grafika się nie załaduje. Nie jest podpisem widocznym pod zdjęciem, tytułem pliku ani listą fraz do pozycjonowania. Najpierw ustal, po co obraz znajduje się właśnie w tym miejscu.

WCAG 2.2, kryterium 1.1.1 na poziomie A wymaga alternatywy tekstowej odpowiadającej celowi treści nietekstowej, z opisanymi wyjątkami. Sprawdzenie samych altów nie potwierdza zgodności całej witryny z WCAG.

W raporcie rozróżnij trzy sytuacje:

• `<img src="produkt.webp">`: atrybutu nie ma. Trzeba sprawdzić rolę obrazu i sposób jego udostępnienia.
• `<img src="wzor.webp" alt="">`: atrybut istnieje, ale jest pusty. To może być celowe.
• `<img src="produkt.webp" alt="IMG_2841">`: pole jest wypełnione, lecz nazwa pliku zwykle nie pomaga zrozumieć obrazu.

Nie traktuj wszystkich trzech sytuacji jako jednego błędu do automatycznego uzupełnienia. Najpilniejsze są obrazy, bez których użytkownik nie rozumie oferty, danych albo działania przycisku.

Otwórz publiczną stronę, na której klient rzeczywiście ogląda obraz. Jeśli zdjęcie pojawia się dopiero po rozwinięciu galerii, najpierw ją otwórz. Sprawdzasz konkretny stan strony, a nie sam plik w bibliotece mediów.

1. Kliknij obraz prawym przyciskiem i wybierz Zbadaj, czyli Inspect.
2. W narzędziach deweloperskich znajdź panel Elements.
3. Odszukaj element `img`. Zaznaczony może być początkowo otaczający go link, kontener albo element `picture`; rozwiń go.
4. Sprawdź obecność atrybutu `alt` i odczytaj jego pełną wartość.
5. Zapisz adres strony, obraz i wynik kontroli.

Dokumentacja Chrome DevTools opisuje inspekcję drzewa DOM. Wyszukiwanie `alt=""` pokaże niektóre puste atrybuty, ale nie znajdzie elementów, które w ogóle nie mają alt. Samo wyszukanie słowa alt także nie oceni sensu opisu.

Zmiana wartości w Elements jest lokalnym eksperymentem w przeglądarce. Nie zapisuje poprawki w WordPressie. Po odświeżeniu może zniknąć. Jeśli chcesz sprawdzić nazwę dostępną całego przycisku lub linku, zajrzyj również do informacji o dostępności elementu. Jego nazwę może dostarczać tekst lub ARIA, nie tylko obraz.

Dla większej liczby podstron wygodniejsza jest lista wystąpień obrazów. Oficjalny poradnik Screaming Frog opisuje następujący przebieg:

1. Wprowadź adres swojej witryny i rozpocznij crawl.
2. Otwórz zakładkę Images.
3. Wybierz obraz, a w dolnym panelu Image Details sprawdź strony źródłowe oraz teksty alternatywne.
4. Przejrzyj osobno filtry Missing Alt Attribute i Missing Alt Text.
5. Wyeksportuj wyniki wraz z adresami stron, aby wskazać miejsce poprawki.

Pierwszy filtr wykrywa brak atrybutu, drugi pustą wartość lub białe znaki. Ten drugi nie oznacza automatycznie naruszenia dostępności. Właśnie dlatego raport wymaga ręcznej kwalifikacji.

Darmowa wersja ma limit 500 URL w pojedynczym crawlu. Nie jest to obietnica sprawdzenia 500 produktów niezależnie od liczby innych adresów serwisu. Porównanie wersji programu wskazuje też ograniczenia funkcji zaawansowanych, w tym renderowania JavaScript bez licencji.

Ten sam plik może mieć inny alt na stronie kategorii i inny w artykule. Zachowaj kolumnę strony źródłowej. Lista samych plików graficznych nie wystarczy osobie, która ma poprawić treść.

Drzewo decyzji W3C WAI uzależnia alt od funkcji i otoczenia obrazu. Dla dekoracji podaje krótką instrukcję:

Ozdobny kształt, który niczego nie wyjaśnia, może wyglądać tak:

<img src="/images/ozdobny-wzor.svg" alt="">

Jeżeli ikona jest jedyną treścią przycisku wyszukiwania, użytkownik musi poznać jego działanie:

<button type="submit">
  <img src="/images/szukaj.svg" alt="Szukaj">
</button>

Gdy obok ikony jest już tekst Szukaj, obraz może mieć pusty alt, aby nazwa nie została odczytana podwójnie:

<button type="submit">
  <img src="/images/szukaj.svg" alt="">
  Szukaj
</button>

To przykłady kodu, nie wynik audytu konkretnej witryny. W gotowym komponencie trzeba uwzględnić także inne źródła nazwy, takie jak `aria-label`.

Zdjęcie produktu może opisywać istotny wariant i widoczną cechę, np. granatową torbę z zamkiem i długim paskiem. Nie dopisuj właściwości, których nie widać lub nie potwierdza oferta. Wykres wymaga udostępnienia ważnych wartości i wniosków w tekście albo tabeli. Upchnięcie całego zestawienia w jednym alcie utrudnia korzystanie z niego.

W edytorze strony zaznacz blok obrazu i odszukaj pole tekstu alternatywnego w jego ustawieniach. Układ paneli może się różnić między wersjami edytora i page builderami. Uzupełnij opis odpowiedni dla tej strony lub pozostaw pusty alt, jeśli grafika jest dekoracją.

Dokumentacja bloku Obraz rozróżnia ustawienie konkretnego bloku od wartości zapisanej w Bibliotece mediów. Alt w bibliotece jest domyślną wartością przy kolejnych wstawieniach. Jego zmiana nie oznacza, że wszystkie istniejące bloki i komponenty zostały poprawione.

Po zapisaniu otwórz opublikowaną podstronę i ponownie sprawdź DOM. Jeśli widzisz dawną wartość, ustal, czy obraz pochodzi z innego bloku, szablonu, galerii lub pamięci podręcznej. W sklepie osobno sprawdź główne zdjęcie, miniatury i powiększenie.

Przy wielu podobnych obrazach przygotuj listę zmian do zatwierdzenia. Nie zastępuj wszystkich opisów nazwą pliku i nie wykonuj masowego SQL bez rozpoznania struktury treści. Jeśli problem wraca w całej galerii, właściwa może być poprawka szablonu w ramach pomocy przy WordPressie, a nie ręczna edycja kolejnych produktów.

Porównaj wynik crawla z publiczną stroną. Obraz może być dodawany przez JavaScript, ładowany po interakcji, umieszczony w CSS albo zapisany jako SVG. Każda z tych sytuacji wymaga innego sprawdzenia. Brak obrazu w raporcie nie dowodzi, że nie wymaga on alternatywy.

Dla obrazów dodawanych skryptem sprawdź renderowany DOM i ustawienia crawla. Nie zakładaj, że analiza samego początkowego HTML obejmuje wszystkie stany galerii. Tło CSS nie ma atrybutu alt. Jeżeli przekazuje istotną informację, potrzebuje dostępnego odpowiednika lub zmiany sposobu osadzenia. Dekoracyjne tło zwykle takiego opisu nie potrzebuje.

Inline SVG ma własne mechanizmy nazwy dostępnej. Nie dodawaj do niego alt tak, jak do `img`. Google pokazuje przykłady użycia `title` i powiązania przez ARIA w zaleceniach dotyczących obrazów.

Search Console służy do analizy widoczności, nie ma natomiast raportu wszystkich brakujących altów na stronie. Jeśli korzystasz z poradnika Google Search Console, oddziel dane o ruchu od technicznego sprawdzenia HTML.

Zacznij od stron oferty, produktów i najczęściej odwiedzanych poradników. W pierwszej kolejności popraw kontrolki bez zrozumiałej nazwy, obrazy niosące ważne informacje oraz opisy niezgodne z widocznym wariantem. Dekoracji nie uzupełniaj tylko po to, aby raport pokazał mniej pustych pól.

Przygotuj arkusz z pięcioma informacjami: URL strony, obraz, obecny alt, rola obrazu, decyzja. Po wdrożeniu sprawdź te same wystąpienia na opublikowanej stronie. Powtórny crawl potwierdzi zmianę atrybutu, ale sens tekstu nadal ocenia człowiek. Warto też sprawdzić obsługę klawiaturą i odczyt najważniejszych kontrolek.

Google wykorzystuje alt razem z treścią strony i algorytmami rozpoznawania obrazów. Nie ma podstaw, by obiecywać określony wzrost ruchu po samej zmianie opisów. W pozycjonowaniu SEO jest to część pracy nad jakością strony, a nie samodzielny przepis na pozycje.

Jeśli potrzebujesz szerszej kontroli, sprawdź zakres audytu cyfrowego. W pierwszej wiadomości wystarczy adres strony i przykład obrazu, z którym masz problem. Informacja o CMS lub liczbie podstron będzie pomocna, ale można ją ustalić później.

• Co to jest atrybut alt i jak opisywać nim obrazy?
• Darmowe zdjęcia do pobrania na stronę WWW: skąd brać i jak używać