Tekst alternatywny obrazu (alt) — co to jest i jak go napisać

Autor: Wykonamy · Opublikowano: 13.08.2026

Tekst alternatywny, nazywany altem, opisuje znaczenie lub funkcję obrazu na stronie. Korzystają z niego głównie osoby używające czytników ekranu. Pomaga też wyszukiwarkom rozpoznać treść grafiki. Przeglądarka może go pokazać, gdy obraz się nie wczyta. Treść altu zależy od kontekstu.

Czym jest tekst alternatywny obrazu

Alt to tekst przypisany do obrazu w kodzie strony. Nie musi być widoczny obok zdjęcia. Powinien przekazywać informację potrzebną do zrozumienia treści albo wykonania działania.

W kodzie HTML może wyglądać tak: alt="Czerwony fotel z drewnianymi podłokietnikami". W systemie CMS wpisuje się go zwykle w polu „tekst alternatywny” lub „alt”. Nie trzeba samodzielnie edytować kodu.

Alt nie służy do opisywania wszystkiego, co widać na zdjęciu. Ma zastąpić obraz w danym kontekście. Ten sam plik może więc wymagać innego opisu na stronie produktu i innego w artykule o aranżacji wnętrza.

Na stronie produktu warto wskazać kolor, materiał i konstrukcję fotela, jeśli te cechy pozwalają rozpoznać wariant. W artykule o małym salonie ważniejsze może być ustawienie mebla przy ścianie i wykorzystanie przestrzeni. Nie ma jednego altu odpowiedniego dla każdego miejsca publikacji.

Źle: alt="Obrazek".

Dobrze: alt="Czerwony fotel z drewnianymi podłokietnikami".

Pierwszy tekst informuje jedynie o obecności grafiki. Drugi mówi, co ona przedstawia.

Kto naprawdę czyta tekst alternatywny

Głównym odbiorcą altu jest osoba korzystająca z czytnika ekranu. Program odczytuje stronę głosem lub przekazuje jej treść do monitora brajlowskiego. Po napotkaniu obrazu może przedstawić jego tekst alternatywny. Użytkownik poznaje w ten sposób informację niedostępną wzrokowo.

Liczy się też miejsce opisu w strukturze strony. Alt jest odczytywany razem z nagłówkami, akapitami, odnośnikami i kontrolkami. Jeśli powtarza wcześniejsze zdanie albo zawiera serię luźnych słów, utrudnia odbiór. Zwięzły opis, dopasowany do sąsiedniej treści, pozwala ocenić znaczenie obrazu.

Alt pomaga robotom wyszukiwarek ustalić temat obrazu i jego związek z treścią strony. Sam nie zapewni jednak wysokiej pozycji. Liczą się również zawartość i jakość strony, kontekst grafiki oraz inne sygnały.

Tekst alternatywny przydaje się także wtedy, gdy obraz się nie załaduje. Zależnie od przeglądarki i układu strony użytkownik może zobaczyć go zamiast grafiki. Alt nie naprawi uszkodzonego pliku ani błędnego adresu.

Treść nietekstowa powinna mieć alternatywę spełniającą ten sam cel. Technologie wspomagające mogą pomijać obrazy czysto dekoracyjne (źródło: https://www.w3.org/Translations/WCAG21-pl/).

Czym alt różni się od tytułu obrazu i podpisu

Tekst alternatywny zastępuje obraz. Atrybut title przekazuje informację dodatkową. W niektórych przeglądarkach pojawia się po najechaniu kursorem, ale nie zastępuje altu. Nie każdy korzysta z myszy, a obsługa tego atrybutu jest różna.

Nazwa pliku także nie jest altem. Plik fotel-czerwony.jpg może ułatwić porządkowanie zasobów, lecz nie zastąpi poprawnie wpisanego atrybutu.

Podpis pod zdjęciem widzą wszyscy. Może zawierać autora, źródło, komentarz lub dodatkowy kontekst. Jeśli przekazuje już pełną informację, alt nie powinien powtarzać jej słowo w słowo.

Źle: podpis Prezes podpisuje umowę z partnerem i identyczny alt.

Lepiej: podpis wyjaśnia znaczenie sceny, a alt, jeśli jest potrzebny, krótko identyfikuje obraz: alt="Podpisanie umowy przy stole konferencyjnym".

Czasem właściwy będzie pusty alt. Decyduje o tym informacja, którą zdjęcie wnosi ponad podpis i sąsiedni tekst.

Jak napisać dobry alt krok po kroku

Najpierw ustal, po co obraz znajduje się na stronie i co straci czytelnik, jeśli go nie zobaczy. Odpowiedź pokaże, czy trzeba opisać wygląd, dane czy funkcję elementu.

Możesz na chwilę usunąć obraz i dokończyć zdanie: „W tym miejscu czytelnik powinien wiedzieć, że…”. Zakończenie będzie punktem wyjścia do napisania altu. Jeśli po usunięciu grafiki niczego nie brakuje, prawdopodobnie pełni ona funkcję dekoracyjną.

Przeczytaj zdania przed obrazem i po nim. Alt ma uzupełniać ten kontekst, a nie ponownie opowiadać cały akapit.

Wybierz cechy, które wpływają na sens. Przy produkcie mogą to być wariant, kolor i konstrukcja. Przy zdjęciu zespołu ważne będą osoby lub sytuacja. Pomiń szczegóły tła, jeśli niczego nie wyjaśniają.

Oddziel fakty widoczne na obrazie od interpretacji. Można napisać, że osoba trzyma dokument i się uśmiecha, jeśli rzeczywiście to widać. Nie należy bez podstaw nazywać jej zadowolonym klientem ani dopisywać, że zakończyła udane negocjacje. Alt opisuje treść obrazu, nie domysły autora.

Pisz naturalnie. Zwykle nie trzeba zaczynać od słów „zdjęcie” lub „obraz”, ponieważ czytnik ekranu może już poinformować o grafice. Wyjątkiem są sytuacje, w których forma ma znaczenie, na przykład fotografia archiwalna, ilustracja lub mapa.

Na końcu przeczytaj alt razem z sąsiednim tekstem. Usuń powtórzenia i sprawdź, czy opis nie brzmi jak lista przypadkowych słów.

Nie trzeba trzymać się jednej liczby znaków. Prosty produkt lub ikona wymagają krótszego opisu, a złożona scena może potrzebować kilku dodatkowych słów. Jeśli wyjaśnienie rozrasta się do akapitu, umieść w alcie główny wniosek, a szczegóły przenieś do treści strony.

Źle: alt="fotel sklep meble fotel czerwony najlepszy fotel do salonu".

Dobrze: alt="Czerwony fotel wypoczynkowy na drewnianych nogach".

Drugi wariant opisuje produkt. Pierwszy gromadzi frazy wyszukiwane przez klientów, przez co brzmi nienaturalnie i utrudnia odbiór.

Kiedy alt powinien pozostać pusty

Obraz dekoracyjny nie przekazuje informacji ani nie służy do wykonania działania. Może to być ozdobna linia, abstrakcyjny kształt w tle lub ikona powtarzająca sens widocznego tekstu. Taki element powinien mieć pusty atrybut: alt="".

Pusty alt informuje technologię wspomagającą, że obraz można pominąć. Brak atrybutu nie przekazuje takiej decyzji. Czytnik ekranu może wtedy odczytać nazwę pliku lub adres grafiki, tworząc zbędny komunikat.

Źle dla ozdobnego zawijasa: brak atrybutu alt.

Dobrze: alt="".

Nie oznaczaj jako dekoracyjnego obrazu, który zawiera potrzebną informację. Fotografia produktu, wykres, przycisk graficzny i instrukcyjny zrzut ekranu zwykle wymagają alternatywy.

Decyduje rola obrazu, nie jego wygląd. Ikona strzałki może być dekoracją obok tekstu „Dalej” albo jedyną zawartością przycisku zmieniającego slajd. W pierwszym przypadku można ją pominąć. W drugim użytkownik musi poznać nazwę działania.

Jak opisywać różne rodzaje obrazów

Zdjęcie produktu

Opis powinien wskazywać cechy widoczne na zdjęciu, które pozwalają rozpoznać wariant. Nie przepisuj całej nazwy produktu, ceny ani tekstu sprzedażowego.

Źle: alt="Produkt numer A kup teraz wysoka jakość".

Dobrze: alt="Granatowa torba podróżna z boczną kieszenią i paskiem na ramię".

Taki alt pozwala odróżnić wariant i nie udaje reklamy.

Jeśli galeria zawiera kilka ujęć, opisz informację wynikającą z każdego z nich: widok z przodu, wnętrze komory, sposób mocowania paska lub detal zamka. Nie powtarzaj pełnej nazwy handlowej przy każdym zdjęciu, jeśli widnieje już w tytule produktu.

Wykres z danymi

Krótki alt powinien nazwać wykres i podać jego główny wniosek. Dokładne wartości należy umieścić także w zwykłym tekście lub dostępnej tabeli. Alt nie jest miejscem na długi zestaw danych.

Źle: alt="Wykres wyników".

Dobrze: alt="Wykres pokazujący wzrost udziału zapytań mobilnych w badanym okresie".

Opis kolorów słupków nie wystarczy. Użytkownik potrzebuje znaczenia danych.

Jeśli kolory oznaczają kategorie, ich nazwy i wartości muszą być dostępne bez rozpoznawania barw. Przed wykresem można podać główny trend, a pod nim tabelę z okresami i wynikami. Alt będzie wtedy krótkim wprowadzeniem, a komplet danych pozostanie w treści.

Logo będące odnośnikiem

Jeśli logo prowadzi do strony głównej, alt powinien wskazywać cel odnośnika lub nazwę organizacji. Tekst linku musi być zrozumiały bez oglądania znaku.

Źle: alt="Logo".

Dobrze: alt="Wykonamy.net — strona główna".

Gdy obok logo znajduje się tekstowy odnośnik prowadzący w to samo miejsce, sposób wdrożenia trzeba ocenić w kontekście całej nawigacji.

Ikona dekoracyjna

Ikona obok widocznego napisu często tylko go ilustruje. Powinna wtedy mieć pusty alt, aby czytnik nie powtarzał komunikatu.

Źle przy ikonie telefonu obok tekstu „Zadzwoń”: alt="Ikona telefonu".

Dobrze: alt="".

Jeśli sama ikona jest przyciskiem bez tekstowej etykiety, musi otrzymać dostępną nazwę. Może ją zapewnić alt lub inny element kodu.

Zrzut ekranu

Alt powinien wyjaśniać, co pokazuje zrzut i jakie ma znaczenie w instrukcji. Opisywanie całego interfejsu zwykle nie pomaga.

Źle: alt="Screenshot panelu".

Dobrze: alt="Panel edycji obrazu z zaznaczonym polem Tekst alternatywny".

Złożoną procedurę opisz także w treści. Czytelnik nie powinien odczytywać instrukcji wyłącznie z grafiki.

W instrukcji krok po kroku podaj tekstowo nazwy zakładek, przycisków i pól. Zrzut może pomóc je odnaleźć, ale nie powinien być jedynym nośnikiem polecenia. Dzięki temu procedurę da się wykonać również po zmianie rozmiaru obrazu lub przy jego niewczytaniu.

Najczęstsze błędy w tekstach alternatywnych

Częstym błędem jest upychanie fraz wyszukiwanych przez użytkowników. Alt ma pomagać zrozumieć obraz. Lista podobnych haseł obniża czytelność i nie przekazuje jego znaczenia.

Ogólne opisy, takie jak „obrazek”, „zdjęcie” lub „grafika”, również nie wystarczą. Nie mówią, co przedstawia element ani po co znajduje się na stronie.

Problemem jest też kopiowanie podpisu, nagłówka lub sąsiedniego zdania. Użytkownik czytnika ekranu słyszy wtedy tę samą informację kilka razy.

Nie należy automatycznie tworzyć altu z nazwy pliku. Nazwy takie jak IMG_4587 lub baner-final-poprawiony nie stanowią użytecznej alternatywy.

Nie opisuj też dekoracji na siłę. Zbędne komunikaty wydłużają nawigację i odciągają uwagę od treści.

Po wymianie obrazu może pozostać nieaktualny opis. Redaktor podmienia fotografię w istniejącym komponencie, ale dawny alt nadal wskazuje inny produkt, kolor lub ekran aplikacji. Po każdej zmianie grafiki trzeba więc ponownie sprawdzić tekst alternatywny.

Jak samodzielnie sprawdzić alty na stronie

Zacznij od strony głównej, oferty, produktów, formularzy i popularnych artykułów. Przy każdym obrazie ustal, czy pełni funkcję informacyjną, użytkową czy dekoracyjną.

W systemie zarządzania treścią otwórz ustawienia obrazu i znajdź pole tekstu alternatywnego. Sprawdź, czy jest wypełnione i pasuje do miejsca użycia. Ten sam plik może występować w różnych kontekstach.

Możesz też skorzystać z narzędzi deweloperskich przeglądarki. Po wybraniu obrazu znajdź w kodzie atrybut alt. Rozróżnij pusty atrybut alt="", jego brak i alt zawierający tekst.

Wyłącz obrazy lub celowo wywołaj problem z ich wczytywaniem. Taki test pomaga wykryć braki, ale nie zastępuje sprawdzenia strony czytnikiem ekranu.

Następnie przejdź stronę bez patrzenia na grafiki. Jeśli instrukcja, wykres lub przycisk traci sens, alternatywa wymaga poprawy. Sprawdź też odnośniki i przyciski zawierające obrazy.

Wyniki możesz zapisać w liście zawierającej adres podstrony, rodzaj obrazu, obecny alt i proponowaną zmianę. Ułatwi to wykrycie powtarzalnych problemów, takich jak brak pustych altów przy ikonach czy kopiowanie nazw plików.

Po wprowadzeniu zmian sprawdź ponownie kilka reprezentatywnych podstron. Jeden szablon lub komponent może wpływać na wiele obrazów.

Ograniczenia i sytuacje wymagające pomocy specjalisty

Sam alt nie zapewnia pełnej dostępności strony. Nie naprawi złej kolejności nagłówków, niedostępnego formularza, problemów z obsługą klawiatury ani zbyt słabego kontrastu tekstu. Nie zastąpi też objaśnienia złożonego wykresu.

Automatyczny audyt może wykryć brak atrybutu, lecz zwykle nie oceni sensu opisu. Alt może istnieć i nadal być bezużyteczny. Trzeba ocenić go w kontekście obrazu i strony.

Pomoc specjalisty może być potrzebna przy rozbudowanych wykresach, mapach, infografikach, interaktywnych galeriach i przyciskach zbudowanych wyłącznie z ikon. Konsultacja przyda się też wtedy, gdy nie wiadomo, jak technicznie nadać nazwę elementowi lub ukryć dekorację przed czytnikiem ekranu.

Audyt dostępności należy rozważyć, gdy serwis pełni funkcję publiczną, sprzedażową lub obsługową. Powinien obejmować obrazy, nawigację, strukturę strony i działanie technologii wspomagających.

Co zrobić po przeczytaniu poradnika

Najpierw sprawdź obrazy na najczęściej odwiedzanych podstronach. Grafikom informacyjnym nadaj krótkie opisy dopasowane do kontekstu. Przy dekoracjach ustaw pusty alt, a wykresy i instrukcje uzupełnij zwykłym tekstem.

Potem przejdź stronę bez oglądania obrazów. Jeśli nadal rozumiesz jej treść i możesz wykonać wszystkie działania, alty spełniają swoją funkcję.

Najczęstsze pytania

Czy każdy obraz na stronie musi mieć opis alt?

Każdy element img powinien mieć świadomie ustawiony atrybut alt, ale nie zawsze zawierający opis. Obrazy informacyjne wymagają tekstowej alternatywy, natomiast elementy czysto dekoracyjne powinny mieć alt="".

Czy mogę używać tego samego altu przy kilku zdjęciach produktu?

Tak, jeśli zdjęcia przekazują dokładnie tę samą informację. Gdy pokazują inny kolor, detal, ujęcie lub funkcję produktu, warto opisać tę różnicę. Nie należy jednak sztucznie rozbudowywać altów tylko po to, aby każdy był unikalny.

Czy pusty alt zaszkodzi pozycjonowaniu obrazu?

Pusty alt jest właściwy dla obrazu dekoracyjnego, który nie wnosi treści. Nadawanie dekoracji sztucznego opisu nie zwiększa jej wartości dla użytkownika. Obrazy ważne dla treści i wyszukiwania powinny natomiast otrzymać trafny, naturalny opis.

Czy sztuczna inteligencja może automatycznie tworzyć dobre alty?

Może przygotować propozycję na podstawie zawartości obrazu, lecz nie zawsze zna kontekst strony. Człowiek powinien ocenić, czy opis przekazuje właściwą informację oraz czy grafika nie jest tylko dekoracją. Automatyczny wynik wymaga więc kontroli.

Co wpisać w alt, gdy obraz zawiera tekst?

Jeśli tekst na obrazie jest potrzebny do zrozumienia strony, jego sens powinien znaleźć się w alcie lub w treści obok grafiki. Przy dłuższym komunikacie lepiej umieścić pełną informację jako zwykły tekst HTML. Ułatwia to czytanie, kopiowanie i zmianę rozmiaru.