Jak pisać tekst alternatywny: praktyczny przewodnik dla deweloperów i zespołów contentowych

Zgodnie z raportem WebAIM Million 2025 brak tekstu alternatywnego dotyczy 55,5% wszystkich przeanalizowanych stron głównych — a spośród tych błędów 44% obejmuje obrazy będące linkami, co całkowicie uniemożliwia nawigację użytkownikom czytników ekranu. To nie jest niszowy problem. To połowa sieci pozostawiająca osoby niewidome i słabowidzące sam na sam z obrazami, które nic nie mówią. Jeśli wasz zespół publikuje obrazy bez uważnego przemyślenia tekstu alternatywnego, to nie tylko nie spełniacie wymogu zgodności — mówicie znaczącej części odbiorców, że ich doświadczenie nie ma znaczenia.

Czym Alt Text Właściwie Jest (i Dlaczego To Więcej Niż Tag)

Alt text, skrót od alternative text (tekst alternatywny), to pisemny opis umieszczony w atrybucie alt elementu HTML <img>. Gdy czytnik ekranu napotyka obraz, odczytuje użytkownikowi tekst alternatywny. Gdy obraz nie może się załadować — z powodu wolnego łącza, uszkodzonego adresu URL lub blokera treści — w jego miejscu wyświetlany jest alt text. Jest on również indeksowany przez wyszukiwarki, stanowiąc cichy, ale istotny sygnał SEO.

Wielu zespołów nie dostrzega jednak kluczowej rzeczy: alt text nie jest tylko awaryjną siatką bezpieczeństwa. To podstawowy sposób, w jaki osoby niewidome i słabowidzące — około 43,3 miliona osób niewidomych i 295 milionów z umiarkowanym do ciężkiego osłabieniem wzroku na całym świecie — doświadczają treści wizualnych w sieci. Czytniki ekranu, takie jak NVDA i JAWS (dwa najczęściej używane czytniki na komputery stacjonarne), ogłaszają alt text w momencie, gdy fokus dociera do obrazu. Jeśli tego tekstu brakuje, jest bezsensowny lub redundantny, doświadczenie użytkownika natychmiast się pogarsza.

Badania dotyczące osób niewidomych i słabowidzących rysują wyraźny obraz tego, co dzieje się w praktyce. Niektórzy użytkownicy zgłaszają, że całkowicie ignorują obrazy na stronach internetowych, ponieważ z ich doświadczenia alt text nigdy nie jest użyteczny. Inni pomijają zdjęcia produktów w serwisach e-commerce i polegają zamiast tego na recenzjach użytkowników, ponieważ alt text w rodzaju „image001.jpg” lub „photo” nic im nie mówi. To nie jest problem czytnika ekranu — to problem treści, który wasz zespół może rozwiązać.

Zrozumienie alt textu jako odpowiedzialności za treść — a nie tylko zadania deweloperskiego — to pierwsza zmiana myślenia, jaką musi przejść każdy zespół. Deweloper implementuje atrybut; zespół treści rozumie kontekst. Obie role są niezbędne, by zrobić to dobrze.

Krajobraz Prawny i Zgodności

Alt text nie jest opcjonalny, jeśli zależy wam na ograniczeniu ryzyka prawnego. Kryterium sukcesu WCAG 1.1.1 (Treści nietekstowe) to wymaganie poziomu A — najniższego, najbardziej podstawowego poziomu zgodności. Niespełnienie go oznacza oblanie każdego formalnego audytu dostępności. W Stanach Zjednoczonych ADA była stosowana do stron internetowych w tysiącach spraw, a tylko w 2024 roku wniesiono 4 605 pozwów dotyczących stron internetowych na podstawie ADA. Brak alt textu jest jednym z najczęściej wskazywanych naruszeń w pismach przedsądowych właśnie dlatego, że jest łatwy do wykrycia, obiektywnie mierzalny i bezpośrednio blokuje dostęp do kluczowych treści.

Poza ADA, European Accessibility Act (EAA) stał się egzekwowalny 28 czerwca 2025 roku. Jeśli wasza organizacja obsługuje klientów w UE, brak zgodności może wiązać się z karami do €100,000 lub 4% rocznego przychodu. WCAG 2.2 na poziomie AA jest powszechnie uznawany za punkt odniesienia dla zgodności z EAA, a wymagania dotyczące alt textu w kryterium 1.1.1 pozostają niezmienione w stosunku do wcześniejszych wersji — wszystkie obrazy informacyjne muszą mieć programowo określane tekstowe alternatywy.

W Kanadzie ustawa Accessibility for Ontarians with Disabilities Act (AODA) w podobny sposób nakazuje zgodność z WCAG dla organizacji sektora publicznego i prywatnego. Sekcja 508 w kontekście federalnym USA ma własne, równoległe wymagania. Wniosek jest spójny we wszystkich jurysdykcjach: alt text nie jest miłym dodatkiem, a otoczenie regulacyjne się zaostrza, a nie łagodzi.

WCAG 1.1.1 to poziom A — najbardziej podstawowy poziom zgodności. Niespełnienie go oznacza oblanie każdego audytu dostępności, a to najłatwiejsze naruszenie do wykrycia przez narzędzia automatyczne i zespoły prawne.

Ramy Decyzyjne: Które Obrazy Czego Potrzebują

Jednym z najczęstszych błędnych przekonań jest to, że każdy obraz potrzebuje opisu tekstowego. To nieprawda — a dodawanie zbędnego alt textu do obrazów dekoracyjnych faktycznie pogarsza doświadczenie użytkowników czytników ekranu, którzy muszą wtedy wysłuchiwać szumu, który nie wnosi żadnej wartości. Prawdziwą umiejętnością jest wiedzieć, do której kategorii należy każdy obraz. Oto praktyczne ramy:

• Obrazy informacyjne — Zdjęcia, ilustracje lub grafiki, które przekazują treść lub znaczenie nieobecne w otaczającym tekście. Wymagają opisowego alt textu, który komunikuje tę samą informację, jaką niesie obraz.
• Obrazy funkcjonalne — Obrazy używane jako przyciski, linki lub kontrolki (np. ikona lupy wysyłająca zapytanie wyszukiwania lub logo prowadzące do strony głównej). Alt text powinien opisywać funkcję, a nie wygląd: alt='Search', a nie alt='Magnifying glass icon'.
• Obrazy dekoracyjne — Ozdobne elementy wizualne, które dodają walorów estetycznych, ale nie niosą znaczenia: tła, separatory, czysto dekoracyjne ilustracje. Powinny mieć pusty atrybut alt (alt=''), co informuje czytnik ekranu, by całkowicie pominął obraz.
• Obrazy tekstu — Zrzuty ekranu lub grafiki zawierające słowa. Najlepszą praktyką jest całkowite unikanie ich i używanie zamiast tego prawdziwego, stylowanego tekstu. Gdy są nieuniknione, alt text powinien odtwarzać tekst z obrazu dosłownie.
• Obrazy złożone — Wykresy, grafy, mapy i infografiki zawierające gęste dane. Wymagają krótkiego podsumowania w alt text oraz dłuższego, ustrukturyzowanego opisu w treści strony lub podlinkowanego z obrazu.

Zwróć uwagę, że pusty alt text (alt='') nie jest tym samym co brak atrybutu alt. Obraz bez atrybutu alt może spowodować, że czytnik ekranu odczyta na głos nazwę pliku lub adres URL — co prawie zawsze jest gorsze niż cisza. Zawsze dodawaj atrybut, nawet jeśli jego wartość ma być celowo pusta.

Jak Pisać Alt Text, Który Naprawdę Działa: Praktyczne Zasady

Dobry alt text jest trudniejszy do napisania, niż się wydaje. Oto konkretne zasady, które odróżniają użyteczne opisy od szumu:

• Utrzymuj zwięzłość. Celuj w mniej niż 125 znaków. Czytniki ekranu, takie jak JAWS i NVDA, mogą obcinać dłuższy alt text w połowie zdania, ucinając dokładnie te informacje, nad którymi tak się napracowałeś. Jeśli obraz jest na tyle złożony, że wymaga więcej, to sygnał, że potrzebujesz dodatkowego długiego opisu.
• Nie zaczynaj od „Obraz” ani „Zdjęcie”. Czytniki ekranu automatycznie ogłaszają, że element jest obrazem, zanim odczytają alt text. Napisanie alt='Image of a smiling woman' powoduje, że czytnik powie „image, image of a smiling woman” — co jest redundantne i marnuje czas słuchacza.
• Opisuj znaczenie, a nie tylko wygląd. Alt text powinien przekazywać tę samą informację lub funkcję co obraz. Jeśli pokazujesz wykres wzrostu przychodów w Q3, nie pisz alt='Bar chart'. Napisz coś w rodzaju alt='Bar chart showing Q3 revenue up 22% year-over-year', a pełne dane umieść w otaczającym tekście.
• Dopasuj do kontekstu. To samo zdjęcie może wymagać innego alt textu w zależności od miejsca użycia. Zdjęcie laptopa na biurku użyte w sekcji „Poznaj nasz zespół” może wymagać alt textu opisującego miejsce pracy; użyte w karcie produktu powinno opisywać specyfikację i wygląd laptopa.
• Nie upychaj słów kluczowych. Alt text jest indeksowany przez wyszukiwarki, ale upychanie słów kluczowych to zarówno kiepskie doświadczenie użytkownika, jak i naruszenie intencji WCAG. Pisz najpierw dla użytkownika.
• Używaj poprawnej gramatyki i interpunkcji. Czytniki ekranu zamieniają tekst na mowę, a interpunkcja wpływa na tempo i klarowność. Równoważnik zdania brzmi mniej naturalnie niż pełna myśl.

Alt text nie musi być chłodnym, obiektywnym opisem. Może — a czasem powinien — przekazywać niuans, kontekst, a nawet emocje, gdy te cechy są istotne dla doświadczenia użytkownika z treścią.

Przykłady Kodu: Dobrze i Źle

Teoria to jedno. Zobaczmy, jak te zasady wyglądają w praktycznym HTML.

Obraz informacyjny — słaby alt text:

<img src='team-photo.jpg' alt='photo'>

Obraz informacyjny — dobry alt text:

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

Obraz funkcjonalny (logo będące linkiem) — słaby alt text:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

Obraz funkcjonalny (logo będące linkiem) — dobry alt text:

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

Obraz dekoracyjny — poprawna implementacja:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Obraz złożony (wykres) — poprawne podejście z podlinkowanym długim opisem:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

W przypadku przycisków z ikoną bez widocznej etykiety tekstowej użyj aria-label na samym przycisku i ustaw alt='' na obrazie ikony, aby uniknąć podwójnego ogłaszania:

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

Obsługa Konkretnych Typów Obrazów

Zdjęcia produktów w e-commerce: To jedne z najważniejszych kontekstów alt textu w sieci. Osoby niewidome w pełni polegają na alt text, aby zrozumieć, co rozważają kupić. Sam opis nazwy produktu jest niewystarczający. Uwzględnij materiał, kolor, kluczowe cechy wizualne i wszelkie warianty, które są wizualnie rozróżnialne. Na przykład: alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels' jest znacznie bardziej użyteczny niż alt='Blazer'.

Logotypy: Logotypy nigdy nie są dekoracyjne. Wymagają alt textu zawierającego nazwę organizacji i każdy istotny slogan lub określenie pojawiające się w obrazie logo. Jeśli logo jest również linkiem, alt text powinien opisywać jego cel, jak omówiono powyżej.

Infografiki: Z nimi szczególnie trudno poradzić sobie dobrze. Pojedynczy atrybut alt nie jest w stanie unieść ciężaru informacyjnego złożonej infografiki. Właściwym podejściem jest krótki, podsumowujący alt text (np. alt='Infographic summarizing five steps of our onboarding process') połączony z ustrukturyzowaną wersją tekstową tych samych informacji widoczną na stronie.

Obrazy osób: Uwzględnienie imion, gdy osoby są zidentyfikowane, jest pomocne, zwłaszcza w kontekstach redakcyjnych lub informacyjnych. Opisuj, co dana osoba robi lub co komunikuje obraz, a nie tylko jej wygląd fizyczny. Unikaj opisów, które sprowadzają osobę do jej cech demograficznych.

Tła i obrazy CSS: Obrazy zastosowane za pomocą CSS background-image nie mają dostępnego atrybutu alt, więc powinny być używane wyłącznie do celów rzeczywiście dekoracyjnych. Jeśli obraz ma przekazywać znaczenie, należy umieścić go w HTML jako element <img> z odpowiednim alt textem.

Włączanie Alt Textu w Wasz Workflow

Jednym z powodów, dla których alt text pozostaje masowo niesprawny, jest traktowanie go jako ostatniego kroku — czegoś, co automatyczny skaner wychwyci po wdrożeniu, wywołując pośpieszne poprawki. Rozwiązaniem jest przesunięcie alt textu „w górę” waszych procesów tworzenia treści i developmentu.

Dla zespołów treści oznacza to ustanowienie wewnętrznego przewodnika stylu dla alt textu, obejmującego najczęstsze typy obrazów. Jeśli wasza strona publikuje zdjęcia produktów, obrazy tytułowe wpisów blogowych, zdjęcia z wydarzeń i wykresy danych, każda kategoria zasługuje na udokumentowany standard z przykładami dobrych i złych opisów. Gdy autorzy i redaktorzy przesyłają obrazy, powinni myśleć o alt text w tym samym momencie, w którym myślą o podpisach i doborze obrazów.

Dla deweloperów oznacza to wbudowanie pól alt textu w szablony CMS i oznaczenie ich jako wymaganych — nie opcjonalnych — dla komponentów obrazów niedekoracyjnych. Gdy komponent przyjmuje obraz, interfejs powinien wymagać alt textu i rozróżniać konteksty informacyjne i dekoracyjne. Unikaj automatycznego wypełniania atrybutu alt nazwą pliku obrazu lub podpisem, ponieważ są to różne rzeczy, służące różnym celom.

Dla QA i menedżerów ds. zgodności narzędzia do automatycznego skanowania (w tym rozwiązania typu accessibility overlay, takie jak Accsible) mogą na dużą skalę wychwytywać obrazy z brakującymi lub pustymi atrybutami alt, oznaczając je w czasie rzeczywistym. Ale narzędzia automatyczne nie są w stanie ocenić, czy istniejący alt text jest faktycznie sensowny — ta ocena wymaga człowieka. Włącz ręczne wyrywkowe kontrole do cyklu audytów dostępności i uwzględnij ocenę jakości alt textu w kryteriach akceptacji każdej nowej funkcji obejmującej obrazy.

Gdy ten sam obraz jest używany ponownie na wielu stronach lub w różnych kontekstach, pamiętaj, że odpowiedni alt text może się zmieniać. Zdjęcie siedziby firmy użyte na stronie „Kontakt” i na stronie „O naszej kulturze” może wymagać różnych opisów w zależności od tego, co każda strona stara się zakomunikować. Platformy CMS, takie jak WordPress, umożliwiają nadpisywanie alt textu na poziomie wpisu właśnie z tego powodu.

Typowe Błędy, Których Należy Unikać

Nawet zespoły, które poważnie traktują alt text, popełniają powtarzające się błędy. Oto wzorce, na które warto aktywnie uważać:

• Używanie nazwy pliku jako alt textu. Alt text w rodzaju IMG_4521.jpg lub hero-banner-v3-final.png jest gorszy niż bezużyteczny — aktywnie sygnalizuje użytkownikom czytników ekranu, że nikt o nich nie pomyślał.
• Ujednolicanie alt textu z sąsiadującym podpisem. Podpisy i alt text służą różnym odbiorcom i różnym celom. Podpis to dodatkowy kontekst dla użytkowników widzących; alt text zastępuje obraz dla użytkowników, którzy go nie widzą. Mogą się pokrywać, ale nie powinny być bezrefleksyjnie kopiowane zamiennie.
• Dodawanie alt textu do każdego obrazu bez rozróżnienia. Nadawanie obrazom dekoracyjnym opisowego alt textu zmusza użytkowników czytników ekranu do przedzierania się przez nieistotne treści. Dyscyplina polegająca na decyzji „czy ten obraz potrzebuje opisu, a jeśli tak, to jakiego?” jest równie ważna jak samo pisanie.
• Pisanie niejasnych, oderwanych od kontekstu opisów. Alt text w rodzaju alt='man smiling' dla zdjęcia waszego CEO podczas premiery produktu mówi użytkownikowi prawie nic o tym, dlaczego obraz tam jest lub co znaczy w danym kontekście.
• Ignorowanie alt textu w SVG. Wbudowane SVG również potrzebują dostępnych nazw, zazwyczaj poprzez aria-label na elemencie <svg> lub element <title> jako pierwsze dziecko, w połączeniu z role='img'.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

Kluczowe Wnioski

• Nie każdy obraz potrzebuje opisu tekstowego. Obrazy dekoracyjne powinny używać alt='', aby poinformować czytniki ekranu, by je pominęły — ale nigdy całkowicie nie pomijaj atrybutu alt, bo czytnik może zamiast tego ogłosić nazwę pliku.
• Utrzymuj alt text poniżej 125 znaków dla obrazów informacyjnych; czytniki ekranu mogą obcinać dłuższe ciągi, a zwięzłość poprawia zrozumiałość przy słuchaniu. Dla obrazów złożonych połącz krótkie podsumowanie w alt z pełnym opisem tekstowym w treści strony.
• Opisuj funkcję, a nie tylko formę. Dla obrazów będących linkami i funkcjonalnych alt text powinien mówić użytkownikowi, co się stanie lub dokąd trafi — a nie jak wygląda obraz. Dla obrazów informacyjnych komunikuj znaczenie, a nie tylko treść wizualną.
• Włącz alt text do workflow na wczesnym etapie, a nie jako poprawkę po wdrożeniu. Uczyń go polem wymaganym w CMS, uwzględnij w przewodnikach stylu treści i dodaj ocenę jakości do procesu QA — narzędzia automatyczne wychwytują brak alt textu, ale to ludzie muszą ocenić, czy jest sensowny.
• Stawka prawna i regulacyjna jest realna i rośnie. Postępowania na podstawie ADA, w których wskazywano brak alt textu, liczyły się w tysiącach w 2024 roku, a unijny Accessibility Act jest już egzekwowany. Traktowanie alt textu jako sprawy drugorzędnej nie jest realną strategią zgodności.