Co to jest atrybut alt i jak opisywać nim obrazy?

Atrybut alt to tekstowa alternatywa przypisana do obrazu HTML, najczęściej do znacznika `<img>`. Czytnik ekranu może odczytać tę treść osobie, która nie widzi obrazu, a przeglądarka może pokazać ją, gdy plik graficzny jest niedostępny.

Tekst alternatywny przekazuje informację lub funkcję obrazu, a nie jego techniczne szczegóły. Zdjęcie pokazujące sposób montażu może wymagać krótkiego opisu czynności; ozdobny kształt, który nie wnosi treści, powinien zostać pominięty przez czytnik.

W3C rozróżnia obrazy informacyjne, dekoracyjne i funkcjonalne, ponieważ ich tekst alternatywny zależy od roli na stronie. Dokumentację WAI sprawdziliśmy w październiku 2026 r. W praktyce nie przypisujemy jednej reguły wszystkim plikom w bibliotece mediów.

Atrybut alt znajduje się w znaczniku `<img>`, na przykład `<img src="buty-trailowe.jpg" alt="Czarne buty trailowe z bieżnikowaną podeszwą">`. W WordPressie użytkownik zwykle edytuje tekst w polu obrazu, a system zapisuje go w kodzie strony.

W edytorze blokowym WordPressa zaznacz blok obrazu i uzupełnij pole tekstu alternatywnego w ustawieniach bloku. Drugim miejscem jest Media > Biblioteka: otwórz szczegóły pliku i edytuj pole tekstu alternatywnego. WordPress wskazuje, że dane z biblioteki mogą być użyte jako wartości domyślne przy wstawianiu obrazu, ale obraz wstawiony jako osobny element może później przechowywać własne ustawienie. Dokumentację sprawdziliśmy w październiku 2026 r.

W WooCommerce przejdź do Produkty > Wszystkie produkty, otwórz produkt i zarządzaj zdjęciem głównym lub galerią. Opis samego pliku zmienisz w szczegółach obrazu w Bibliotece mediów, natomiast przed publikacją sprawdź też obraz w galerii produktu, aby potwierdzić, że wyświetla właściwy tekst. Sposób prezentacji galerii może zależeć od motywu i użytych rozszerzeń.

Jeśli zmiana obejmuje galerię, szablon produktu i ładowanie zdjęć, możemy uwzględnić ją w ramach optymalizacji szybkości WooCommerce.

Dobry tekst alternatywny nazywa informację lub działanie, które użytkownik powinien rozpoznać dzięki obrazowi. Najpierw ustal rolę grafiki, potem wybierz najważniejszy szczegół i usuń treść, którą użytkownik już otrzymuje z sąsiedniego tekstu.

Dla głównego zdjęcia produktu opisz widoczne cechy pomagające go rozpoznać. Dla kolejnego ujęcia wskaż detal, który odróżnia je od zdjęcia głównego. W przypadku obrazu będącego jedyną treścią linku opisz cel linku, a nie sam wygląd ikony.

Tabela pokazuje, jak dopasować treść alternatywną do funkcji grafiki. Przykłady dotyczą elementów, które mogą wystąpić w sklepie lub artykule.

Opis powinien odróżniać ujęcie lub przekazywać funkcję obrazu, a nie kopiować nazwę pliku.

W sklepie z wariantami opisuj widoczną różnicę tylko wtedy, gdy ma znaczenie dla użytkownika. Zdjęcie czerwonego kubka może otrzymać alt "Czerwony kubek termiczny z czarną pokrywką", a zdjęcie wariantu niebieskiego powinno odzwierciedlać jego kolor. Nie przenoś automatycznie tego samego opisu na kadr pokazujący inny detal.

Google zaleca dostarczać tekst alternatywny, który pomaga zrozumieć obraz w kontekście strony, oraz unikać upychania słów kluczowych. Dokumentację Google sprawdziliśmy w październiku 2026 r.

Alt powinien być pusty, gdy obraz pełni wyłącznie funkcję dekoracyjną albo powtarza informację bez dodawania znaczenia. Zapis `alt=""` informuje technologię asystującą, że może pominąć obraz; brak atrybutu nie jest równoważnym zapisem.

Tabela pomaga zdecydować, czy obraz wymaga opisu. Oceniaj jego rolę w danym miejscu, ponieważ ten sam rodzaj grafiki może na jednej stronie być dekoracją, a na innej przekazywać istotną informację.

Ikona przycisku powinna opisywać jego działanie, jeśli nie ma obok widocznej etykiety tekstowej. Gdy tekst obok ikony już nazywa to samo działanie, alt ikony może być pusty.

WAI zaleca pusty tekst alternatywny dla obrazów dekoracyjnych, a decyzję dla pozostałych grafik uzależnia od ich celu. Wytyczne sprawdziliśmy w październiku 2026 r.

Atrybut alt pomaga wyszukiwarce zrozumieć temat obrazu, ale sam nie gwarantuje pozycji strony ani grafiki. Google łączy tekst alternatywny z treścią strony i innymi sygnałami, a czytniki ekranu wykorzystują go do przekazania informacji użytkownikowi.

Dostępność i SEO korzystają z trafnego opisu, ale odpowiadają na inne potrzeby. Użytkownik czytnika ekranu potrzebuje informacji lub funkcji obrazu; wyszukiwarka wykorzystuje alt jako jeden ze sposobów rozpoznania jego tematu. Widoczność w Google Grafika zależy także od dostępności obrazu do indeksowania i dopasowania strony do jego treści.

Nie dodawaj marki, lokalizacji ani frazy sprzedażowej, jeśli nie opisują obrazu. Przy wykresie lub grafice zawierającej wiele danych umieść najważniejsze informacje także w treści strony, ponieważ krótki alt nie zawsze wystarczy do przekazania złożonej informacji.

Alt jest tekstową alternatywą obrazu, a podpis, tytuł załącznika WordPressa, atrybut HTML `title` i nazwa pliku pełnią odrębne funkcje. Żadne z tych pól nie zastępuje tekstu alternatywnego.

Tabela porównuje pola według miejsca i zastosowania. W WordPressie tytuł załącznika oznacza nazwę elementu w bibliotece mediów; nie musi być wyświetlany jako atrybut `title` znacznika obrazu.

Alt przekazuje alternatywę, a podpis dodaje czytelny kontekst; tytuł załącznika i atrybut HTML `title` to osobne pola.

Dla zdjęcia montażu alt może brzmieć "Monter mocuje zawór przy instalacji grzewczej", a podpis może wskazywać etap prac. Nazwa pliku `montaz-zaworu.jpg` ułatwia identyfikację zasobu. Dokumentacja WordPressa rozdziela tytuł, podpis i tekst alternatywny w szczegółach mediów; sprawdziliśmy ją w październiku 2026 r.

Kontrola altów powinna odróżniać brak atrybutu od celowo pustego pola, a następnie sprawdzać zgodność opisu z rolą obrazu. Na pojedynczej stronie porównaj kod obrazu z jego kontekstem, tekstem obok i działaniem, do którego prowadzi.

Brak atrybutu wygląda jak `<img src="foto.jpg">`, a poprawnie zapisany pusty alt jak `<img src="ozdoba.svg" alt="">`. Raport wykazujący puste opisy nie przesądza, że trzeba je uzupełnić: dekoracja może wymagać pustego altu, natomiast istotne zdjęcie może potrzebować treści.

W sklepie przejrzyj zdjęcie główne, kolejne ujęcia galerii i fotografie wariantów. Zapisz adres produktu, nazwę pliku, bieżący alt, rolę obrazu i proponowaną zmianę. Taki rejestr pozwala rozpoznać, czy kilka odmiennych kadrów nie otrzymało przypadkiem identycznego opisu.

Tabela porządkuje typowe wyniki kontroli i działania naprawcze. Pusty alt pozostaw jako prawidłowy tam, gdzie obraz jest dekoracyjny lub redundantny.

Najpierw sprawdź rolę obrazu, a dopiero potem zmieniaj jego tekst alternatywny.

W przeglądarce użyj inspektora kodu i odczytaj wartość `alt` w elemencie `<img>`. Przy większym sklepie crawler może wskazać brakujące i powielone atrybuty, ale ręczna kontrola nadal jest potrzebna, bo narzędzie nie rozstrzygnie, czy konkretne zdjęcie jest dekoracją. Z naszych wdrożeń wynika, że grupowanie obrazów według funkcji ułatwia utrzymanie spójnych opisów w galerii.

Perspektywa KC Mobile. W praktyce najwięcej korekt wymaga galeria produktu, gdy warianty mają różne kolory albo zdjęcia pokazują inne detale. Jeśli poprawa opisów wiąże się ze zmianami galerii i jej ładowania, prace nad wydajnością sklepu WooCommerce mogą objąć te elementy.

Najczęstsze błędy to brak opisu ważnego obrazu, opis dekoracji, który rozprasza użytkownika czytnika ekranu, oraz tekst niezgodny z tym, co pokazuje zdjęcie. Każdą korektę opieraj na funkcji obrazu w konkretnej treści.

Tekst "obrazek1" nie przekazuje informacji, a nazwa pliku nie zawsze wyjaśnia, co przedstawia grafika. Opis zawierający ciąg fraz, taki jak "buty sportowe buty do biegania sklep", brzmi nienaturalnie i nie odpowiada zaleceniom Google.

Nie kopiuj całego podpisu ani nazwy produktu, jeśli obraz nie dodaje informacji. Nie stosuj pustego altu do zdjęcia, które wyjaśnia instrukcję lub pokazuje ważną cechę. Dla ikony będącej jedyną treścią przycisku opisz działanie, a nie kolor czy kształt symbolu.

• Jak dodawać zdjęcia na stronę internetową i przygotować je do publikacji
• Lazy load images w PrestaShop: kiedy użyć modułu i jak go sprawdzić
• Darmowe zdjęcia do pobrania na stronę WWW: skąd brać i jak używać
• EWWW Image Optimizer w WordPressie: jak skonfigurować i sprawdzić optymalizację obrazów