WCAG 1.4.5 Obrazy tekstu

Kryterium sukcesu 1.4.5 zapewnia, że tekst mogą dostosować osoby, które go czytają. Prawdziwy tekst można powiększyć bez rozmycia, przekolorować w ustawieniach wysokiego kontrastu, rozstrzelić, odczytać na głos i przetłumaczyć. Tekstu wtopionego w obraz — nie. To poziom AA i część normy EN 301 549 (punkt 9.1.4.5).

Czego wymaga kryterium

Jeśli stosowane technologie pozwalają uzyskać daną prezentację wizualną, do przekazywania informacji należy używać tekstu, a nie obrazów tekstu.

Wyjątki:

• Możliwość dostosowania: obraz tekstu można wizualnie dostosować do potrzeb użytkownika (czcionka, rozmiar, kolor, tło);
• Niezbędność: określona prezentacja tekstu jest niezbędna dla przekazywanej informacji — np. próbka czcionki lub dokument historyczny.

Logotypy (tekst będący częścią logo lub nazwy marki) uznaje się za niezbędne.

Dzięki współczesnym fontom internetowym i CSS niemal każdy efekt typograficzny można uzyskać prawdziwym tekstem, więc wyjątki są wąskie.

Typowe błędy w sklepie internetowym

• banery główne i promocyjne, w których oferta, daty i warunki są częścią pliku JPG;
• kafelki kategorii z nazwą kategorii na obrazku;
• tabele rozmiarów, listy składników lub instrukcje pielęgnacji wgrane jako obrazy;
• „Darmowa dostawa od 50 €” lub komunikaty budujące zaufanie w formie pasków graficznych;
• przyciski zrobione z obrazów zawierających etykietę.

Jak to sprawdzić

Automatycznie: w naszym skanerze żadna reguła automatyczna nie odpowiada temu kryterium. Narzędzie nie potrafi wiarygodnie stwierdzić, czy obraz zawiera tekst. Potrzebna jest ręczna kontrola. Nasz skaner zgłasza natomiast obrazy bez tekstu alternatywnego w ramach 1.1.1, co często wskazuje te same banery.

Ręcznie: powiększyć stronę do 200–400 %: tekst na obrazach staje się rozmyty. Spróbować zaznaczyć tekst myszą: jeśli się nie da, to prawdopodobnie obraz. Przejść przez stronę główną, strony kategorii i produktów oraz strony docelowe newslettera i spisać każdy obraz zawierający słowa. Dla każdego zdecydować, czy prawdziwy tekst dałby ten sam wygląd.

Jak to naprawić

• Budować banery jako obraz tła z warstwą tekstu HTML na wierzchu; większość motywów sklepów ma do tego sekcję „pokaz slajdów” lub „obraz z tekstem”.
• Publikować tabele rozmiarów i składniki jako tabele lub listy HTML.
• Do nietypowej typografii używać fontów internetowych zamiast obrazów.
• Tekst na obrazach zostawiać tylko w logotypach i naprawdę niezbędnych przypadkach i nadawać im tekst alternatywny.

Powiązane kryteria

• 1.1.1 Treść nietekstowa — tekst alternatywny dla obrazów.
• 1.4.3 Kontrast (minimum) — dotyczy także obrazów tekstu.
• 1.4.4 Zmiana rozmiaru tekstu — tekst musi dać się powiększyć do 200 %.

Najczęstsze pytania

Czy logotypy z tekstem są dozwolone?

Tak. Logotypy — tekst będący częścią logo lub nazwy marki — uznaje się za niezbędne i są zwolnione. Nadal potrzebują tekstu alternatywnego zgodnie z 1.1.1.

Czy tekst alternatywny wystarczy dla banera z tekstem?

Tekst alternatywny spełnia 1.1.1, ale nie 1.4.5. Jeśli ten sam wygląd można uzyskać tekstem HTML i CSS, tekst powinien być prawdziwym tekstem, by użytkownicy mogli go powiększać, zmieniać jego kolory i tłumaczyć.

Czy zdjęcia produktów z nadrukowanym tekstem to problem?

Nie. WCAG nie uznaje za obraz tekstu tekstu, który jest częścią zdjęcia z inną istotną treścią wizualną, np. etykiety na zdjęciu produktu. Ważne szczegóły i tak powinny znaleźć się w opisie produktu.