Wróć do wszystkich kryteriów

1.4.5 Obrazy tekstu (ang.) Images of Text

Specjalizacje:

  • Content Creator

Elementy:

  • Obrazy i grafiki

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Zastosuj zasadę „tekst przede wszystkim”. Kryterium 1.4.5 wymaga, aby wszędzie tam, gdzie pozwalają na to współczesne technologie, informacje były przekazywane za pomocą rzeczywistego tekstu HTML, a nie jego reprezentacji graficznej w plikach takich jak PNG, JPG czy GIF.

    Głównym celem tej wytycznej jest zapewnienie użytkownikom pełnej kontroli nad sposobem prezentacji treści. Pamiętaj, że tekst osadzony w grafice staje się dla wielu technologii wspomagających „zamkniętym pudełkiem”. Realizacja tego kryterium gwarantuje, że treść pozostanie czytelna po powiększeniu, będzie mogła być przetłumaczona automatycznie oraz zostanie poprawnie zinterpretowana przez czytniki ekranu.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#images-of-text

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#obrazy-tekstu

    Słownik pojęć

    Obrazy tekstu
    –

    Grafiki, które prezentują tekst w formie obrazu (JPEG, PNG, BMP, GIF, TIFF itp.) lub wektora (SVG) zamiast standardowego kodu HTML, co często utrudnia ich skalowanie bez utraty jakości.

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby słabowidzące: Zyskują możliwość skalowania treści bez utraty jakości. Rzeczywisty tekst pozostaje ostry przy powiększeniu, podczas gdy obrazy teksu ulegają pikselizacji i stają się nieczytelne.
    • Użytkownicy urządzeń mobilnych ((ang.) RWD): Prawdziwy tekst automatycznie zawija się i dopasowuje do szerokości ekranu smartfona czy tabletu. Obraz tekstu nie posiada tej właściwości – zmniejsza się proporcjonalnie do całego pliku graficznego, co drastycznie redukuje rozmiar czcionki i czyni treść całkowicie nieczytelną bez uciążliwego przewijania strony w poziomie.
    • Użytkownicy czytników ekranu: Otrzymują bezpośredni dostęp do treści. Choć tekst alternatywny może opisać grafikę, bezpośredni dostęp do tekstu HTML jest zawsze rozwiązaniem bardziej efektywnym i precyzyjnym.
    • Osoby z dysleksją i zaburzeniami poznawczymi: Mogą dostosować krój czcionki na bardziej przyjazny lub zwiększyć odstępy między literami, co znacząco poprawia komfort czytania. W przypadku obrazu jest niemożliwe.
    • Użytkownicy urządzeń mobilnych: Prawdziwy tekst lepiej adaptuje się do małych ekranów (responsowność), eliminując konieczność uciążliwego przewijania strony w poziomie.
    • Wszyscy użytkownicy: Zyskują dzięki szybszemu ładowaniu strony (tekst jest lżejszy niż grafika) oraz lepszym wynikom SEO.

    Zasady wdrażania i wymagania techniczne

    • Priorytet dla HTML i CSS: Zamiast tworzyć graficzne nagłówki czy przyciski, używaj znaczników takich jak <h1>, <p> czy <a> i nadawaj im wygląd za pomocą arkuszy stylów ((ang.) Web Fonts).
    • Dostępne SVG: Jeśli musisz użyć grafiki wektorowej dla złożonych efektów, stosuj element <text> wewnątrz SVG. Dzięki temu tekst pozostaje dostępny dla technologii wspomagających i jest w pełni skalowalny.
    • Tekst na tle: Zamiast osadzać tekst w pliku graficznym banera, nałóż prawdziwy tekst HTML na obraz tła za pomocą CSS używając przy tym dodatkowej warstwy maskującej dla zwiększenia kontrastu.
    • Tekst alternatywny dla wyjątków: W sytuacjach, gdy użycie obrazu tekstu jest dopuszczalne (np. logo), zawsze stosuj atrybut alt z identyczną treścią, jaka widnieje na grafice.

    Wyjątki i sytuacje szczególne

    Kryterium dopuszcza stosowanie obrazów tekstu w trzech specyficznych przypadkach:

    • Elementy niezbędne: Gdy konkretna prezentacja wizualna jest kluczowa dla przekazu. Dotyczy to logotypów, nazw marek, tekstów będących częścią zdjęć (np. szyld na fotografii budynku) oraz specjalistycznych notacji (np. skomplikowane równania matematyczne lub kaligrafia), których nie da się odtworzyć w HTML bez utraty sensu.
    • Elementy dekoracyjne: Jeśli obraz tekstu służy wyłącznie ozdobie i nie niesie istotnych informacji, można go użyć (pamiętając o pustym atrybucie alt="").
    • Możliwość dostosowania: Obraz tekstu jest dozwolony, jeśli użytkownik może samodzielnie zmienić jego czcionkę, rozmiar, kolor oraz tło.

    Przykłady implementacji

    Najczęstsze błędy

    • Brak atrybutu alt dla logotypów lub obrazów tekstowych będących wyjątkami.
    • Stosowanie plików graficznych do prezentowania nagłówków stron lub kluczowych komunikatów.
    • Brak projektowania responsywnego ((ang.) RWD) – umieszczanie kluczowych komunikatów w szerokich banerach graficznych, które na ekranach telefonów zmniejszają się do miniaturowych, nieczytelnych rozmiarów.
    • Umieszczanie informacji o cenach produktów wyłącznie wewnątrz obrazów JPG lub PNG.
    • Zastępowanie tekstu przycisków grafiką tła w CSS przy jednoczesnym ukrywaniu tekstu HTML (np. przez text-indent: -9999px).
    • Eksportowanie tekstu w SVG jako krzywych (ścieżek), co czyni go niewidocznym dla czytników ekranu.
    • Nadużywanie pojęcia „wyjątek dekoracyjny” dla treści, które mają znaczenie merytoryczne.

    Najlepsze praktyki

    • Zawsze zaczynaj projektowanie od założenia, że każda treść musi być tekstem HTML.
    • Współpracuj z projektantami UI/UX, aby edukować ich w zakresie możliwości CSS i unikania obrazów tekstu.
    • Testuj responsywność i skalowalność treści przy powiększeniu do 200% i więcej.
    • Unikaj generowania dynamicznych obrazów z tekstem (np. certyfikatów, wykresów) bez zapewnienia dostępnej alternatywy tekstowej.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Spróbuj zaznaczyć tekst myszką. Jeśli nie jest to możliwe, zweryfikuj czy element to obraz i czy podlega wyjątkom. Przeprowadź też test w widoku mobilnym, sprawdzając czy tekst dopasowuje się do ekranu.
    • NVDA: Sprawdź, czy czytnik ekranu poprawnie interpretuje treść logotypów poprzez atrybuty alt.
    • (ang.) WAVE Evaluation Tool: Użyj do szybkiego wykrycia wszystkich grafik na stronie i oceny ich tekstów alternatywnych.
    • (ang.) IBM Equal Access Toolkit: Wykorzystaj do sprawdzenia, czy teksty wewnątrz elementów (ang.) SVG są widoczne w drzewie dostępności.
    • ANDI.js: Wybierz moduł „Graphics/Images”, aby podświetlić wszystkie elementy graficzne na stronie. Sprawdź, czy teksty osadzone w grafikach posiadają swoje odzwierciedlenie w tekście zastępczym (np. w przypadku logotypów) oraz czy wykresy lub obrazy tekstu nie powinny zostać zastąpione prawdziwym tekstem HTML i CSS.
    • Testowanie manualne: Wyłącz ładowanie styli CSS i obrazów w ustawieniach przeglądarki, aby sprawdzić, czy kluczowe informacje tekstowe nadal są obecne na stronie.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 elementów strony. Twoim zadaniem jest sprawdzenie, czy tekst prezentowany w tych przykładach jest prawdziwym tekstem (dostępnym), czy tylko obrazem tekstu (niedostępnym).

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.

    Proponowane narzędzia: Narzędzie deweloperskie (ang.) Developer Tools, NVDA, (ang.) WAVE Evaluation Tool, (ang.) IBM Equal Access Toolkit, ANDI.js

    Link: https://pdc.ambiscale.com/training/wcag-1-4-5/

    #1 BŁĄD

    Problem: Nagłówek „Nasza Oferta” to plik graficzny (<img>).
    Dlaczego: Tekst jest „wypalony” w obrazku. Nie można go dostosować (np. zmienić czcionki, kolorów w trybie wysokiego kontrastu), a przy powiększaniu traci na jakości.
    Naprawa: Użyj znacznika <h2> i styluj go w CSS.

    #2 BŁĄD

    Problem: Przycisk używa techniki text-indent: -9999px i obrazka tła (CSS background-image).
    Dlaczego: Prawdziwy tekst jest ukryty, a widoczny jest tylko obrazek. Jeśli obrazek się nie załaduje lub zostanie wyłączony (np. w trybie dużego kontrastu), przycisk zniknie.
    Naprawa: Użyj standardowego tekstu wewnątrz <button> i styluj tło kolorem/gradientem w CSS.

    #3 BŁĄD

    Problem: Cały blok cytatu to jeden obrazek.
    Dlaczego: Treść jest niedostępna dla mechanizmów wyszukiwania i tłumaczenia. Użytkownik nie może skopiować fragmentu cytatu.
    Naprawa: Użyj znacznika <blockquote> dla tekstu.

    #4 BŁĄD

    Problem: Elementy menu to osobne obrazki.
    Dlaczego: To przestarzała technika. Utrudnia edycję menu (trzeba generować nową grafikę dla każdej zmiany) i jest nieprzyjazna dla dostępności.
    Naprawa: Użyj listy linków <a> stylizowanych jako przyciski w CSS.

    #5 DOBRZE

    Dlaczego: Mimo że widzimy tekst na tle obrazka, tekst ten jest prawdziwym kodem HTML (<h3>, <p>) nałożonym na obrazek (pozycjonowanie absolutne). Można go zaznaczyć, skopiować, powiększyć bez utraty jakości i przeczytać czytnikiem ekranu.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów