W jakim celu stosować tekst alternatywny?
Najważniejszy powód to dostępność i wygoda nawigacji. Dzięki niemu użytkownik dowie się, dokąd prowadzi przycisk z ikoną lub co przedstawia wykres osadzony w artykule. Alt pomaga również porządkować treści w wyszukiwarkach obrazów. Jeśli grafika nie niesie treści (dekoracyjna fala, tło, ozdobnik w nagłówku), najlepszą praktyką jest pusty atrybut alt=””, żeby czytnik ją pominął i nie przerywał czytania nieistotnym opisem.
W altach opisujesz funkcję i znaczenie obrazu, a nie to, że to jest zdjęcie. Kilka przykładów dla rozróżnienia:
- przy wykresie lepiej napisać “Wyniki 2024: wzrost sprzedaży o 18% r/r, najwyżej Q4” niż “Wykres słupkowy”;
- przy ikonie lupy wystarczy “Szukaj”,
- przy obrazku będącym linkiem do porównania planów – “Porównanie planów – przejdź do tabeli”;
- logotyp w stopce możesz opisać np. “Escreo – logo”, ale ten sam znak w nagłówku obok nazwy często lepiej zostawić z alt=””, bo informacja już jest podana tekstem.
Jeśli obraz zawiera dużo danych (np. infografika), alt powinien dać sensowny skrót, a pełen opis zamieść w tekście obok lub pod grafiką. Pisz zwięźle, w języku strony i bez zbędnych wstawek, np. grafika/zdjęcie.
O czym pamiętać przy tekście alternatywnym?
Przede wszystkim atrybut alt dodajesz do znacznika <img>. Jeśli używasz inline SVG, zastosuj role=”img” i aria-label lub tytuł, bo samo alt tam nie zadziała. Obrazy tła w CSS nie mają altów; jeśli tło niesie informację (np. baner z tekstem na obrazie), powinno stać się elementem <img> lub być opisane tekstem w kodzie.
Przy elementach interaktywnych (przyciski, linki) zadbaj, żeby informacja była dostępna także wizualnie, ponieważ alt to wsparcie, nie jedyne miejsce opisu. W serwisach wielojęzycznych alt piszesz w tym samym języku, co reszta danej wersji strony.