Po co w ogóle pisać alt – perspektywa użytkownika, nie przepisów
Pierwszy błąd przy alternatywnych opisach obrazów to traktowanie ich jak rubryki w formularzu: „ma być, więc coś wpiszemy”. Takie podejście szybko kończy się altami w rodzaju „obrazek1”, „photo123”, „młoda uśmiechnięta kobieta”. Formalnie pole nie jest puste, ale dla użytkownika czytnika ekranu to wyłącznie szum.
Tekst alternatywny jest czytany głównie przez osoby niewidome i słabowidzące, korzystające z czytników ekranu. Czasem skorzysta z niego ktoś na bardzo wolnym łączu albo użytkownik z wyłączonym ładowaniem obrazów. Kluczowe pytanie brzmi: co ta osoba straci, jeśli nie zobaczy obrazu? Jeśli odpowiedź brzmi „nic ważnego”, alt powinien być pusty. Jeśli „straci istotny fragment treści lub nie zrozumie działania elementu”, alt staje się krytycznie ważny.
Różnica między „odhaczeniem WCAG” a realnym wsparciem jest odczuwalna po kilku sekundach słuchania strony czytnikiem. Na stronie z altami pisanymi „pod przepis” słyszymy: „Grafika: młoda uśmiechnięta kobieta; grafika: logotyp; grafika: tło niebieskie; grafika: mężczyzna przy biurku…”. Treść artykułu ginie w potoku opisów marketingowych fotek stockowych. Strona z altami pisanymi „pod użytkownika” prowadzi płynnie po ważnych informacjach; grafiki dekoracyjne są pomijane.
Alt nie jest opisem dekoracji, ale zamiennikiem informacji. Jeżeli zdjęcie, wykres czy ikona niesie treść, której nie ma nigdzie indziej, tekst alternatywny (lub opis tekstowy obok) ma tę treść przejąć. Jeżeli grafika jedynie „zdobi”, nie ma czego zastępować – wtedy alt przeszkadza, bo dokleja zbędne komunikaty do każdej sekcji strony.
Częste nieporozumienia wokół alternatywnych opisów obrazów wynikają z mylenia ról:
- „Alt jest dla Google” – sprowadza alt do pola SEO. Skutek: upychanie fraz kluczowych, często bez związku z tym, co faktycznie jest na obrazku.
- „Każdy obraz musi mieć rozbudowany opis” – powoduje przeciążenie użytkownika czytnika ekranu informacjami o każdym detalu wizualnym, choć większość z nich nie ma znaczenia dla treści.
- „Kopiuj nazwę pliku do alt” – dobre dla robota, bezużyteczne dla człowieka („DSC_3871-final.jpg” nie powie nic o zdjęciu).
Realna dostępność zaczyna się wtedy, gdy tekst alternatywny opisuje to, co z punktu widzenia użytkownika jest niezbędne do zrozumienia treści lub wykonania zadania – nic mniej i nic więcej.
Jak decydować: alt pusty, krótki, długi czy bez altu – proste kryteria
Pytania kontrolne, które porządkują decyzję
Zamiast zapamiętywać kilkanaście reguł, łatwiej stosować kilka prostych pytań kontrolnych. Kolejność ma znaczenie, bo prowadzi od najczęstszych przypadków do tych bardziej złożonych.
Pytanie 1: Czy obraz wnosi nową, istotną informację, której nie ma w tekście? Jeśli nie, grafika jest mocnym kandydatem na dekoracyjną, a alt może (i często powinien) być pusty. Dotyczy to np. zdjęć „dla klimatu”, ozdobnych ikonek przy nagłówkach, tła w sekcjach.
Pytanie 2: Czy obraz pełni funkcję interaktywną? Mowa o przyciskach, linkach, kontrolkach formularzy, które są reprezentowane przez grafikę. Dla takich elementów kluczowa jest funkcja („Wyślij”, „Usuń”, „Otwórz koszyk”), nie wygląd. Użytkownik musi wiedzieć, co się stanie, gdy w niego wejdzie, a nie jak wygląda ikonka.
Pytanie 3: Czy bez obrazu użytkownik z czytnikiem ekranu zrozumie, co się dzieje? Jeżeli zdjęcie, wykres, baner lub zrzut ekranu jest jedynym źródłem jakiejś informacji (np. wyniki badania, treść hasła promocyjnego, układ interfejsu), trzeba tę informację udostępnić tekstowo – czasem częściowo w alt, częściej w tekście obok.
Odpowiadając na te pytania, zwykle trafiamy do jednego z czterech scenariuszy:
- Obraz dekoracyjny – nie wnosi nowej treści. Decyzja: alt=”” (pusty), ekran czytający go pominie.
- Obraz ilustracyjny – wspiera zrozumienie, ale nie jest jedynym źródłem informacji. Decyzja: krótki alt, zwykle 3–10 słów.
- Obraz informacyjny/złożony (wykres, infografika, schemat) – przekazuje sporo danych. Decyzja: alt krótki + pełna treść w tekście obok.
- Obraz funkcjonalny – jest przyciskiem, linkiem, kontrolką. Decyzja: opis funkcji, nie wyglądu (często w alt, czasem w aria-label przy elemencie).
Ilustracja stockowa „uśmiechnięta osoba z laptopem” – kiedy alt pusty
Wyobraźmy sobie stronę banku z sekcją „Szybki kredyt online”. Po prawej duże zdjęcie: młoda kobieta siedzi przy biurku, uśmiecha się do laptopa. Obok nagłówek i krótki opis oferty.
Trzy możliwe podejścia:
1. Błędny alt, opis wyglądu:
alt=”młoda kobieta przy komputerze w nowoczesnym biurze”
Takie alt-y są częste, bo wydają się „dokładne”. Problem w tym, że opisują wyłącznie warstwę wizualną, która nie ma żadnego wpływu na zrozumienie oferty kredytu. Osoba używająca czytnika słyszy dodatkowe zdanie, które nie pomaga podjąć decyzji ani lepiej zrozumieć treści. To informacyjny balast.
2. Umiarkowanie poprawny alt, ale nadal zbędny:
alt=”kobieta korzystająca z kredytu online”
Ten opis już jakoś łączy grafikę z treścią, ale nadal nie wnosi nowej informacji. Wszystko, co istotne, zostało powiedziane w nagłówku i leadzie obok. Czytnik ekranu z tak ustawionym alt zatrzyma się na chwilę, doda zdanie, które tylko powtarza przekaz marketingowy – i nic więcej.
3. Najlepsza decyzja w tym scenariuszu:
alt=”” (pusty)
Dla czytnika ekranu oznacza to: „pomiń ten obraz, nic ważnego tu nie ma”. Użytkownik płynnie przechodzi z nagłówka do tekstu oferty. Nie traci żadnej treści, za to zyskuje bardziej skondensowane doświadczenie.
Ten przykład dobrze pokazuje, że dobre alt-y to nie tylko „więcej opisów”. Czasem największą pomocą dla użytkownika jest świadome zrezygnowanie z opisu.
Konsekwencje złych decyzji: gdy alt szkodzi zamiast pomagać
Przeładowanie strony opisami każdego zdjęcia kończy się podobnie jak wysyłanie komuś długiego maila, w którym trzy razy powtarzasz to samo: odbiorca szybciej się męczy i trudniej mu wychwycić istotne fragmenty. Osoba korzystająca z czytnika ekranu nie „skanuje” treści wzrokiem, tylko słucha wszystkiego po kolei. Każdy zbędny alt to kilka sekund straconego czasu i rosnące znużenie.
Z drugiej strony, brak opisu, kiedy obraz jest kluczowy, może całkowicie zablokować wykonanie zadania. Klasyczne przykłady:
- Przycisk „Kup teraz” reprezentowany przez ikonę koszyka bez altu/etykiety – z perspektywy czytnika ekranu po prostu „grafika, nieopisany przycisk”.
- Wykres wyników badań bez opisu danych – osoba niewidoma nie ma szansy poznać wniosków, mimo że reszta artykułu je omawia.
- Baner „-50% na kursy dostępności do końca tygodnia” jako jedyny nośnik informacji o promocji – ktoś, kto nie widzi obrazów, nigdy się o tej ofercie nie dowie.
Dobre decyzje alt vs pusty alt zaczynają się od szczerej odpowiedzi: czy ta konkretna grafika rzeczywiście coś wnosi, czy tylko zdobi.
Co opisywać: wygląd, funkcja czy kontekst – trzy różne strategie
Trzy rodzaje informacji w alt: wygląd, funkcja, kontekst
Większość dylematów przy pisaniu tekstu alternatywnego sprowadza się do tego, co dokładnie opisać. Można wyróżnić trzy główne strategie:
- Opis wyglądu – jak coś wygląda: kolory, kształty, osoby, otoczenie („czerwony przycisk”, „mężczyzna w garniturze”, „wykres słupkowy na białym tle”).
- Opis funkcji – co coś robi, do czego służy („Otwórz menu nawigacji”, „Usuń element z listy”, „Przejdź do koszyka”).
- Opis kontekstu – jaką rolę grafika pełni w treści i co z niej istotnego wynika („wykres pokazuje wzrost liczby zgłoszeń błędów”, „zdjęcie ilustruje przykład złej praktyki UX”).
Te trzy podejścia nie wykluczają się; często łączą się w różnych proporcjach. Najprostsze kryteria:
- Dla elementów interfejsu (ikony, przyciski, kontrolki) priorytet ma opis funkcji.
- Dla zdjęć ilustracyjnych zwykle ważniejszy jest kontekst niż dokładny wygląd.
- Dla zdjęć produktowych i materiałów edukacyjnych często potrzebne jest połączenie kontekstu z kluczowymi cechami wyglądu.
Ikona kosza na przycisku „Usuń” – funkcja ponad wygląd
Załóżmy, że masz przycisk w panelu administracyjnym: ikona kosza + tekst „Usuń”. Trzy warianty:
Wariant 1: alt na samej ikonie, opis wyglądu
alt=”kosz na śmieci” (na elemencie <img> w przycisku)
Efekt dla osoby korzystającej z czytnika: przycisk będzie zapowiedziany jako „Grafika: kosz na śmieci, przycisk Usuń”. Informacja „kosz na śmieci” nie ma tu żadnej wartości; liczy się etykieta przycisku „Usuń”. Dodatkowy opis tylko rozbija komunikat na dwie części.
Wariant 2: alt pusty na ikonie + widoczny tekst „Usuń”
<img alt=””> + tekstowy napis „Usuń”
Tutaj czytnik pominie grafikę i odczyta po prostu „Usuń, przycisk”. Użytkownik wie, co zrobi kliknięcie – bez wiedzy, że wizualnie to kosz. Funkcja jest przekazana w sposób prosty i jednoznaczny.
Wariant 3: przycisk tylko z ikoną, bez tekstu
Przycisk ma wyłącznie grafikę kosza, brak napisu. W takim scenariuszu trzeba zapewnić tekstową etykietę funkcji. Technicznie można to zrobić różnie (aria-label, title, alt na <img>, zależnie od implementacji), ale kluczowe jest brzmienie treści, np.:
aria-label=”Usuń element” albo alt=”Usuń” (jeśli obraz jest jedyną zawartością przycisku).
Dla użytkownika czytnika różnica między „kosz na śmieci, przycisk” a „Usuń element, przycisk” jest zasadnicza. W pierwszym wariancie musi się domyślać funkcji na podstawie metafory wizualnej, w drugim od razu słyszy efekt działania. Przy ikonach interfejsu priorytetem nie jest wierność graficznej metaforze, tylko jasny opis tego, co się stanie po aktywacji.
Jeśli projekt zakłada kilka podobnych ikon obok siebie (np. „Edytuj”, „Duplikuj”, „Usuń”), spójność etykiet staje się kluczowa. Dla wzroku różnice między ołówkiem, dwiema kartkami a koszem są oczywiste. W wersji czytanej liczy się powtarzalny schemat, np. „Edytuj element”, „Duplikuj element”, „Usuń element”. Zamiast eksperymentować z kreatywnymi opisami („Wyrzuć do kosza”) lepiej trzymać się prostych, przewidywalnych czasowników.
Inaczej wygląda sytuacja, gdy ta sama ikona kosza pojawia się w artykule o projektowaniu ikon lub brandingu, jako przykład wzorca graficznego. Wtedy funkcja schodzi na dalszy plan, a na pierwszy wychodzi wygląd lub kontekst: „trójwymiarowa ikona kosza w stylu flat” albo „ikona kosza używana w poprzedniej wersji interfejsu”. Ten sam plik SVG, ale zupełnie inna rola – i inny typ altu.
Najprostszy test przy ikonach interfejsu brzmi: „Gdyby ikona zniknęła i został sam tekst z altu/etykiety, czy użytkownik dalej bez problemu wykona zadanie?”. Jeśli odpowiedź brzmi „tak” – opis funkcji jest wystarczający. Jeśli „nie” – znaczy, że alt nadal jest zbyt wizualny, zbyt ogólny albo po prostu nie opisuje działania.
Dobrze napisane alt-y rzadko są widowiskowe. Raczej ciche i transparentne: znikają w tle, bo nie przeszkadzają w czytaniu i pomagają płynnie wykonać zadanie. W praktyce wygrywają nie ci, którzy opiszą każdy piksel, ale ci, którzy konsekwentnie zadają sobie trzy pytania: po co ten obraz, czego bez niego nie będzie wiadomo i czy ta informacja nie jest już przypadkiem w tekście obok.
Zdjęcie ilustracyjne vs zdjęcie produktowe – inne decyzje, inne priorytety
Na zdjęcia patrzymy często przez jeden filtr: „ładne czy nie”. W altach te różnice są dużo ważniejsze: raz liczy się nastrój, innym razem konkretne parametry. Dobrze widać to na porównaniu dwóch typów fotografii.
Zdjęcie ilustracyjne w artykule blogowym
Temat: „Jak zmniejszyć stres w pracy zdalnej”. U góry zdjęcie: osoba siedzi z kubkiem kawy na kanapie, obok laptop.
Możliwe podejścia:
alt=”młoda kobieta siedząca na kanapie z laptopem i kubkiem kawy” – opis wyglądu. Dokładny, ale czy coś zmienia w zrozumieniu treści? Nie.
alt=”osoba odpoczywająca z laptopem w domu” – lekko uogólniony opis, bardziej zbliżony do nastroju tekstu, ale nadal nie wnosi żadnej nowej informacji.
alt=”” – pusty; cała treść jest w nagłówku i leadzie. Grafika tylko wprowadza klimat. Użytkownik czytnika nie traci niczego, pomijając ją.
W takim scenariuszu najlepsza decyzja to zazwyczaj pusty alt. Chyba że obraz faktycznie niesie jakąś unikalną informację, np. pokazuje nietypową pozycję przy biurku, o której mowa w artykule niżej – wtedy alt może lekko uchylić rąbka: „przykład nieergonomicznej pozycji przy pracy z laptopem na kanapie”. Kluczem jest realny związek zdjęcia z konkretnym fragmentem treści, nie sam „klimat ilustracyjny”.
Zdjęcie produktowe w sklepie internetowym
Karta produktu: buty do biegania. Dla osób widzących miniatury i duże zdjęcia są głównym źródłem informacji. Dla osoby korzystającej z czytnika – rolę zdjęcia przejmuje alt (plus opisy tekstowe w specyfikacji).
Porównanie trzech altów:
alt=”buty do biegania” – zbyt ogólne. Nie pomagają odróżnić produktu od innych modeli.
alt=”niebieskie buty do biegania z białą podeszwą” – lepiej, ale nadal brakuje kluczowych cech użytkowych.
alt=”męskie buty do biegania w terenie, niebieskie, z wysoką podeszwą z agresywnym bieżnikiem” – łączy kontekst („w terenie”) z cechami wyglądu, które mają znaczenie przy decyzji zakupowej (rodzaj podeszwy, przeznaczenie).
Gdzie przebiega granica? Alt nie zastępuje pełnego opisu produktu, ale powinien dawać minimum informacji, które osoba widząca „wyłapie wzrokiem” z samego zdjęcia: typ, przeznaczenie, najbardziej wyróżniające cechy. Bardzo szczegółowe detale („6 rzędów szwów”, „logo po lewej stronie pięty”) lepiej umieścić w tekście, jeśli faktycznie mają znaczenie, np. przy opisie limitowanej serii.
Na poziomie całego sklepu dobrze sprawdza się prosty schemat ustalony w zespole, np.: „[typ produktu] [dla kogo/dla czego] [kluczowa cecha wyglądu/przeznaczenia]”. Dzięki temu alt-y są spójne i w listach produktów łatwo porównać oferty.
Wykresy i infografiki – kiedy alt, a kiedy opis obok
Przy materiałach z danymi decyzje robią się trudniejsze, bo zwykle „wszystko jest ważne”. Tu szczególnie widać różnicę między opisaniem obrazka a udzostępnieniem informacji.
Przykład: prosty wykres słupkowy w raporcie
Załóżmy, że wykres pokazuje liczbę zgłoszeń błędów w aplikacji w trzech miesiącach.
Możliwe strategie:
alt=”wykres słupkowy z trzema słupkami na białym tle” – klasyczna pułapka. Użytkownik wie, że jest wykres, ale nie zna żadnych danych.
alt=”wykres słupkowy pokazujący wzrost liczby zgłoszeń błędów z miesiąca na miesiąc” – lepiej, bo oddaje wniosek, ale nadal nie podaje liczb.
alt=”liczba zgłoszeń błędów: styczeń 50, luty 80, marzec 120 – trend rosnący” – użytkownik dostaje dokładnie te same informacje, które osoba widząca odczyta z osi wykresu.
Ten ostatni wariant jest najbardziej użyteczny, ale szybko staje się mało praktyczny przy złożonych wykresach z wieloma seriami danych. Dla dużych, skomplikowanych infografik lepszym rozwiązaniem jest krótszy alt i pełny opis w tekście obok.
Sprawdza się proste rozdzielenie ról:
- w alt – krótka diagnoza („porównanie wyników testów wersji A i B, wersja B wypada lepiej”),
- w tekście obok (np. pod wykresem) – szczegółowy opis liczb, trendów i wniosków, w formie zwykłego akapitu lub listy.
Przykładowy układ:
alt=”porównanie czasu ładowania wersji A i B aplikacji – wersja B ładuje się szybciej”
Pod obrazem:
„Na wykresie widać, że średni czas ładowania wersji A wynosi 4,2 sekundy, a wersji B – 2,7 sekundy. Różnica utrzymuje się we wszystkich badanych scenariuszach…”
Taki podział ma dwie zalety. Po pierwsze, alt pozostaje zwięzły i nie zamienia się w „ścianę tekstu” odczytywaną jednym tchem przez czytnik. Po drugie, szczegółowy opis jest dostępny dla wszystkich, nie tylko dla osób korzystających z technologii asystujących – co często ułatwia też samą analizę danych.
Obrazy z tekstem: banery, slajdy, zrzuty ekranu
Obrazy, na których główną treścią jest tekst, są szczególnie newralgiczne. Z perspektywy dostępności każda ważna informacja w formie graficznej powinna mieć tekstowy odpowiednik. Sposób realizacji zależy jednak od kontekstu.
Baner promocyjny w sklepie
Baner na stronie głównej: duże hasło „-30% na wszystkie e-booki do niedzieli”, mniejszy dopisek „z kodem CZYTAM30”. Ten obraz jest jedynym miejscem, gdzie pojawia się informacja o promocji.
Trzy podejścia:
alt=”baner z dużym napisem -30% na wszystkie e-booki do niedzieli, z kodem CZYTAM30″ – zawiera wszystko, ale dla osoby słuchającej to tylko długi, jednolity komunikat.
alt=”Promocja: -30% na wszystkie e-booki do niedzieli z kodem CZYTAM30″ – pomija słowo „baner”, skupia się na treści, zachowuje czytelny układ informacji.
alt=”” + osobny tekst obok banera: „Promocja: -30% na wszystkie e-booki do niedzieli z kodem CZYTAM30” – najlepsze rozwiązanie, jeśli masz wpływ na layout. Grafika staje się wtedy dekoracją, a treść promocji istnieje jako normalny tekst.
Z punktu widzenia czytnika ekranu drugi i trzeci wariant są czytelne. Z punktu widzenia całej strony trzeci jest bezpieczniejszy, bo nie opiera istotnej informacji na jednym kanale (obrazie). Alt pozostaje wtedy pusty, a najważniejsze treści trafiają do regularnego HTML-a.
Zrzuty ekranu w instrukcjach
W poradnikach technicznych często pojawiają się screeny z interfejsu aplikacji. Użytkownicy szukają tam potwierdzenia „czy dobrze klikam” albo chcą zobaczyć, jak wygląda dany ekran.
Dwa typowe błędy:
- alt zbyt wizualny: „zrzut ekranu panelu ustawień z wieloma przełącznikami” – ogólny, nie pomaga przejść procesu,
- alt zbyt szczegółowy: długa wyliczanka wszystkich etykiet i przycisków, która powtarza to, co już jest opisane krok po kroku w tekście.
Lepsze podejście opiera się na decyzji: czy obraz jest potwierdzeniem, czy jedynym źródłem informacji.
Jeśli instrukcja brzmi: „Przejdź do Ustawienia > Bezpieczeństwo i włącz opcję Weryfikacja dwuetapowa” i pod spodem jest ekran z zaznaczoną tą opcją, alt może być krótki, funkcjonalny:
alt=”ekran ustawień z podświetloną opcją Weryfikacja dwuetapowa, krok 3 instrukcji”
Użytkownik czytnika nie musi słuchać pełnego opisu interfejsu, bo kluczowe nazwy opcji są już w instrukcji. Screen potwierdza tylko, że jest we właściwym miejscu.
Inaczej, gdy zrzut ekranu pokazuje komunikat błędu, którego treści nie przepisano w tekście. Wtedy alt musi zawierać treść tego komunikatu:
alt=”komunikat błędu: 'Nie udało się zapisać zmian. Spróbuj ponownie za kilka minut'”
Tutaj obraz jest jedynym nośnikiem konkretnej informacji – nie wystarczy powiedzieć „zrzut ekranu z komunikatem błędu”. W alt trzeba przenieść to, co ma znaczenie dla następnych kroków użytkownika.
Memy i treści „kulturowe” – opis żartu, nie layoutu
Memy, komiksy, grafiki z żartem sytuacyjnym sprawiają sporo kłopotów, bo opierają się na wspólnym kontekście i aluzjach. Tu szczególnie widać różnicę między mechanicznie poprawnym alt-em a opisem, który rzeczywiście pomaga.
Przykład: popularny mem z psem w płonącym pokoju („This is fine”)
Potencjalne alt-y:
alt=”pies siedzący przy stole w płonącym pokoju” – opisuje scenę, ale nie ujawnia, że to znany mem używany do komentowania trudnych sytuacji.
alt=”popularny mem 'This is fine’ – pies spokojnie siedzi w płonącym pokoju” – informuje, że to mem i krótko oddaje sens żartu.
Jeśli mem w artykule jest użyty jako metafora, która ma ilustrować sytuację („Tak wygląda ignorowanie błędów w projekcie”), dla osoby korzystającej z czytnika kluczowe jest znaczenie, nie dokładne ułożenie elementów. Czasem wystarczy więc jeszcze prostsza forma:
alt=”mem 'This is fine’ – metafora udawania, że wszystko jest w porządku, kiedy sytuacja się pali”
Na osi „wierność obrazu – dostępność przekazu” lepiej przesunąć się w stronę drugiego bieguna. Osoba widząca częściowo „uzupełni” niedomówienia kulturowymi skojarzeniami. Użytkownik czytnika ekranu nie ma tej szansy, jeśli zostanie z samym suchym opisem scenki.
Podobnie z komiksami wielokadrowymi. Zamiast próbować w alt-ach streszczać każdy kadr osobno, zwykle rozsądniej jest:
- w alt całego obrazka wpisać krótki opis, czym jest grafika („czterokadrowy komiks o komunikacji między programistą a klientem”),
- pod obrazem dodać tekstową wersję dialogu lub krótkie streszczenie żartu.
Taki podział z jednej strony utrzymuje alt w rozsądnej długości, z drugiej – oddaje sens komiksu komuś, kto w ogóle go nie widzi.
Przy memach nawiązujących do konkretnych wydarzeń czy zjawisk (polityka, branżowe inside joke’i) dochodzi jeszcze jedno pytanie: opisywać tylko to, co widać, czy także kontekst? Przy obrazku komentującym głośną awarię serwisu sam opis sceny zwykle nie wystarczy. Dla osoby, która nie widzi grafiki, różnica między „mem nawiązujący do niedawnej awarii systemu płatności X – żart z przeciążonego serwera” a suchym „rysunek przeciążonego serwera” jest zasadnicza. W pierwszym wariancie wiadomo, dlaczego ta grafika w ogóle się tu pojawia i do czego się odnosi.
Kontrast między podejściem „opisuję layout” a „opisuję dowcip” dobrze widać też przy memach tekstowych (np. białe tło, czarny napis). Jeżeli cały żart jest w jednym zdaniu, bez żadnych istotnych elementów wizualnych, alt może po prostu powtórzyć ten tekst lub lekko go doprecyzować. Różnica polega na tym, że zamiast „biały obrazek z czarnym napisem o prokastynacji” lepiej użyć „napis: 'Przełożę to na jutro’, podpis: żart o prokrastynacji”. Tekst żartu jest wtedy tak samo dostępny, jak gdyby był zwykłym akapitem.
Inaczej sprawa wygląda przy grafikach, które są w praktyce „tapetą” pod mema – złożone tło, efektowne zdjęcie, ale prawdziwą treść niesie podpis. Jeśli tło nie wnosi dodatkowego znaczenia (nie jest np. znaną sceną filmową), alt może skupić się prawie wyłącznie na podpisie i funkcji obrazka: „mem z podpisem 'Kiedy deadline był wczoraj’ – żart o spóźnionych projektach”. Wersja, która rozwleka się na szczegóły tła („zdjęcie osoby siedzącej przy biurku, laptop, kubek”), zwykle rozprasza zamiast pomagać.
Ostateczny wybór stylu alt-a przy memach i treściach kulturowych dobrze oprzeć na jednym pytaniu: co straci użytkownik czytnika ekranu, jeśli nie zobaczy tej grafiki? Jeżeli straci gag, aluzję lub kontekst, alt powinien dążyć do oddania sensu żartu i odniesienia, nawet kosztem uproszczenia strony wizualnej. Jeżeli obrazek jest tylko lekką ilustracją do już jasno napisanego akapitu, wystarczy krótkie dopowiedzenie albo nawet pusty alt, jeśli pełne znaczenie jest w tekście obok.
Przy pisaniu alt-ów bardziej opłaca się myśleć jak przewodnik niż jak aparat fotograficzny: mniej katalogowania detali, więcej selekcji i tłumaczenia, po co dany obraz w ogóle się pojawia. Taki filtr – użytkownik, cel, kontekst – pomaga podejmować spójne decyzje niezależnie od tego, czy opisujesz wykres, baner promocyjny, screen z komunikatem błędu czy mema, który wszyscy w zespole znają na pamięć, ale nie wszyscy mogą zobaczyć.
Najważniejsze wnioski
- Alt nie jest rubryką „do odhaczenia” ani polem SEO – to zamiennik informacji z obrazu dla osób, które go nie widzą; bez realnej treści staje się tylko szumem.
- Podstawowe kryterium decyzji brzmi: co użytkownik straci bez obrazu? Jeśli nic istotnego – alt powinien być pusty, jeśli kluczową treść lub funkcję – opis jest krytyczny.
- Grafiki dekoracyjne (tła, zdjęcia „dla klimatu”, ozdobne ikonki) wymagają alt=”” – opisywanie ich wyglądu jedynie rozprasza użytkownika czytnika ekranu.
- Obrazy ilustracyjne, które tylko wspierają treść, dostają krótki, konkretny alt (3–10 słów), natomiast złożone obrazy informacyjne (wykresy, infografiki) potrzebują krótkiego altu plus pełnego opisu w tekście obok.
- Obrazy funkcjonalne (przyciski, ikonki-linki, kontrolki) opisuje się przez ich działanie, nie wygląd – użytkownik ma wiedzieć „co się stanie po kliknięciu”, a nie „jak wygląda ikonka”.
- Kopiowanie nazw plików, upychanie słów kluczowych czy opisy typu „młoda uśmiechnięta kobieta” to typowe antywzorce: są zgodne „na papierze”, ale realnie utrudniają korzystanie ze strony.
- Najprostsza praktyczna procedura: najpierw sprawdź, czy obraz wnosi nową treść; potem, czy jest interaktywny; na końcu oceń, czy bez niego użytkownik z czytnikiem zrozumie stronę – od odpowiedzi zależy, czy alt będzie pusty, krótki, rozbudowany czy przeniesiony do opisu obok.
