Tekst alternatywny to opis obrazu odczytywany przez czytniki ekranu i wyświetlany w razie braku grafiki.
Rola atrybutu alt w strukturze obrazu HTML
Tekst alternatywny jest wartością atrybutu alt elementu <img> w języku HTML. Przykładowy zapis ma postać <img src="/laptop.jpg" alt="Laptop z otwartą obudową podczas czyszczenia układu chłodzenia">. Atrybut opisuje funkcję albo treść obrazu w formie tekstowej, dzięki czemu informacja nie jest uzależniona wyłącznie od percepcji wzrokowej. Przeglądarka może użyć tego tekstu, gdy plik graficzny nie zostanie pobrany, ścieżka będzie nieprawidłowa albo obraz zostanie zablokowany.
Tekst z alt jest także przekazywany do drzewa dostępności, z którego korzystają technologie asystujące, między innymi czytniki ekranu. Czytnik może odczytać nazwę elementu i jego opis w kolejności wynikającej ze struktury dokumentu. Sam atrybut nie zmienia wyglądu grafiki, rozmiaru pliku ani sposobu kompresji obrazu. Jest metadanymi opisującymi znaczenie elementu dla użytkownika i dla mechanizmów obsługujących dostępność strony.
Jak opisywać treść i funkcję grafiki
Opis powinien przekazywać konkretną informację potrzebną do zrozumienia bieżącego fragmentu strony. Dla fotografii przedstawiającej uszkodzony ekran właściwy będzie opis „Pęknięta matryca laptopa z widocznymi pionowymi pasami”, jeżeli właśnie ta cecha ma znaczenie. Nie trzeba wymieniać wszystkich szczegółów kadru, takich jak kolor ściany lub położenie biurka, jeśli nie wpływają one na sens artykułu. Tekst alternatywny nie powinien zaczynać się od słów „obraz przedstawiający” albo „zdjęcie”, ponieważ czytnik ekranu zwykle sam komunikuje, że napotkał grafikę.
Obraz będący odnośnikiem powinien otrzymać opis wskazujący działanie, a nie tylko wygląd. Dla ikony lupy prowadzącej do wyszukiwarki bardziej użyteczne będzie alt="Wyszukaj" niż alt="Lupa". Podobnie logo użyte jako link do strony głównej może mieć tekst określający cel odnośnika. Jeżeli obok obrazu znajduje się już identyczny tekst opisujący tę samą informację, powtórzenie go w atrybucie alt powoduje zbędne odczytanie treści. W takiej sytuacji obraz może mieć pusty atrybut alt="", o ile pełny opis pozostaje dostępny w tekście strony.
Grafiki dekoracyjne, złożone i niedostępne pliki
Grafiki czysto dekoracyjne, które nie dodają informacji do dokumentu, powinny mieć pusty atrybut alt="". Pusty atrybut oznacza coś innego niż całkowity brak atrybutu: sygnalizuje, że obraz został świadomie pominięty w odczycie treści. Brak alt może spowodować, że czytnik ekranu odczyta nazwę pliku, adres URL albo ogólną informację o nieopisanym obrazie. Dotyczy to między innymi ozdobnych separatorów, tła zapisanych jako elementy obrazu oraz ikon powielających tekst znajdujący się obok.
Wykres, schemat lub zrzut ekranu może wymagać krótkiego tekstu alternatywnego oraz dodatkowego opisu w treści strony. W alt warto wtedy podać najważniejszy wniosek, na przykład „Wykres pokazuje wzrost temperatury procesora po wyłączeniu wentylatora”, a wartości osi, legendę i pełne zależności umieścić w sąsiednim akapicie albo tabeli. Atrybut alt nie jest przeznaczony do przechowywania długich instrukcji, podpisów fotograficznych ani słów kluczowych. Powinien być zwięzły, zgodny z kontekstem i zakończony w sposób pozwalający zrozumieć, co użytkownik traci po pominięciu obrazu.
Sprawdzanie opisów na stronie serwisowej
Kontrolę tekstów alternatywnych można rozpocząć od inspekcji kodu HTML i wyszukania wszystkich elementów <img>. Trzeba sprawdzić, czy każdy obraz ma atrybut alt, czy opis odpowiada funkcji grafiki oraz czy elementy dekoracyjne mają wartość pustą. Warto również wyłączyć pobieranie obrazów w przeglądarce albo otworzyć stronę z nieistniejącym adresem pliku, aby zweryfikować, czy tekst zastępczy nadal przekazuje potrzebną informację. Sam automatyczny audyt wykrywa brak atrybutu, ale nie ocenia poprawnie jego znaczenia w konkretnym kontekście.
Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i podzespołów, dlatego przy dokumentowaniu czynności serwisowych na stronie warto opisywać fotografie zgodnie z ich rzeczywistą treścią. Przydatne są opisy wskazujące model czynności, widoczny element lub objaw usterki, na przykład „Wentylator laptopa pokryty warstwą kurzu przed czyszczeniem”. Tak przygotowany alt pomaga zrozumieć materiał osobom korzystającym z czytnika ekranu, a po awarii ładowania grafiki pozostawia w dokumencie podstawową informację techniczną.
