Czym jest atrybut alt? Opis obrazow dla SEO, dostepnosci i screen readerow | WebMajka

Co to jest atrybut alt — definicja i kontekst

Atrybut alt (od angielskiego alternative text — tekst alternatywny) to wlasciwosc znacznika <img> w HTML, ktora zawiera slowny opis obrazu. Widzimy go w kodzie: <img src="logo.png" alt="Logo firmy WebMajka">. Alt pojawia sie w kilku konkretnych sytuacjach: gdy obraz nie moze sie zaladowac (slaby internet, zlo URL, serwer polegl), gdy strone czyta screen reader dla osoby niewidomej, gdy wyszukiwarka analizuje tresci obrazu dla SEO, gdy uzytkownik przegladarki wylaczyl obrazy dla oszczednosci danych. Mimo ze na pierwszy rzut oka to drobiazg, dobrze napisane alty maja realny wplyw na dostepnosc (accessibility), SEO i user experience. To jeden z tych szczegolow, ktore oddzielaja amatora od profesjonalisty w projektowaniu stron. W calym HTML atrybut alt jest wymagany dla tagu <img> — bez niego dokument nie jest poprawny walidacyjnie.

Dlaczego atrybut alt jest wazny — cztery wymiary

Atrybut alt to jeden z tych elementow, ktore pracuja na wielu poziomach jednoczesnie. Pierwszy wymiar: dostepnosc — osoby niewidome i niedowidzace korzystaja z screen readerow (NVDA, JAWS, VoiceOver), ktore czytaja na glos zawartosc strony; obraz bez alta jest dla nich pustym miejscem. Drugi wymiar: SEO — Google nie widzi obrazu, widzi kod HTML; alt to jeden z glownych sygnalow pozwalajacych wyszukiwarce zrozumiec, co jest na obrazku, i pozycjonowac zdjecia w Google Grafika. Trzeci wymiar: fallback — przy wolnym lub zerwanym polaczeniu zamiast zepsutej ikonki uzytkownik widzi tekst opisujacy obraz. Czwarty wymiar: prawny — w Polsce od 2024 roku obowiazuje Europejski Akt o Dostepnosci, wymagajacy dostepnosci stron dla podmiotow publicznych i duzych firm; brak altow = naruszenie prawa. W sumie alty dzialaja jak cicha infrastruktura UX, niewidoczna dla wiekszosci uzytkownikow, ale krytyczna dla wielu grup.

Jak dziala screen reader — perspektywa uzytkownika niewidomego

Zeby dobrze pisac alty, warto zrozumiec, jak dziala screen reader. Program (NVDA, JAWS, VoiceOver) czyta na glos zawartosc strony, przechodzac sekwencyjnie od gory do dolu. Gdy napotka tag <img>, sprawdza atrybut alt: jesli jest — czyta go, jesli nie — czyta nazwe pliku (logo-final-v3-compressed.jpg) albo sygnalizuje 'obraz bez opisu'. Wyobrazmy sobie uzytkownika czytajacego strone produktu w sklepie e-commerce: widzi 10 zdjec produktu, screen reader mowi 'obraz, obraz, obraz, obraz, logo-firmy.jpg, DSC_01234.jpg, obraz' — to jest torturalne doswiadczenie. Dobre alty tworza plynna narracje: 'koszula meska, kolor niebieski, widok z przodu, widok z boku, detal kolnierza'. Proste zdjecia dekoracyjne powinny miec alt="" — wtedy screen reader je pomija, zamiast czytac niepotrzebne nazwy plikow. Kazdy projektant stron powinien chociaz raz zainstalowac NVDA i przejsc swoja strone z zamknietymi oczami — to zmienia perspektywe na zawsze.

Alt a SEO — co realnie liczy Google

Google od dawna potwierdza, ze atrybut alt jest sygnalem rankingowym dla obrazow — uzywany jest do zrozumienia zawartosci obrazka i pozycjonowania go w Google Grafika oraz w Google Discover. Ale uwaga: alt nie ma bezposrednio gigantycznego wplywu na pozycjonowanie tekstowe calej strony — to drobny sygnal, ktory liczy sie w kontekscie calosciowej jakosci SEO. Kluczowe zasady z perspektywy SEO: slowa kluczowe w alt powinny byc naturalne, pasowac do kontekstu obrazka, nie byc wpychane na sile (to keyword stuffing, za ktory Google karze). Rozsadny alt zawiera glowne slowo kluczowe raz, dodatkowe konteksty, i jest czytelny dla czlowieka. Obrazy z dobrymi altami trafiaja do Google Grafika, ktora generuje darmowy ruch — w niektorych branzach (moda, wnetrza, biżuteria, przepisy kulinarne) to 10-30% calosciowego ruchu SEO. Przy projektowaniu mapy strony internetowej warto wlaczyc tez mape dla obrazow.

Jak pisac dobre alty — konkretne zasady

Zlote zasady, ktore sprawdzaja sie niezaleznie od branzy. Zasada 1: Opisuj tresc i funkcje, nie forme — nie 'niebieski prostokat z tekstem', tylko 'przycisk zapisu zmian'. Zasada 2: Badz konkretny — nie 'wnętrze pokoju', tylko 'nowoczesny salon w odcieniach szarosci z drewniana podloga'. Zasada 3: Nie uzywaj 'zdjecie', 'obraz', 'grafika' na poczatku — screen reader i tak informuje, ze to obraz; dodawanie 'zdjecie...' to duplikacja. Zasada 4: Zachowaj dlugosc 80-150 znakow — zbyt krotkie nie przenosi informacji, zbyt dlugie meczy i wywala komunikaty. Zasada 5: Uwzgledniaj kontekst strony — ten sam obraz laptopa moze miec alt 'laptop Dell XPS 15 widok z przodu' (w sklepie) albo 'uczen programujący w domu' (w artykule o pracy zdalnej). Zasada 6: Nie powielaj podpisu zdjecia — jesli pod zdjeciem jest caption, alt nie powinien byc identyczny. Zasada 7: Uwzgledniaj tekst na obrazie — jesli obraz zawiera czytelny tekst (np. infografika, slogan), zawrzyj go w alcie.

Przyklady dobrych i zlych altow

Najlepiej uczyc sie na przykladach. Ponizsza tabela zestawia typowe sytuacje i pokazuje, jak nie nalezy pisac i jak nalezy.

Widzimy wyraznie: dobre alty to zdanie opisowe, zle to nazwa pliku albo generyczne slowo. Dla sklepu internetowego, gdzie produktow sa setki, warto stworzyc szablon altu: [nazwa produktu] [kolor] [wariant] [rodzaj ujecia] — taki system upraszcza prace calego zespolu. Przy profesjonalnym tworzeniu sklepow internetowych taki standard to absolutna podstawa.

Alt dekoracyjny — kiedy pisac alt=""

Nie kazdy obraz niesie tresc. Obrazy czysto dekoracyjne (tlo sekcji, ozdoba w naglowku, linia separujaca sekcje, ikona obok ikony tekstu ktory juz mowi to samo) powinny miec alt="" — pusty atrybut. Jest to celowa sygnalizacja dla screen readerow: 'pomin ten obraz, nic istotnego tu nie ma'. Klasyczne bledy: brak atrybutu alt w ogole (HTML niepoprawny), albo alt z tekstem alt="dekoracja" (screen reader przeczyta slowo 'dekoracja' — zbedne). Uwaga: obraz powinien byc alt-dekoracyjny tylko jesli tresc jest w pelni przekazana innym elementem strony. Przyklad: ikona koszyka obok napisu 'Koszyk (3)' — ikona moze miec pusty alt, bo napis niesie informacje. Ale ikona koszyka bez napisu — musi miec alt 'Koszyk zakupow', bo inaczej niewidomy uzytkownik nie wie, do czego sluzy przycisk.

Alt w tlach CSS — pulapka dostepnosci

Wielu projektantow umieszcza wazne obrazy jako tla CSS (background-image: url(...)), a nie tagi <img>. W CSS nie ma atrybutu alt — przegladarka i screen reader traktuja takie tlo jako czysto dekoracyjne. To jest ogromny problem, jesli tlem jest obraz niosacy tresc (np. banner z ofertą, zdjecie produktu, cytat na grafice). Zasada: treściowe obrazy ZAWSZE jako <img>, dekoracyjne jako background CSS. Jesli z powodow layoutowych musisz uzyc background dla obrazka tresciowego, dodaj ukryty tekst dla screen readera przez technike aria-label albo ukryty span z klasa .sr-only. Przy nowoczesnym HTML5 coraz wiecej projektow uzywa tagu <picture> z <source> dla responsywnych obrazow — tu tez trzeba ustawic alt w samym <img> wewnatrz picture. Ciekawy temat — obserwujemy, ze podobne pulapki sa z lazy loading obrazow, gdzie niektorzy implementatorzy zapominaja o fallbackach.

Alt a title — roznice i kiedy uzywac ktorego

Czesto myla sie dwa atrybuty: alt i title. Alt — opis dla screen readera i fallback gdy obraz nie laduje. Title — tooltip pokazujacy sie po najechaniu myszka (i czytany przez niektore screen readery, ale nie wszystkie). Roznice: alt jest wymagany dla obrazow, title opcjonalny. Alt widziany w specyficznych sytuacjach, title tylko przy hoverze (nie dziala na mobilnych!). W praktyce: zawsze ustawiamy alt, title tylko gdy niesie dodatkowa, opcjonalna informacje (np. alt 'Koszyk', title 'Masz 3 produkty w koszyku'). Czesty blad: powielanie tego samego tekstu w alt i title — to duplikacja, screen reader przeczyta dwa razy to samo. Jesli nie wiesz, czy potrzebujesz title — prawdopodobnie nie potrzebujesz. Alt wystarczy w 95% przypadkow.

Narzedzia do weryfikacji altow

Jak sprawdzic, czy nasza strona ma dobre alty? WAVE (wave.webaim.org) — najlepsze darmowe narzedzie, po wrzuceniu URL pokazuje liste wszystkich problemow z dostepnoscia, w tym brakujace i podejrzane alty. Lighthouse (wbudowany w Chrome DevTools, zakladka Lighthouse) — audyt dostepnosci, SEO, performance, dziala jednym klikiem. axe DevTools — rozszerzenie Chrome, bardziej szczegolowe niz Lighthouse. Screen reader naprawde — zainstaluj NVDA (darmowy dla Windows) i przejdz swoja strone z zamknietymi oczami; zobaczysz wiele rzeczy, ktorych nie wylapa narzedzie automatyczne. Screaming Frog w trybie SEO audit — skanuje cala strone i generuje raport wszystkich altow (i brakow). Dla wiekszych projektow warto ustawic automatyczne testy dostepnosci w CI/CD (axe-core w pipeline, wyrzuca blad jesli wejdzie commit z obrazkiem bez alta).

Podsumowanie — atrybut alt jako inwestycja

Atrybut alt to drobiazg, ktory dziala na wielu frontach: poprawia dostepnosc (krytyczne dla miliona niewidomych i niedowidzacych Polakow), wzmacnia SEO (zwlaszcza w Google Grafika), daje fallback dla zerwanych obrazow, spelnia wymogi prawa o dostepnosci. Zasady sa proste: opisuj tresc i funkcje, badz konkretny, dlugosc 80-150 znakow, puste alty dla obrazow dekoracyjnych, nie powielaj podpisow. Przy responsywnych stronach WWW z duza iloscia zdjec (e-commerce, portfolio, blog) warto stworzyc standard altow dla zespolu i automatyzowac kontrole w pipeline. W naszej codziennej pracy nad pozycjonowaniem sklepow internetowych alty to jeden z pierwszych punktow audytu technicznego — bo ich brak widac od razu, a ich dobry stan daje zaskakujaco duzo korzysci bez duzego nakladu pracy. Drobny szczegol, wielka roznica.