Tekst alternatywny
Zob. też: alternative text, alt attribute, alt
Tekstowy odpowiednik treści nietekstowej. Czytniki ekranu odczytują tekst alternatywny zamiast obrazu; gdy obraz się nie ładuje, widzą go użytkownicy widzący. Obrazy czysto dekoracyjne otrzymują `alt=""`, a nie brak atrybutu.
Tekst alternatywny — skrót od „alternative text” — to tekstowy opis obrazu nieistniejącego w tekście, osadzony za pomocą atrybutu alt w HTML. To pojedyncza najczęściej omawiana funkcja dostępności w sieci, mająca najbardziej konsekwentny wzorzec niepowodzeń: programiści albo całkowicie go pomijają, albo generują ogólne symbole zastępcze, które niczego nie przekazują.
Co faktycznie robi
Trzy grupy odbiorców korzystają z tekstu alternatywnego:
- Użytkownicy czytników ekranu. Czytnik ekranu ogłasza tekst alternatywny zamiast obrazu. Jeśli obraz przekazuje informacje („wykres pokazuje, że liczba pozwów podwoiła się między 2022 a 2025 rokiem”), ta informacja musi znajdować się w alt lub w sąsiednim podpisie.
- Widzący użytkownicy przy uszkodzonych obrazach. Gdy obraz się nie ładuje, w jego miejscu pojawia się tekst alternatywny — niewielkie, lecz realne zabezpieczenie.
- Wyszukiwarki. Tekst alternatywny to jeden z nielicznych sygnałów ważnych dla pozycjonowania, dotyczący faktycznej zawartości obrazu.
Drzewo decyzyjne
Każdy dostarczany obraz wymaga wyraźnej odpowiedzi na pytanie „jakiego rodzaju jest ten obraz?”:
- Obraz funkcjonalny — ikona używana jako jedyna wskazówka wizualna dla przycisku lub linku. Alt opisuje działanie, nie ikonę:
alt="Otwórz menu", niealt="ikona hamburgera". Użytkownika nie interesuje to, że wygląda jak hamburger; interesuje go, co robi po naciśnięciu. - Obraz informacyjny — zdjęcie, wykres, zrzut ekranu lub ilustracja przekazująca treść. Alt opisuje przekazywaną informację na odpowiednim poziomie szczegółowości. Zdjęcie pracownika na stronie „O nas”: alt = „Dr Anna Kowalska, Dyrektor ds. Badań”. Wykres statystyczny: alt = wniosek, z danymi bazowymi w podpisie lub w pobliskiej tabeli.
- Obraz dekoracyjny — wzory, rozdzielacze, abstrakcyjne zdjęcia używane jako ozdoba tła.
alt=""(pusty, lecz atrybut musi być obecny) informuje czytniki ekranu, aby go pominęły. - Obraz złożony — diagramy, infografiki, gęste wykresy. Krótki alt dla głównego wniosku, plus dłuższy opis w pobliżu (
aria-describedbydo akapitu lub sąsiadujące rozwijalne „Pełny opis”).
Co psuje się w środowisku produkcyjnym
Trzy wzorce błędów odpowiadają za większość usterek tekstu alternatywnego:
- Całkowity brak.
<img src="...">bez żadnego alt. Czytniki ekranu ogłaszają nazwę pliku obrazu, która prawie zawsze jest bezużyteczna. - Nazwa pliku lub śmieci —
alt="DSC_0042.jpg"lubalt="image". Mniej złe niż brak, bardziej mylące niż pomocne. - Nadmierne opisywanie treści dekoracyjnej. Czysto estetyczny rozdzielacz z
alt="Abstrakcyjny pomarańczowo-czerwony ornament na górze sekcji"zmusza czytnik ekranu do jego odczytania i nie daje użytkownikowi nic wartościowego.
Tekst alternatywny generowany przez AI
Większość nowoczesnych potoków przesyłania obrazów automatycznie sugeruje tekst alternatywny za pomocą modelu wizyjnego. To naprawdę pomocne jako pierwszy szkic, lecz dwie przestrogi:
- Model może się mylić z przekonaniem, szczególnie w przypadku wykresów, diagramów i treści specyficznych kulturowo. Przed wdrożeniem ręcznie przejrzyj każdą sugestię.
- Wygenerowany alt nie powinien po cichu nadpisywać istniejącego ręcznie napisanego alt. Wiele produktów nakładkowych (overlay) poważnie zawodzi w tym zakresie — zastępują staranne redakcyjne alt blandowymi, ogólnymi opisami.