1.4.5 Obrazy tekstu

Słowa na stronie powinny być prawdziwym tekstem, a nie obrazkiem tekstu, chyba że użytkownik może zmienić wygląd takiego obrazu albo dokładny wygląd jest istotny, jak w logo.

/ Czego wymaga

Obraz tekstu to tekst zamieniony w piksele, żeby uzyskać określony wygląd: nagłówek zapisany jako PNG w kroju firmowym, baner z ofertą wpisaną w plik JPEG, przycisk zrobiony z obrazka jego etykiety. Prawdziwy tekst da się powiększyć bez rozmycia, przebarwić, rozsunąć wiersze albo złożyć krojem, który ktoś czyta łatwiej, za pomocą ustawień przeglądarki, własnego arkusza stylów albo rozszerzenia do czytania. Tekstu na obrazku nie da się. Kryterium chroni osoby słabowidzące, osoby z trudnościami w śledzeniu wzrokiem, którym potrzebne są inne odstępy lub wyrównanie, i osoby z niepełnosprawnością poznawczą utrudniającą czytanie.

Jeśli używana technologia pozwala osiągnąć dany wygląd, a HTML z CSS prawie zawsze pozwala, informację trzeba przekazać tekstem, a nie jego obrazem. Zostają dwa wyjątki: obraz tekstu można dostosować wizualnie do potrzeb użytkownika, czyli zmienić krój, rozmiar, kolor i tło, albo określony wygląd tekstu jest istotny dla przekazywanej informacji. Logotypy uznaje się za istotne. Tekst na obrazie z wyraźną inną treścią wizualną, takim jak wykres, zrzut ekranu czy schemat, nie jest obrazem tekstu. Obraz jest też dopuszczalny, gdy te same słowa stoją obok jako zwykły tekst, a tę ulgę usuwa kryterium 1.4.9 na poziomie AAA.

/ Jak strony go nie spełniają

Nagłówki sekcji to pliki PNG złożone krojem firmowym, a słowa istnieją tylko w atrybucie alt.
Baner na stronie głównej to jeden plik JPEG, w który wpisano tytuł, ofertę i etykietę przycisku.
Pasek nawigacji albo rząd przycisków używa obrazków z etykietami zamiast tekstu ostylowanego w CSS.
Restauracja albo organizator wydarzenia publikuje menu lub program tylko jako wyeksportowany obraz, bez wersji tekstowej na stronie.
Opinia klienta jest pokazana jako obraz, żeby zachować ozdobny krój pisany, choć czcionka internetowa dałaby ten sam efekt.

/ Jak sprawdzić samodzielnie

Powiększ stronę do 200 procent lub więcej i poszukaj słów, które się rozmywają albo rozpadają na piksele. Tekst, który się pikselizuje, jest obrazem.
Spróbuj zaznaczyć słowa myszą albo naciśnij Ctrl+A. Słów, których nie da się zaznaczyć, nie ma w tekście.
W narzędziach deweloperskich zbadaj każdy podejrzany element: czy to img, background-image w CSS, svg albo canvas, i czy słowa istnieją jako tekst w DOM.
Wyłącz obrazy, na przykład rozszerzeniem Web Developer, i zobacz, które słowa znikają ze strony.
Przy każdym znalezionym obrazie tekstu zdecyduj, czy to logo, próbka kroju albo inny przypadek, w którym dokładny wygląd jest istotny, czy też CSS by wystarczył.

/ Jak to naprawić

Przebuduj nagłówki i banery na tekst HTML ostylowany w CSS, a krój firmowy wczytaj przez @font-face.
Tekst na zdjęciu umieść jako HTML położony nad elementem img albo nad background-image w CSS, zamiast wpisywać go w plik graficzny.
Przyciski i linki z obrazkami zastąp elementami button i a z tekstem, a tła, obramowania i cienie narysuj w CSS.
Gdy obrazu tekstu nie da się uniknąć, na przykład przy wgranym plakacie, opublikuj obok te same słowa jako tekst na stronie.
Logo zostaw jako obraz z nazwą organizacji w atrybucie alt. Logotypy są zwolnione z tego kryterium, ale nie z 1.1.1.

/ Co sprawdza nasz skaner

Żaden test automatyczny w naszym skanie nie obejmuje 1.4.5. Odróżnienie obrazka ze słowami od zdjęcia wymaga, żeby ktoś na niego spojrzał, a HTML_CodeSniffer zgłasza przy tym kryterium tylko ogólne przypomnienie, które skan pomija. Audyt ręczny przegląda każdy obraz, obraz tła i element canvas pod kątem tekstu i ocenia, czy logo albo próbka kroju mieszczą się w wyjątkach.

/ Kto je łamie, według naszych pomiarów

Cotygodniowy indeks nie ma danych dla tego kryterium, bo żaden test uruchamiany przez skan witryny go nie sprawdza. Ocenia je człowiek i do tego służy audyt ręczny.

Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.

/ Pytania o to kryterium

Czy logo może być obrazem tekstu?

Tak. WCAG uznaje logotypy, czyli tekst będący częścią logo lub nazwy marki, za istotne, więc są zwolnione z 1.4.5. Obraz logo nadal potrzebuje tekstu alternatywnego zgodnie z 1.1.1, zwykle nazwy organizacji.

Czy tekst na wykresie, zrzucie ekranu albo infografice to obraz tekstu?

Nie, jeśli obraz zawiera wyraźną inną treść wizualną. Definicja W3C wyłącza wykresy, zrzuty ekranu i schematy, które przekazują informację czymś więcej niż tekstem. Infografika złożona głównie ze zdań na kolorowym tle jest bliżej obrazu tekstu i lepiej zbudować ją w HTML. W każdym przypadku informacja musi być dostępna jako tekst: w atrybucie alt, w podpisie albo w tabeli z danymi.

Na jakim poziomie jest 1.4.5 i czym różni się od 1.4.9?

Obrazy tekstu to poziom AA, więc witryna, która celuje w AA, musi je spełnić. Kryterium dopuszcza obraz tekstu, gdy wygląd jest istotny, gdy użytkownik może go dostosować albo gdy ten sam tekst jest pokazany także jako tekst. 1.4.9 na poziomie AAA jest surowsze: obrazy tekstu wolno stosować tylko jako czystą dekorację albo tam, gdzie wygląd jest istotny.

Zmierz własną stronę Wszystkie zmierzone bariery