Alt text

Alt text (tekst alternatywny) to krótki opis obrazu przypisany w kodzie strony (najczęściej jako atrybut `alt` w znaczniku ``), który zastępuje treść graficzną, gdy obraz nie może zostać wyświetlony lub gdy użytkownik korzysta z technologii asystujących. Jest to element semantyki HTML, który pomaga zrozumieć znaczenie obrazu zarówno ludziom, jak i systemom przetwarzającym treść strony.

Alt text pełni przede wszystkim funkcję dostępności: czytniki ekranu mogą odczytać opis i przekazać użytkownikowi informację o tym, co przedstawia grafika lub jaką pełni rolę w interfejsie. W praktyce alt text bywa jedynym sposobem, aby użytkownik niewidomy lub słabowidzący zrozumiał, że na stronie znajduje się np. wykres trendu, zdjęcie produktu, ikona przycisku czy zrzut ekranu z komunikatem błędu. W przypadku obrazów czysto dekoracyjnych alt text powinien zwykle nie wnosić treści (np. pusty `alt=””`), aby nie zaśmiecać odczytu.

Drugą istotną funkcją alt textu jest odporność treści na problemy techniczne. Gdy obraz nie załaduje się z powodu błędu serwera, blokady zasobów, wolnego łącza lub błędnego adresu URL, przeglądarka może wyświetlić tekst alternatywny w jego miejscu. Dzięki temu użytkownik nadal otrzymuje informację, która w przeciwnym razie byłaby utracona. Alt text jest też przydatny w sytuacjach, gdy obrazy są wyłączone (np. w niektórych klientach poczty lub ustawieniach oszczędzania transferu).

Alt text ma również znaczenie w kontekście wyszukiwarek. Roboty wyszukiwarek nie „widzą” obrazu w sposób ludzki; analizują natomiast sygnały tekstowe i kontekst. Tekst alternatywny jest jednym z elementów pomagających zrozumieć, co przedstawia grafika i jak wiąże się z treścią strony. Może to wspierać dopasowanie strony do zapytań użytkowników, zwłaszcza w obszarach, gdzie obrazy niosą kluczową informację (np. zdjęcia produktów, infografiki, diagramy). Warto jednak traktować alt text jako opis znaczenia, a nie miejsce na upychanie słów kluczowych: nienaturalne, przesadnie długie lub powtarzalne opisy pogarszają jakość treści i mogą wprowadzać w błąd.

Alt text powinien być pisany z myślą o funkcji obrazu w danym kontekście. Ten sam obraz może wymagać innego opisu w zależności od tego, co autor chce przekazać. Przykładowo: zdjęcie laptopa w sklepie internetowym może mieć alt „Laptop X, 14 cali, kolor srebrny”, ale w artykule o ergonomii pracy ważniejsze będzie „Osoba pracująca przy laptopie na podstawce, z zewnętrzną klawiaturą”. W przypadku wykresu alt text powinien streszczać wniosek (np. „Wykres: wzrost sprzedaży od stycznia do czerwca, najwyżej w maju”), a nie tylko nazywać typ wykresu. Dla ikon i elementów interfejsu alt text powinien opisywać działanie, np. „Szukaj”, „Zamknij”, „Pobierz PDF”, zamiast „Ikona lupy”.

W praktyce alt text jest częścią szerszego zestawu informacji o obrazie. Oprócz `alt` znaczenie mogą mieć: podpis pod obrazem, tekst w pobliżu, nagłówki, nazwa pliku, dane strukturalne (jeśli są stosowane), a także kontekst całej strony. Alt text nie powinien dublować informacji, które i tak są bezpośrednio obok obrazu, jeśli nie wnosi to wartości dla użytkownika technologii asystujących. Przykład: jeśli pod zdjęciem widnieje podpis „Zespół w biurze w 2024 roku”, alt może być krótszy i bardziej funkcjonalny („Zespół firmy w biurze”), albo — jeśli podpis w pełni wyczerpuje sens — alt może ograniczyć się do minimum, by nie powtarzać tego samego w odczycie.

Dobrze napisany alt text jest zwykle krótki, konkretny i neutralny, a jego długość wynika z tego, ile informacji jest potrzebne, by zrozumieć obraz. Nie ma jednej „magicznej” liczby znaków: czasem wystarczy 2–5 słów (np. „Logo firmy X”), a czasem potrzebne jest jedno zdanie (np. streszczenie wykresu). Jeśli obraz zawiera dużo tekstu (np. zrzut ekranu, slajd, plakat), alt text powinien przekazać najważniejszą treść lub wskazać, gdzie znajduje się pełna transkrypcja w tekście strony. W przypadku złożonych infografik często lepszym rozwiązaniem jest umieszczenie pełnego opisu w treści artykułu, a alt text wykorzystać jako krótkie wprowadzenie (np. „Infografika przedstawiająca etapy procesu rekrutacji — szczegóły w tekście poniżej”).

  • Kluczowe właściwości
  • Alt text jest atrybutem HTML przypisanym do obrazu (najczęściej `alt` w ``), który ma przekazać sens lub funkcję grafiki, gdy obraz nie jest dostępny wizualnie.
  • Powinien opisywać to, co istotne w danym kontekście, a nie wszystko, co widać. Przykład: zamiast „Czerwony przycisk z białym napisem” lepiej „Usuń konto” (jeśli to przycisk usuwania).
  • Dla obrazów dekoracyjnych alt zwykle powinien być pusty (`alt=””`), aby technologie asystujące mogły je pominąć.
  • Dla obrazów funkcjonalnych (ikony, przyciski, linki) alt powinien opisywać działanie: „Przejdź do koszyka”, „Otwórz menu”, „Pobierz raport”.
  • W kontekście wyszukiwarek alt text jest sygnałem tekstowym pomagającym interpretować obraz i jego związek z treścią strony, ale nie zastępuje jakości treści ani nie jest gwarancją pozycji w wynikach.
  • Typowe konteksty użycia
  • Sklepy internetowe: zdjęcia produktów (np. „Buty do biegania, model Y, kolor czarny”), warianty kolorystyczne, detale (np. „Zbliżenie na podeszwę z bieżnikiem”).
  • Artykuły i poradniki: diagramy, wykresy, zdjęcia ilustrujące kroki (np. „Panel ustawień: włączona opcja dwuskładnikowego logowania”).
  • Aplikacje i interfejsy: ikony nawigacji i przyciski (np. „Wstecz”, „Zamknij okno”, „Filtruj wyniki”).
  • Materiały edukacyjne: mapy, schematy, ilustracje pojęć (np. „Schemat obiegu wody w przyrodzie: parowanie, kondensacja, opad”).
  • Treści redakcyjne i PR: zdjęcia osób i wydarzeń, gdy identyfikacja ma znaczenie (np. „Prelegentka podczas prezentacji na konferencji”).
  • Częste nieporozumienia
  • „Alt text służy tylko SEO” — w praktyce jego podstawową rolą jest dostępność i zrozumiałość treści; korzyści dla wyszukiwarek są wtórne.
  • „Alt musi zawierać słowa kluczowe” — alt powinien być naturalnym opisem; sztuczne upychanie fraz obniża jakość i może wprowadzać w błąd.
  • „Każdy obraz musi mieć długi opis” — wiele obrazów wymaga krótkiego altu, a dekoracje często powinny mieć `alt=””`.
  • „Alt i podpis pod obrazem to to samo” — podpis jest widoczny dla wszystkich, alt jest przeznaczony do sytuacji, gdy obraz nie jest dostępny wizualnie; mogą się uzupełniać, ale nie muszą się powtarzać.
  • „Jeśli obraz ma tekst, wystarczy napisać ‘zrzut ekranu’” — lepiej przekazać najważniejszą informację (np. „Komunikat błędu: nieprawidłowe hasło”) lub zapewnić transkrypcję w treści strony.