1.4.9 Obrazy tekstu (bez wyjątków) - poziom AAA

To kryterium jest bardzo konkretne i w praktyce banuje większość przypadków tekstu na grafice.

O co tu chodzi w praktyce?

Jeśli na stronie wrzucasz baner, plakat, kafelek albo grafikę, na której jest ważna informacja do przeczytania (data, miejsce, zasady, godziny, oferta, komunikat), to na poziomie AAA takie rozwiązanie z założenia jest problematyczne.

W 1.4.5 WCAG dopuszcza więcej wyjątków. Natomiast 1.4.9 jest ostrzejsze: obraz z tekstem ma być tylko dekoracją albo sytuacją, gdzie wygląd tekstu jest naprawdę istotny dla przekazu (logotyp (tekst będący częścią logo lub nazwy własnej produktu) jest uznawany za istotny).

Co najczęściej sprawia, że strona nie spełnia 1.4.9?

Najprościej: wszystko, co jest „informacją w JPG/PNG”, na przykład:

• grafika w aktualności z napisem Zapisy do…, Zmiana terminu…, Ważne…
• plakat wydarzenia jako jedyne miejsce, gdzie są data i godzina
• slajd w sliderze, gdzie cały przekaz jest w tekście na tle zdjęcia
• kafelki na stronie głównej, gdzie tytuł i opis są wklejone jako część grafiki

Jeśli użytkownik musi to przeczytać, żeby zrozumieć stronę albo podjąć decyzję, to to musi być normalny tekst na stronie, a grafika może być co najwyżej dodatkiem.

Kiedy obraz tekstu jest OK przy 1.4.9?

Masz tylko dwa bezpieczne przypadki:

1. Czysta dekoracja, czyli tekst w obrazie niczego nie wnosi i można go pominąć bez utraty informacji.
2. Tekst w obrazie jest istotny dla przekazywanej informacji, np. logotyp lub nazwa własna produktu jako część znaku. W praktyce „istotny” bywa też wtedy, gdy sam wygląd napisu jest elementem przekazu (np. demonstracja kroju pisma), ale to są sytuacje niezwykle rzadkie w zwykłej komunikacji instytucji.

Jak tego nie zepsuć na etapie publikacji

Jeśli tworzysz baner/plik graficzny z komunikatem, zrób prosty test: czy da się przenieść całą treść z grafiki do nagłówka i akapitu na stronie, a grafikę zostawić jako ilustrację? Jeśli tak, to właśnie tak powinno być przy 1.4.9.

Czyli: najpierw tekst w HTML, dopiero potem grafika. Wtedy treść skaluje się, łatwiej utrzymać kontrast i użytkownik może ją przeczytać na swoich ustawieniach.

Pełny tekst kryterium 1.4.9 Obrazy tekstu (bez wyjątków)

Obrazy tekstu są wykorzystywane jedynie w celach czysto dekoracyjnych lub też w przypadkach, gdy taka prezentacja tekstu jest istotna dla przekazywanej informacji. 

Źródło: https://www.w3.org/Translations/WCAG21-pl/#obrazy-tekstu-bez-wyjatkow

Chcesz wiedzieć więcej?

• 1.1.1 Treść nietekstowa - poziom A
• 1.2.1 Tylko audio lub tylko wideo (nagranie) - poziom A
• 1.2.2 Napisy rozszerzone (nagranie) - poziom A
• 1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) - Poziom A
• 1.2.4 Napisy rozszerzone (na żywo) - poziom AA
• 1.2.5 Audiodeskrypcja (nagranie) - poziom AA
• 1.2.6 Język migowy (nagranie) - poziom AAA
• 1.2.7 Rozszerzona audiodeskrypcja (nagranie) - poziom AAA
• 1.2.8 Alternatywa dla mediów (nagranie) - poziom AAA
• 1.2.9 Tylko audio (na żywo) - poziom AAA
• 1.3.1 Informacje i relacje - poziom A
• 1.3.2 Zrozumiała kolejność - poziom A
• 1.3.3 Właściwości zmysłowe - poziom A
• 1.3.4 Orientacja - poziom AA
• 1.3.5 Określenie pożądanej wartości - poziom AA
• 1.3.6 Określenie przeznaczenia - poziom AAA
• 1.4.1 Użycie koloru - poziom A
• 1.4.2 Kontrola odtwarzania dźwięku - poziom A
• 1.4.3 Kontrast (minimalny) - poziom AA
• 1.4.4 Zmiana rozmiaru tekstu - poziom AA
• 1.4.5 Obrazy tekstu - poziom AA
• 1.4.6 Kontrast (wzmocniony) - poziom AAA
• 1.4.7 Niska głośność lub bez dźwięków w tle - poziom AAA
• 1.4.8 Prezentacja wizualna - poziom AAA
• 1.4.9 Obrazy tekstu (bez wyjątków) - poziom AAA
• 1.4.10 Dopasowanie do ekranu - poziom AA
• 1.4.11 Kontrast elementów nietekstowych - poziom AA
• 1.4.12 Odstępy w tekście - poziom AA
• 1.4.13 Treść spod kursora lub fokusu - poziom AA