Czym technicznie jest atrybut alt

Alt to atrybut znacznika obrazka, w kodzie HTML zapisywanego jako img. Umieszcza się w nim tekst alternatywny, czyli treść, która ma zastąpić obrazek wtedy, gdy obrazek nie jest dostępny albo nie jest widziany. Specyfikacja HTML traktuje go jako atrybut wymagany dla obrazków niosących treść. Nie jest opcjonalnym dodatkiem, choć przeglądarka nie zgłosi błędu, gdy go zabraknie.

Trzy sytuacje, w których ten tekst wchodzi do gry:

• plik się nie wczytał — zły adres, błąd serwera, zablokowany zewnętrzny host. Przeglądarka wyświetla wtedy w miejscu grafiki treść atrybutu alt;

• użytkownik korzysta z czytnika ekranu — program odczytuje opis na głos, bo nie ma czego pokazać;

• obrazki są celowo wyłączone albo połączenie jest tak słabe, że nie zdążyły się pobrać.

Warto od razu zaznaczyć, czego alt nie dotyczy. Grafiki wstawiane w CSS jako tło, przez własność background z adresem pliku, nie mają tego atrybutu w ogóle, bo nie są znacznikiem obrazka. To częsty problem na stronach, gdzie zdjęcia produktowe albo nagłówkowe wrzucono jako tła — dla czytnika ekranu i dla wyszukiwarki takich obrazków po prostu nie ma. Jeśli grafika jest treścią, powinna być wstawiona jako obrazek w HTML-u, nie jako tło w arkuszu stylów.

Alt to najpierw dostępność, potem SEO

Kolejność jest tu odwrotna niż w większości poradników. Tekst alternatywny powstał dla ludzi i to jest jego główny sens.

Osoba niewidoma czy słabowidząca poruszająca się po stronie z czytnikiem ekranu dostaje serwis jako liniowy strumień treści. Nagłówki, akapity, linki, listy — i obrazki, o których czytnik może powiedzieć wyłącznie to, co znalazł w alt. Gdy atrybutu nie ma, część programów odczytuje nazwę pliku, co przy „dsc-4471-kopia-2.jpg” brzmi dokładnie tak żałośnie, jak wygląda. Gdy alt jest wypchany frazami, użytkownik wysłuchuje ciągu haseł, z których nie wynika nic.

Standardem, do którego się w tej sprawie odwołuję, jest WCAG. Wytyczne w wersji 2.1 obowiązują od 2018 roku, a kryterium sukcesu 1.1.1 dotyczące treści nietekstowych jest na najniższym, podstawowym poziomie A — czyli to absolutne minimum, nie ambitny cel. W Polsce dla podmiotów publicznych wymóg zgodności z WCAG na poziomie AA wynika z ustawy o dostępności cyfrowej z 2019 roku, więc urzędy, szkoły i szpitale mają to jako obowiązek prawny, a nie dobrą praktykę.

Firmy prywatne obowiązku w tej formie na razie nie mają, ale unijna dyrektywa o wymogach dostępności produktów i usług, przyjęta w 2019 roku, przewiduje stosowanie przepisów od 28 czerwca 2025 roku i obejmie m.in. handel elektroniczny. Zostały niecałe trzy lata i mam wrażenie, że mało kto w branży e-commerce w ogóle o tym słyszał. Warto porządkować opisy alternatywne teraz, przy okazji normalnej pracy nad stroną, a nie w pośpiechu przed terminem.

Co Google robi z tekstem alternatywnym

Google wykorzystuje alt do zrozumienia, co jest na obrazku, i traktuje go jako jeden z sygnałów przy dopasowywaniu grafiki do zapytania w wyszukiwarce obrazów. Robot nie ma oczu w naszym rozumieniu — analiza wizualna oczywiście istnieje i Google jej używa, ale opis tekstowy razem z otoczeniem obrazka na stronie nadal jest najprostszym i najpewniejszym źródłem informacji o temacie zdjęcia.

Drugi, mniej oczywisty efekt: alt jest tekstem, który liczy się w kontekście linku. Jeśli obrazek jest jednocześnie odsyłaczem — a tak wygląda większość kafelków produktowych i banerów — to jego opis alternatywny pełni rolę anchor textu. Obrazek-link bez alt to link bez treści. Widzę takie sytuacje na większości sklepów, które przejmuję: całe listingi kategorii linkują do produktów wyłącznie przez grafikę i przez pustą nazwę.

Trzeba za to od razu ostudzić oczekiwania. Uzupełnienie opisów alternatywnych na kilkuset zdjęciach nie jest dźwignią, która podniesie widoczność strony w klasycznych wynikach. To praca porządkowa: naprawia dostępność, poprawia szanse w wyszukiwarce grafiki i domyka linkowanie wewnętrzne przez obrazki. Traktowanie alt jak głównego pola do optymalizacji jest nieporozumieniem — a upychanie w nim fraz Google od dawna nazywa wprost zachowaniem spamerskim i jednym ze sposobów manipulowania wynikami.

Jak napisać opis, który ma sens

Mam na to jeden test: zamknij oczy, wyobraź sobie, że ktoś czyta Ci ten tekst na głos, i sprawdź, czy wiesz, co jest na obrazku. Jeśli tak — opis jest dobry.

Kilka zasad, które stosuję u siebie:

• Opisuj to, co widać, w naturalnym języku. Zdanie albo część zdania, bez przecinków rozdzielających frazy. „Czarny fotel biurowy z siatkowym oparciem, widok z boku” mówi więcej niż „fotel biurowy, fotel obrotowy, fotel do biurka”.

• Uwzględnij kontekst, w jakim obrazek stoi. Ten sam wykres na stronie o wynikach kampanii i w artykule metodologicznym wymaga innego opisu — raz istotny jest trend, raz sposób prezentacji danych.

• Nie zaczynaj od „zdjęcie” ani „obrazek”. Czytnik ekranu sam informuje, że to grafika, więc powtarzasz komunikat, który użytkownik już usłyszał.

• Nie duplikuj tekstu, który stoi obok. Jeśli pod zdjęciem jest podpis mówiący to samo, użytkownik czytnika wysłucha tej treści dwa razy.

• Zmieść się w jednym zdaniu. Twardego limitu znaków nikt nie ogłosił, ale część czytników ekranu ucina bardzo długie ciągi, a i tak nikt nie chce słuchać akapitu o zdjęciu.

• Jeśli obrazek zawiera tekst, przenieś ten tekst do opisu. Grafika z hasłem promocyjnym albo infografika z liczbami bez tego jest dla czytnika ekranu pusta.

Fraza kluczowa może się w alt znaleźć — pod jednym warunkiem: że pojawia się tam naturalnie, bo faktycznie opisuje zawartość zdjęcia. To zupełnie inna sytuacja niż dopisywanie jej na siłę do każdego pliku w galerii.

Kiedy poprawną odpowiedzią jest pusty alt

To fragment, który zaskakuje najwięcej osób. Nie każdy obrazek powinien mieć opis. Grafiki czysto dekoracyjne — separatory, ozdobne kształty w tle sekcji, ikonka obok napisu, który mówi to samo — powinny mieć atrybut alt wpisany, ale z pustą wartością, czyli alt=””.

Różnica między brakiem atrybutu a pustym atrybutem jest istotna. Brak atrybutu to dla czytnika ekranu sygnał „nie wiem, co to jest” i program próbuje coś powiedzieć, zwykle czytając nazwę pliku. Pusty alt to jednoznaczna informacja „ten obrazek nie niesie treści, pomiń go” — i czytnik go pomija. Pierwsze to zaniedbanie, drugie to decyzja.

Praktycznie stosuję to tak: przy ikonce w przycisku z widocznym napisem „Dodaj do koszyka” ikona dostaje pusty alt, bo jej opis tylko dublowałby treść przycisku. Ale przy przycisku, na którym jest wyłącznie ikona lupy, opis alternatywny musi opisywać funkcję, a nie kształt — „Szukaj”, nie „ikona lupy”.

Alt, title, nazwa pliku i podpis

Te cztery rzeczy mieszają się w panelach CMS-ów i warto je rozdzielić.

Atrybut title na obrazku wyświetla się jako dymek po najechaniu kursorem. Nie zastępuje atrybutu alt, nie jest dostępny na urządzeniach dotykowych, a czytniki ekranu obsługują go niekonsekwentnie. W praktyce zostawiam go pustym. W WordPressie osobnym polem jest też podpis, który renderuje się pod zdjęciem jako widoczny tekst — to zupełnie inna rola: widzą go wszyscy, więc nie jest alternatywą dla nikogo.

Nazwa pliku ma znaczenie — „fotel-biurowy-siatkowy.jpg” jest dla wyszukiwarki bardziej użyteczna niż „IMG_2841.jpg” — ale nie zwalnia z uzupełnienia alt. To dwa niezależne sygnały i tylko jeden z nich jest w ogóle dostępny dla użytkownika czytnika ekranu.

Osobna pułapka WordPressa: przy wgrywaniu pliku system wypełnia pole tytułu na podstawie nazwy pliku, a pole tekstu alternatywnego pozostawia puste. Wystarczy, że ktoś raz tego nie sprawdzi, i biblioteka mediów po roku pracy ma tysiąc obrazków bez opisów, a redaktorzy są przekonani, że „przecież tytuł jest wpisany”.

Jak to wyłapać na istniejącej stronie

Nie ma sensu przeglądać wszystkiego ręcznie. Kolejność, którą stosuję przy audycie:

• Crawler. Screaming Frog albo dowolne inne narzędzie przechodzące serwis ma raport obrazków bez tekstu alternatywnego oraz z opisem bardzo długim. To daje listę do pracy w kilka minut.

• Lighthouse albo audyt dostępności w przeglądarce. Sprawdza pojedynczy adres, ale pokazuje problem w kontekście konkretnego elementu, więc łatwiej zdecydować, czy obrazek jest treścią, czy dekoracją.

• Search Console. W raporcie skuteczności przefiltruj wyniki po typie wyszukiwania „Grafika” i sprawdź, czy Twoje zdjęcia w ogóle generują ruch. Jeśli sklep ma własne zdjęcia produktowe, a wyszukiwarka grafiki nie przynosi nic, to sygnał, że warto się tym zająć.

• Szablon, nie tylko treść. Najwięcej powtarzalnych braków siedzi w kodzie motywu: kafelki listingu, logo, ikony w stopce, miniatury powiązanych wpisów. Poprawka w jednym pliku szablonu naprawia setki adresów naraz, więc od tego zaczynam.

Na koniec rzecz organizacyjna, która decyduje o tym, czy praca ma trwały efekt. Uzupełnienie zaległości to jednorazowa akcja, a problem wraca z każdym nowym wpisem i każdym nowym produktem. Dlatego przy porządkowaniu opisów alternatywnych zawsze proszę o dopisanie jednego punktu do procedury dodawania treści: pole tekstu alternatywnego wypełnia się przy wgrywaniu pliku, a nie „kiedyś potem”. Bez tego za rok siedzimy w tym samym miejscu.