WCAG 1.4.9: Obrazy tekstu (bez wyjątków)

Wprowadzenie

Kryterium sukcesu 1.4.9 „Obrazy tekstu (bez wyjątków)” w WCAG 2.1 jest wytyczną na poziomie AAA, która nakłada surowe wymagania dotyczące sposobu prezentacji informacji tekstowych na stronach internetowych i w aplikacjach. Jego głównym celem jest zapewnienie, że treści tekstowe są zawsze przedstawiane w postaci edytowalnego tekstu, a nie jako obrazy zawierające tekst. Oznacza to, że wszelkie informacje, które można by przekazać za pomocą tekstu, powinny być zaimplementowane jako tekst, a nie grafika, bez żadnych wyjątków.

Jest to rozszerzenie i zaostrzenie kryterium WCAG 1.4.5 „Obrazy tekstu” (poziom AA), które dopuszczało pewne wyjątki, takie jak personalizacja czy tekst będący integralną częścią logo lub istotnego dla zrozumienia obrazu. Kryterium 1.4.9 całkowicie eliminuje te wyjątki, stawiając na absolutną elastyczność i dostępność tekstu.

Dlaczego to jest ważne? (Wpływ na dostępność)

Stosowanie obrazów tekstu zamiast prawdziwego tekstu HTML ma szereg negatywnych konsekwencji dla dostępności i użyteczności strony internetowej. Poniżej przedstawiamy kluczowe powody, dla których to kryterium jest tak ważne:

• Dla osób niewidomych i słabowidzących: Czytniki ekranu nie są w stanie odczytać tekstu osadzonego w obrazach w taki sam sposób, jak zwykłego tekstu. Chociaż atrybut alt może dostarczyć tekstową alternatywę, nie pozwala na interakcję z tekstem ani jego elastyczną prezentację. Dla osób słabowidzących, które korzystają z narzędzi do powiększania ekranu, tekst w obrazach staje się często pikselowany i nieczytelny przy dużych powiększeniach.
• Dla osób z dysleksją i zaburzeniami poznawczymi: Wielu użytkowników z dysleksją, ADHD lub innymi zaburzeniami poznawczymi polega na możliwościach dostosowania wyglądu tekstu. Potrzebują oni zmieniać czcionki (np. na czcionki dla dyslektyków), rozmiar, odstępy między literami i wierszami, a także kolory tekstu i tła, aby poprawić czytelność. Obrazy tekstu uniemożliwiają takie modyfikacje.
• Dla użytkowników urządzeń mobilnych: Na małych ekranach urządzeń mobilnych obrazy tekstu często nie skalują się poprawnie lub stają się zbyt małe, aby można je było wygodnie odczytać, co prowadzi do konieczności uciążliwego powiększania i przewijania. Prawdziwy tekst automatycznie dostosowuje się do rozmiaru ekranu (responsywność).
• SEO i wydajność: Wyszukiwarki nie potrafią indeksować tekstu osadzonego w obrazach, co negatywnie wpływa na optymalizację strony pod kątem wyszukiwarek (SEO) i jej widoczność. Ponadto, pliki graficzne są zazwyczaj większe niż czysty tekst HTML z CSS, co może spowolnić ładowanie strony i zwiększyć zużycie danych, szczególnie dla użytkowników z wolniejszym połączeniem internetowym.
• Łatwość utrzymania: Zmiana tekstu osadzonego w obrazie wymaga edycji grafiki, co jest czasochłonne i może wymagać interwencji grafika. Zmiana zwykłego tekstu HTML jest znacznie prostsza i szybsza.

Kryterium sukcesu 1.4.9: Obrazy tekstu (bez wyjątków) (Poziom AAA)

Oficjalne sformułowanie kryterium sukcesu 1.4.9 „Obrazy tekstu (bez wyjątków)” z WCAG 2.1 brzmi:

Tekst Obrazu (bez wyjątków): Jeśli technologia internetowa może osiągnąć efekt wizualny, tekst jest używany do przekazywania informacji, a nie obrazy tekstu. (Poziom AAA)

Kluczowe w tym kryterium jest wyrażenie „bez wyjątków”. W przeciwieństwie do kryterium WCAG 1.4.5 (poziom AA), które dopuszczało wyjątki dla tekstu, który jest częścią logo lub jest „niezbędny” (tj. kiedy konkretna prezentacja tekstu jest istotna dla przekazywanej informacji i nie może być zmieniona bez utraty informacji), kryterium 1.4.9 nie zezwala na żadne z tych wyjątków. Oznacza to, że wszelkie wizualnie stylizowane napisy, nagłówki, przyciski czy inne elementy, które zawierają tekst, muszą być zaimplementowane jako edytowalny tekst HTML i stylizowane za pomocą CSS.

Praktyczne wytyczne dotyczące zgodności

Aby zapewnić zgodność z kryterium 1.4.9, należy przestrzegać następujących wytycznych:

• Preferuj tekst HTML: Zawsze używaj elementów HTML (np. <h1>–<h6>, <p>, <span>, <a>, <button>) do wyświetlania wszelkich informacji tekstowych. Dotyczy to zarówno treści głównej, jak i nagłówków, etykiet, elementów nawigacyjnych, przycisków, infografik z tekstem itd.
• Stylizuj za pomocą CSS: Wizualny wygląd tekstu (takie jak czcionka, rozmiar, kolor, waga, cienie, tło) powinien być kontrolowany wyłącznie za pomocą kaskadowych arkuszy stylów (CSS). Wykorzystuj web fonty, aby osiągnąć pożądany efekt estetyczny, zachowując jednocześnie elastyczność tekstu.
• Używaj SVG dla grafiki (z rozwagą): Jeśli musisz użyć grafiki wektorowej (SVG) dla bardziej złożonych elementów wizualnych, upewnij się, że wszelki tekst wewnątrz SVG jest renderowany jako rzeczywisty tekst (np. za pomocą elementu <text> w SVG), a nie jako kształt graficzny. To pozwoli na jego skalowanie i dostępność. Pamiętaj jednak, że dla prostych napisów zawsze preferowany jest czysty HTML i CSS.
• Zrezygnuj z tekstów osadzonych w bitmapach: Unikaj tworzenia obrazów (JPEG, PNG, GIF), które zawierają tekst jako integralną część grafiki, jeśli ten tekst ma przekazywać informację. Nawet jeśli obraz ma odpowiedni tekst alternatywny (alt), nie spełnia to wymogów 1.4.9, ponieważ sam tekst nie jest edytowalny ani elastyczny.

Przykłady implementacji

Poniżej przedstawiono przykłady prawidłowych i nieprawidłowych implementacji w kontekście kryterium 1.4.9:

Przykład nieprawidłowy:

Użycie obrazu dla nagłówka lub przycisku, nawet z poprawnym tekstem alternatywnym, jest niezgodne z kryterium 1.4.9.

<!-- Nieprawidłowy nagłówek -->
<img src="./naglowek_nasze_uslugi.png" alt="Nasze Usługi">

<!-- Nieprawidłowy przycisk -->
<a href="#">
    <img src="./przycisk_wiecej_informacji.png" alt="Więcej informacji">
</a>

<!-- Tekst w tle graficznym (tekst jest częścią obrazu tła) -->
<div style="background-image: url('./promo_tlo_z_tekstem.jpg'); height: 150px; display: flex; align-items: center; justify-content: center;">
    <!-- Tekst 'Promocja! Oszczędź 20%' jest tu niewidoczny dla czytników ekranu i niemożliwy do dostosowania -->
    <p style="color: transparent;">Promocja! Oszczędź 20%</p>
</div>
            
Skopiuj tekst

Przykład prawidłowy:

Implementacja treści jako prawdziwego tekstu HTML, stylizowanego za pomocą CSS, jest zgodna z kryterium 1.4.9.

<!-- Prawidłowy nagłówek -->
<h1 style="
    font-family: 'Open Sans', sans-serif;
    font-size: 3em;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    margin-bottom: 20px;
">Nasze Usługi</h1>

<!-- Prawidłowy przycisk -->
<button style="
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
" onclick="alert('Kliknięto!');">Więcej informacji</button>

<!-- Tekst z tłem graficznym (tekst oddzielony od obrazu) -->
<div style="
    background-image: url('./promo_tlo_bez_tekstu.jpg');
    background-size: cover;
    padding: 30px;
    color: white;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
">
    <p style="
        font-size: 1.5em;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        margin: 0;
    ">Promocja! Oszczędź 20%</p>
</div>
            
Skopiuj tekst

Najlepsze praktyki i często popełniane błędy

Najlepsze praktyki:

• Projektowanie z myślą o tekście: Już na etapie projektowania interfejsu użytkownika (UI) należy zakładać, że wszystkie informacje tekstowe będą renderowane jako prawdziwy tekst. Unikaj tworzenia makiet, które bazują na grafikach z osadzonym tekstem.
• Wykorzystanie web fontów: Używaj niestandardowych czcionek (web fontów) zaimportowanych przez CSS (np. Google Fonts), aby osiągnąć pożądany styl typograficzny, jednocześnie zachowując dostępność.
• Testowanie na różnych urządzeniach i z różnymi ustawieniami: Sprawdzaj, jak teksty zachowują się przy różnych rozmiarach ekranu, w różnych przeglądarkach, a także po zmianie domyślnych ustawień czcionek lub powiększenia przez użytkownika.
• Współpraca z projektantami: Edukuj projektantów graficznych na temat wymagań dostępności, aby uniknąć tworzenia projektów, które trudno zaimplementować w sposób zgodny z WCAG 1.4.9.

Często popełniane błędy:

• Niewłaściwe rozumienie „bez wyjątków”: Najczęstszym błędem jest założenie, że „tekst w logo” lub „tekst niezbędny” jest wyjątkiem, jak w przypadku kryterium WCAG 1.4.5 (AA). W przypadku 1.4.9 (AAA) takie wyjątki nie istnieją. Logo zawierające tekst powinno być traktowane jako obraz, a jego tekstowa treść (jeśli jest informacyjna) powinna być również dostępna jako rzeczywisty tekst (np. w tytule strony, tekście nagłówka lub w atrybucie alt). Ważne jest, aby zrozumieć, że nawet w logo, jeśli głównym celem jest przekazanie słów, powinniśmy unikać obrazów tekstu.
• Złożone tła z tekstem: Osadzanie tekstu w złożonych obrazach tła, np. na plakatach promocyjnych, infografikach, czy banerach, które są traktowane jako pojedyncze pliki graficzne. Taki tekst staje się niedostępny. Zamiast tego, tło powinno być oddzielnym obrazem, a tekst nałożony na nie za pomocą HTML i CSS.
• Ignorowanie mikrotekstu: Nawet małe fragmenty tekstu, takie jak daty, podpisy, czy numeracje stron, jeśli są renderowane jako obrazy, naruszają to kryterium.
• Używanie grafik do przycisków lub elementów nawigacji: Choć może to być kuszące dla estetyki, tworzenie przycisków, zakładek czy elementów menu jako obrazów z tekstem jest niezgodne. Zamiast tego, należy stylizować elementy <button> lub <a> za pomocą CSS, aby osiągnąć pożądany wygląd.