Atrybut alt w HTML to opis tekstowy obrazu w elemencie img, który ma zapewnić równoważną informację, gdy grafika nie jest widoczna lub odczytywana przez czytnik ekranu.

W praktyce mówimy o atrybucie będącym częścią standardu HTML/HTML5 (opracowywanego przez W3C i WHATWG), który nadaje elementowi img semantykę przez przekazanie tekstu alternatywnego.

Poprawna, minimalna składnia:

<img src=”kwiat-roza.jpg” alt=”Czerwona róża na białym tle”>

Z mojego doświadczenia wynika, że przeglądarki pokażą alt zamiast obrazu przy błędzie ładowania, a technologie asystujące (np. czytniki ekranu) odczytają tekst, aby przekazać sens grafiki. To dlatego atrybuty alt są standardowym elementem HTML5 – to nie kosmetyka, a dostępnościowy fundament.

Atrybut alt jest kluczowy, bo zwiększa dostępność (WCAG), wspiera pozycjonowanie strony i ratuje UX, gdy obraz się nie wczyta.

1. Dostępność / WCAG
   Alt to realna pomoc dla osób korzystających z czytników ekranu (NVDA, JAWS, VoiceOver). Wytyczne WCAG 2.2 mówią wprost: treści nietekstowe powinny mieć ekwiwalent tekstowy. Jeżeli zastanawiasz się, co znaczy alt dla dostępności – oznacza możliwość „zobaczenia” obrazu słowami.
2. SEO i indeksacja obrazów
   Alt pomaga algorytmom zrozumieć kontekst grafiki; wpływa na widoczność w Google Images i może wspierać ruch długiego ogona. Google Search Central od lat rekomenduje precyzyjny opis alternatywny zamiast upychania fraz. W e-commerce właściwie napisany alt img zwiększa szansę ekspozycji zdjęć produktów na zapytania z marką, modelem i wariantem.
   
3. Użyteczność przy błędach ładowania
   Gdy obraz nie dojedzie (błąd CDN, timeout), alt wyświetli sensowny tekst, zamiast „pustki”. To drobiazg, który robi różnicę zwłaszcza na urządzeniach mobilnych.

Punkty kontrolne:

• Czytniki ekranu wykorzystują alt do opisania obrazu.
• Pomaga zrozumieć zawartość grafiki algorytmom wyszukiwarki.
• Zastępuje obraz tekstem, gdy plik się nie ładuje.

Dobry alt jest zwięzły, opisowy i zgodny z funkcją obrazu – bez upychania słów kluczowych.

Oto dlaczego: opis alternatywny ma służyć użytkownikowi w kontekście, a nie algorytmowi w próżni. Atrybut alt dla zdjęć w sklepie? Napisz to, czego szuka klient (marka, model, wariant). Atrybut alt przy grafikach edukacyjnych? Streść treść, jaką „niesie” obraz.

Zasady:

• Opisz, co widać i jaką pełni funkcję w kontekście.
• Pisz naturalnym językiem; unikaj słów „obrazek”, „grafika”, chyba że ta informacja jest istotna (np. „ikona ostrzeżenia”).
• W obrazach-linkach alt pełni rolę kotwicy – opisz cel linku.
• Dla złożonych wykresów: skrót w alt, szczegóły w tekście obok / <figcaption> / opisie rozszerzonym.

<!– DOBRZE –>
<img src=”nike-air-zoom.jpg” alt=”Buty do biegania Nike Air Zoom Pegasus 41, czarne”>

<!– ŹLE –>
<img src=”nike-air-zoom.jpg” alt=”buty, obuwie, super promocja, buty do biegania najlepsze”>

Widzę często błąd, czyli atrybut alt z frazą kluczową wciśniętą na siłę. Naturalność > gęstość fraz. Też tak masz?

Pusty alt (alt=””) stosujemy dla obrazów czysto dekoracyjnych, aby czytniki je pominęły. Jeśli grafika nie wnosi treści (np. tło, ozdobnik), najlepszą praktyką jest alt pusty plus właściwa semantyka.

Wzorzec:

<img src=”tlo-fali.svg” alt=”” role=”presentation” aria-hidden=”true”>

Dzięki atrybutom role=”presentation” i aria-hidden=”true” element staje się „niewidoczny” dla technologii asystujących. To oszczędza czas użytkownika i poprawia czytelność treści. Pamiętaj: obrazy dekoracyjne ≠ informacyjne – te drugie muszą mieć opis.

Alt opisuje sam obraz, title jest podpowiedzią (rzadziej odczytywaną), <figcaption> podpisuje całą figurę, a ARIA może zapewnić dostępny opis tam, gdzie nie ma alt. Brzmi podobnie? Rolę ma każdy inną — i to często myli zespoły projektowe.

Wniosek: atrybut alt obrazka to nie to samo co title; figcaption nie zastępuje alt; ARIA to wsparcie, nie pretekst do pomijania alt.

W różnych kontekstach alt HTML ma swoje niuanse – poniżej gotowe schematy.

Ikony i przyciski

Ikona z funkcją dostaje alt z akcją („Szukaj”), ikona dekoracyjna – alt=””. W komponentach UI przycisk-ikona powinien mieć czytelną accessible name: alt lub aria-label.

• Ikona funkcyjna: <img src=”icon-search.svg” alt=”Szukaj”>
• Ikona dekoracyjna: <img src=”icon-star.svg” alt=”” aria-hidden=”true” role=”presentation”>
  

Wykresy i infografiki

W alt podaj streszczenie przekazu, pełny opis danych umieść w sąsiednim tekście lub podpisie.

Dla wykresu słupkowego czy infografiki alt może brzmieć: „Sprzedaż Q1–Q4 2025; najwyższa w Q4, +22% r/r”. Szczegóły (oś, jednostki) – w treści, figcaption albo w opisie rozszerzonym.

Zdjęcia produktów (e-commerce)

W alt wpisz: nazwa + marka + model + wariant/kolor, a gdy to kluczowe – także SKU.

Przykład: <img src=”sony-a7iv-black.jpg” alt=”Aparat Sony Alpha A7 IV, czarny (ILCE-7M4), body”>

To wzorzec, który realnie działa w kartach produktowych i listingu. Atrybut alt dla obrazków w e-commerce powinien odpowiadać na zapytanie użytkownika, nie kopiować na siłę tytułu SEO.

Obrazy-linki

Alt opisuje cel przejścia, nie tylko to, co widać.

<a href=”/zegarki/”>
<img src=”baner-zegarki.jpg” alt=”Przejdź do kategorii Zegarki”>
</a>

Dzięki temu „rola linku” jest jasna również przy nawigacji klawiaturą.

SVG i tła CSS

SVG może mieć dostępne title/desc lub ARIA; obrazy w CSS nie mają alt – zapewnij tekst w HTML. Jeśli używasz background-image w CSS, dodaj w DOM logiczny tekst (np. nagłówek, podpis).

Błędy z alt wynikają zwykle z pośpiechu – lepiej mieć prosty proces niż później gasić pożary.

• Brak alt w obrazach informacyjnych.
• Stosowanie opisów typu „obrazek1.jpg”.
• Długie, napompowane opisy z frazami SEO (klasyczny spam słów kluczowych).
• Duplikowanie identycznych alt dla różnych obrazów (duplikaty).
• Alt niezgodny z funkcją (np. obraz-link bez celu – utrata kontekstu, błąd walidacji).

Uważam, że dobrze napisany atrybut alt to ten, który „przeczytasz na głos” i dalej wszystko rozumiesz bez patrzenia na obraz. Proste? Proste. Jeśli chcesz, mogę pomóc przygotować wytyczne dla Twojego sklepu, a nawet zautomatyzować atrybut alt dla obrazków w CMS-ie. Znam ten ból!