Jak pisać dobre teksty alternatywne do obrazów

Do czego służy tekst alternatywny

Tekst alternatywny to tekstowy odpowiednik obrazu, wpisany w atrybut alt. Czytniki ekranu czytają go na głos, linijki brajlowskie go wyświetlają, a przeglądarka pokazuje go, gdy obraz się nie załaduje. Mogą z niego korzystać także wyszukiwarki. Standard dostępności stron, WCAG, wymaga tekstowego odpowiednika, który pełni tę samą rolę co obraz (kryterium sukcesu 1.1.1, poziom A).

Sedno: tekst alternatywny nie jest podpisem ani opisem obrazu dla samego opisu. Mówi, co obraz wnosi do strony. To samo zdjęcie może wymagać na dwóch stronach różnych tekstów alternatywnych albo żadnego.

Cztery rodzaje obrazów

• Obrazy informacyjne wnoszą treść: zdjęcie, ikona obok numeru telefonu, wykres. Napisz krótki tekst alternatywny, który oddaje to znaczenie.
• Obrazy funkcjonalne są w linkach i przyciskach. Tekst alternatywny nazywa działanie lub cel, a nie wygląd: „Szukaj” dla lupy, „Drukuj stronę” dla ikony drukarki.
• Obrazy dekoracyjne nic nie wnoszą: ramka, wypełniacz, ozdoba albo obraz, który tylko powtarza sąsiedni tekst. Daj im pusty atrybut alt (alt=""), żeby czytniki ekranu je pomijały, albo umieść je w arkuszu stylów jako tło.
• Obrazy z tekstem to ostateczność. Jeśli ich potrzebujesz, tekst alternatywny powtarza słowa z obrazu. Logo bez linku dostaje nazwę organizacji.

Jak napisać dobry tekst alternatywny

1. 1Zapytaj, po co ten obraz jest na stronie. Czego zabrakłoby odwiedzającym, gdyby go nie było?
2. 2Napisz to, co ważne dla tego celu, jednym wyrażeniem albo jednym zdaniem.
3. 3Zacznij od treści. Czytnik ekranu zwykle sam zapowiada, że to obraz, więc „obraz przedstawiający” czy „zdjęcie” rzadko pomagają.
4. 4Nie powtarzaj tego, co mówi tekst obok obrazu. Jeśli mówi wszystko, obraz jest dekoracyjny i dostaje pusty alt.
5. 5Przeczytaj tekst na głos, nie patrząc na stronę. Czy sam w sobie ma sens?

Typowe błędy

• Brak atrybutu alt. Niektóre czytniki ekranu czytają wtedy nazwę pliku.
• Nazwa pliku albo kod jako tekst alternatywny, na przykład „IMG_2041.jpg”.
• Ten sam ciąg słów kluczowych przy wielu obrazach. Teksty alternatywne są przede wszystkim dla ludzi.
• Długi opis obrazu, który jest wyłącznie ozdobą.
• Opis wyglądu przycisku zamiast jego działania. Przycisk wyszukiwania to nie „lupa”, tylko „Szukaj”.

Jak długi może być tekst alternatywny

WCAG 1.1.1 nie podaje liczby znaków. Rada W3C: pisz krótko, najlepiej jednym wyrażeniem albo zdaniem. W przypadku wykresów i innych złożonych obrazów pełne informacje podaj jako tekst na stronie, a tekst alternatywny zostaw krótki. Jeśli potrzebujesz więcej niż zdania, obraz prawdopodobnie niesie treść, która powinna być w tekście strony.

Sprawdź swoją stronę

Obrazy bez dobrego tekstu alternatywnego znajdziesz darmowym sprawdzaniem tekstów alternatywnych dla jednej strony. Propozycje dla wielu obrazów przygotuje narzędzie Teksty alternatywne. Automatyczna propozycja może pominąć to, co jest ważne na twojej stronie, dlatego przeczytaj każdy tekst i popraw go, jeśli nie pasuje do celu obrazu.

Narzędzia Do4U pomagają w pisaniu, nie w decydowaniu: to, czy obraz jest informacyjny, funkcjonalny czy dekoracyjny, wiesz najlepiej ty. Sprawdź stronę jeszcze raz po większych zmianach.