WCAG 1.4.5: Obrazy tekstu

Co oznacza ta zasada

WCAG 1.4.5 — Obrazy tekstu (poziom AA) stanowi, że jeśli tę samą prezentację wizualną można uzyskać przy użyciu prawdziwego tekstu, należy użyć prawdziwego tekstu zamiast obrazu zawierającego tekst. Obraz tekstu to każdy obraz, w którym znaki tekstowe są główną treścią przekazywaną użytkownikowi — na przykład JPEG nagłówka, baner PNG z hasłem reklamowym lub logo GIF, które zapisuje nazwę marki stylizowaną czcionką.

Różnica między spełnieniem a niespełnieniem kryterium jest prosta: jeśli informację można przekazać, oznaczając rzeczywiste znaki w HTML i stylując je za pomocą CSS, aby uzyskać ten sam wygląd, to użycie zamiast tego obrazu jest naruszeniem. Zasada nie dotyczy obrazów dekoracyjnych ani fotografii, które przypadkowo zawierają tekst w kadrze (takich jak znak drogowy na zdjęciu). Skupia się na obrazach, w których sam tekst jest zamierzoną treścią.

WCAG definiuje dwa oficjalne wyjątki, w których obrazy tekstu są dopuszczalne:

• Wyjątek „istotności” (essential): Określona prezentacja wizualna jest istotna dla przekazywanej informacji. Klasycznym przykładem jest logotyp — tam, gdzie konkretne odwzorowanie kształtów liter jest nierozerwalnie związane z tożsamością marki. Logo firmy, w którym stylizowane litery SĄ marką, może pozostać obrazem.
• Wyjątek „dostosowywalności” (customizable): Obraz tekstu może być wizualnie dostosowany do wymagań użytkownika. Oznacza to, że użytkownik może zmienić krój pisma, rozmiar, kolor i tło tekstu w obrazie. W praktyce ten wyjątek jest niemal nigdy niespełniany przez rzeczywiste implementacje, ponieważ większości obrazów nie da się dynamicznie przerysować zgodnie z preferencjami użytkownika.

Ważne jest, czego to kryterium NIE wymaga: nie zakazuje wszystkich obrazów zawierających tekst. Fotografia historycznego dokumentu, zrzut ekranu użyty jako dowód czy obraz wykresu, w którym etykiety osi są częścią wizualizacji danych, nie są głównym celem tej zasady, choć tekst alternatywny (WCAG 1.1.1) nadal musi opisywać ich treść. Skupienie dotyczy przypadków, w których projektant zdecydował się wyrenderować stylizowany tekst jako obraz rastrowy lub wektorowy wyłącznie z powodów estetycznych, podczas gdy CSS mógłby osiągnąć ten sam efekt.

Elementy HTML najczęściej powiązane z naruszeniami obejmują znaczniki <img> używane dla nagłówków, banerów, przycisków call-to-action, etykiet nawigacji, cytatów rekomendacji i tekstów promocyjnych. Pliki SVG, które osadzają tekst jako ścieżki (zamiast elementów <text>), również stanowią problem, ponieważ takich znaków nie można zaznaczać, zmieniać ich rozmiaru ani przelewać w przeglądarce.

Dlaczego to ma znaczenie

Gdy tekst jest osadzony wewnątrz obrazu rastrowego, staje się stałym bitmapowym obrazem. Przeglądarka może skalować obraz w górę lub w dół, ale nie może przelewać tekstu, zmienić jego kroju, zwiększyć grubości pisma ani zmienić kontrastu kolorów poza to, co już jest „wypalone” w pikselach. Tworzy to istotne bariery dla kilku grup osób z niepełnosprawnościami.

Użytkownicy z niską ostrością wzroku zazwyczaj polegają na powiększaniu w przeglądarce, systemowym skalowaniu tekstu lub dedykowanym oprogramowaniu powiększającym. Prawdziwy tekst skaluje się ostro przy każdym poziomie powiększenia; obraz tekstu rozmywa się i pikseluje, stając się nieczytelny przy dużym powiększeniu. Około 2,2 miliarda osób na świecie ma jakąś formę upośledzenia wzroku i wiele z nich używa powiększania jako głównej strategii radzenia sobie, zamiast czytnika ekranu.

Użytkownicy z dysleksją lub innymi trudnościami w czytaniu często używają rozszerzeń przeglądarki lub technologii wspomagających, aby nadpisywać kroje pisma, zwiększać odstępy między literami i przełączać się na schematy kolorów o wysokim kontraście. Żadne z tych dostosowań nie działa na obrazy tekstu — piksele są niezmienne. Użytkownik, który potrzebuje czcionki OpenDyslexic lub szeroko rozstawionego kroju bezszeryfowego, po prostu nie może jej zastosować do nagłówka wyrenderowanego jako PNG.

Użytkownicy polegający na niestandardowych schematach kolorów — w tym osoby z fotofobią, zaburzeniami migrenowymi lub nadwrażliwością na kontrast — mogą ustawić w systemie operacyjnym tryb wysokiego kontrastu lub odwróconych kolorów. Tekst CSS reaguje na takie ustawienia systemowe; tekst w obrazie nie, a może wręcz stać się trudniejszy do odczytania, gdy kolory zostaną nieoczekiwanie odwrócone.

Rozważmy konkretny scenariusz: turecki serwis e-commerce renderuje nagłówki kampanii promocyjnych jako obrazy JPEG, aby zachować niestandardowy krój pisma używany w księdze znaku. Użytkownik z niską ostrością wzroku powiększa przeglądarkę do 200%. Obrazy produktów skalują się akceptowalnie, ale nagłówek kampanii — obraz — staje się rozmazaną plamą pikseli. Użytkownik nie może odczytać promocji i przegapia wyprzedaż. Gdyby ten sam krój pisma został dostarczony przez @font-face i zastosowany do prawdziwego elementu <h2>, tekst pozostałby ostry przy każdym poziomie powiększenia, ponieważ wektorowe renderowanie fontów skaluje się w nieskończoność.

Poza dostępnością, używanie prawdziwego tekstu ma mierzalne korzyści SEO. Roboty wyszukiwarek indeksują bezpośrednio węzły tekstowe; nie mogą niezawodnie wyodrębnić treści tekstowej z obrazów bez OCR. Nagłówek osadzony w PNG jest niewidoczny dla algorytmu rankingowego Google. Przejście na prawdziwy tekst może poprawić indeksowanie słów kluczowych i pozycję strony dla tej samej treści.

Powiązane reguły Axe-core

WCAG 1.4.5 wymaga testów manualnych. Nie istnieje pojedyncza zautomatyzowana reguła axe-core, która niezawodnie wykrywa obrazy tekstu, z powodów wyjaśnionych poniżej.

• Wymagane testy manualne — brak dedykowanej reguły automatycznej: Narzędzia automatyczne mogą wykryć, że istnieje element <img> i że ma atrybut alt, ale nie są w stanie określić, czy treść wizualna tego obrazu jest przede wszystkim renderowanym tekstem. Wymagałoby to rozpoznawania obrazu / OCR dla każdego obrazu na stronie, co jest kosztowne obliczeniowo i zależne od kontekstu. Narzędzie skanujące stronę nie odróżni fotografii, która przypadkowo zawiera szyld z napisem, od celowo wyrenderowanego nagłówka jako obrazu. Do oceny, czy dany obraz istnieje w celu prezentacji stylizowanego tekstu, który mógłby być zamiast tego oznaczony jako prawdziwy tekst HTML ze stylowaniem CSS, potrzebna jest ocena człowieka.
• Częściowy sygnał z reguł dotyczących kontrastu kolorów: Reguły axe-core, takie jak color-contrast, nie zadziałają na tekst osadzony w obrazach, ponieważ operują na węzłach tekstowych DOM i obliczonych wartościach kolorów CSS. Jeśli obraz tekstu ma niewystarczający kontrast, automatyczne sprawdzanie kontrastu pominie go bez ostrzeżenia. Oznacza to, że obrazy tekstu mogą jednocześnie naruszać zarówno 1.4.5, jak i 1.4.3 (Minimalny kontrast), bez żadnego automatycznego sygnału — to silny powód, by przeprowadzać dokładne audyty manualne.
• Tekst jako ścieżki w SVG: Gdy SVG eksportuje tekst jako obrysowane ścieżki (elementy <path>) zamiast elementów <text>, axe-core nie ma sposobu, by wiedzieć, że ścieżki układają się w słowa. Konieczna jest ręczna inspekcja kodu źródłowego SVG, aby ustalić, czy tekst został przekształcony w ścieżki i czy zamiast tego nie powinien być prawdziwym elementem <text> z zastosowaną czcionką webową.

Jak testować

1. Uruchom skan automatyczny jako punkt wyjścia. Użyj axe DevTools (rozszerzenie przeglądarki) lub Lighthouse w Chrome DevTools, aby zidentyfikować wszelkie zgłoszone problemy na stronie. Choć żadne z narzędzi nie ma dedykowanej reguły 1.4.5, wynik skanowania może ujawnić powiązane problemy, takie jak brakujący tekst alt przy obrazach lub niewystarczający kontrast kolorów w węzłach tekstowych. Zanotuj wszystkie oznaczone obrazy — staną się kandydatami do przeglądu manualnego.
2. Wizualnie przejrzyj wszystkie obrazy na stronie. Otwórz stronę w przeglądarce i systematycznie obejrzyj każdy element <img>, każdy osadzony SVG, każdy obraz tła w CSS i każdy element canvas. Dla każdego z nich zadaj pytanie: czy głównym celem tego obrazu jest wyświetlenie tekstu? Jeśli tak, przejdź do następnego kroku.
3. Sprawdź, czy CSS mógłby osiągnąć ten sam efekt. Dla każdego obrazu zidentyfikowanego w kroku 2 zapytaj: czy krój webowy (@font-face) w połączeniu z właściwościami CSS (kolor, cień tekstu, odstępy między literami, gradientowe tło) mógłby dać wizualnie równoważny efekt? Jeśli odpowiedź brzmi „tak”, obraz tekstu jest naruszeniem, chyba że ma zastosowanie wyjątek logotypu.
4. Zweryfikuj wyjątki logotypów. Jeśli witryna powołuje się na wyjątek logotypu, potwierdź, że obraz jest rzeczywiście logo marki, w którym projekt kształtów liter jest nierozerwalny z tożsamością marki, a nie po prostu nagłówkiem ustawionym krojem firmowym.
5. Przetestuj z powiększeniem przeglądarki. Powiększ przeglądarkę do 200% i 400% (używając Ctrl/Cmd + lub ustawień przeglądarki). Obserwuj, czy tekst na stronie pozostaje ostry. Obrazy tekstu będą się rozmywać lub pikselować; prawdziwy tekst pozostanie wyraźny. Ten test jednocześnie sprawdza naruszenia 1.4.5 i powiązane kwestie przelewania treści (WCAG 1.4.4 i 1.4.10).
6. Sprawdź kod źródłowy SVG. Kliknij prawym przyciskiem dowolny SVG i wybierz „Wyświetl źródło” lub użyj narzędzi deweloperskich przeglądarki, aby przejrzeć DOM SVG. Upewnij się, że treść tekstowa używa elementów <text>, a nie elementów <path>, które obrysowują litery. Jeśli cały tekst został przekształcony w ścieżki, SVG ma ten sam problem co rastrowy obraz tekstu.
7. Przetestuj z czytnikiem ekranu, aby zrozumieć skumulowany wpływ. Użyj NVDA z Firefoxem, VoiceOver z Safari na macOS/iOS lub JAWS z Chrome. Przejdź do obrazów tekstu i potwierdź, że atrybut alt dokładnie przekazuje treść tekstową. Choć sensowny atrybut alt spełnia WCAG 1.1.1 (Treść nietekstowa), nie rozwiązuje naruszenia 1.4.5 — tekst nadal nie jest dostosowywalny przez użytkownika. Udokumentuj oba problemy osobno.
8. Zastosuj niestandardowy arkusz stylów użytkownika lub rozszerzenie przeglądarki. Zainstaluj rozszerzenie przeglądarki, takie jak Stylus, lub użyj wbudowanej funkcji arkusza stylów użytkownika w Firefoxie, aby globalnie nadpisać rodziny fontów i zwiększyć rozmiar czcionki. Prawdziwy tekst się zmieni; tekst w obrazie nie. To bezpośrednio symuluje doświadczenie użytkowników z trudnościami w czytaniu, gdy stosują swoje preferowane kroje pisma.

Jak naprawić

Dekoracyjny nagłówek banera — niepoprawnie

<!-- Failing: A marketing heading is rendered as a JPEG to preserve a custom font -->
<div class='hero'>
  <img src='summer-sale-heading.jpg' alt='Summer Sale — Up to 50% Off' />
</div>

Dekoracyjny nagłówek banera — poprawnie

<!-- Fixed: The same custom font is delivered via @font-face and applied to a real heading.
     The text is now selectable, scalable, and user-customizable. -->
<style>
  @font-face {
    font-family: 'BrandDisplay';
    src: url('/fonts/brand-display.woff2') format('woff2');
    font-display: swap;
  }
  .hero-heading {
    font-family: 'BrandDisplay', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #c0392b;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }
</style>

<div class='hero'>
  <h1 class='hero-heading'>Summer Sale — Up to 50% Off</h1>
</div>

SVG z obrysowanym tekstem — niepoprawnie

<!-- Failing: Text has been converted to paths in the SVG export,
     making the characters inaccessible and non-scalable as text -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'>
  <!-- Dozens of <path> elements that trace the letters of 'Accsible' -->
  <path d='M10 60 L20 20 L30 60 ...' fill='#003087' />
</svg>

SVG z obrysowanym tekstem — poprawnie

<!-- Fixed: SVG uses a real <text> element with a web font reference.
     The text is now indexable, selectable, and scalable. -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'
     role='img' aria-label='Accsible'>
  <defs>
    <style>
      .svg-label {
        font-family: 'BrandDisplay', sans-serif;
        font-size: 48px;
        fill: #003087;
      }
    </style>
  </defs>
  <text class='svg-label' x='10' y='60'>Accsible</text>
</svg>

Obraz tła CSS z tekstem w tle — niepoprawnie

<!-- Failing: The button label is part of the background image,
     not a real text node -->
<a href='/shop' class='cta-button'></a>

<style>
  .cta-button {
    display: block;
    width: 200px;
    height: 60px;
    background: url('shop-now-button.png') no-repeat center;
    background-size: cover;
  }
</style>

Obraz tła CSS z tekstem w tle — poprawnie

<!-- Fixed: The button uses a real text node styled with CSS.
     The background image is purely decorative (gradient or texture). -->
<a href='/shop' class='cta-button'>Shop Now</a>

<style>
  .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
    font-family: 'BrandDisplay', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

Logotyp — dopuszczalny wyjątek

<!-- Acceptable: A logotype where the specific letterform design
     IS the brand identity. Alt text accurately conveys the text content.
     CSS cannot replicate the hand-drawn letterforms. -->
<a href='/' aria-label='Accsible — Home'>
  <img src='accsible-logo.svg'
       alt='Accsible'
       width='160'
       height='48' />
</a>

Typowe błędy

• Używanie JPEG lub PNG dla nagłówków strony, ponieważ makieta graficzna używa fontu niedostępnego w Google Fonts — właściwym rozwiązaniem jest samodzielne hostowanie fontu jako pliku WOFF2 przy użyciu @font-face, a nie „wypalanie” nagłówka w obrazie.
• Eksportowanie całych sekcji hero jako pojedynczego płaskiego obrazu z narzędzi projektowych, takich jak Figma czy Photoshop, co osadza cały tekst, przyciski i etykiety w jednym pliku rastrowym. Każdy element tekstowy musi być osobnym węzłem HTML.
• Konwertowanie tekstu SVG na ścieżki podczas eksportu, aby uniknąć zależności od ładowania fontów na serwerze. To eliminuje dostępność i możliwość wyszukiwania tekstu. Zamiast tego używaj elementów <text> z odniesieniem do fontu w CSS.
• Umieszczanie tekstu promocyjnego lub prawnego (takiego jak warunki, ceny czy regulaminy konkursów) wewnątrz obrazu, aby zachować precyzyjną kontrolę nad układem. Każdy tekst, który użytkownicy muszą przeczytać, musi być prawdziwym tekstem HTML.
• Powoływanie się na wyjątek logotypu dla każdego elementu tekstu firmowego — wyjątek dotyczy wyłącznie właściwego znaku logo, a nie dowolnego nagłówka czy etykiety ustawionej krojem firmowym. Nagłówek w Helvetica Neue nie jest logotypem.
• Zapewnienie poprawnego atrybutu alt i zakładanie, że rozwiązuje to naruszenie 1.4.5 — nie rozwiązuje. Tekst alternatywny spełnia WCAG 1.1.1 (Treść nietekstowa), ale nie sprawia, że tekst w obrazie staje się dostosowywalny przez użytkownika, co jest odrębnym wymaganiem 1.4.5.
• Używanie elementów HTML5 <canvas> do renderowania stylizowanego tekstu dla efektu wizualnego bez zapewnienia alternatywy w postaci prawdziwego tekstu w DOM. Tekst renderowany na canvasie ma wszystkie te same wady co tekst w obrazie.
• Osadzanie tekstu w obrazach Open Graph lub podglądach do udostępniania w mediach społecznościowych i zapominanie, że te obrazy pojawiają się również na stronie (na przykład jako obraz wyróżniający w poście na blogu). Jeśli obraz wyróżniający ma charakter dekoracyjny, może to być akceptowalne — ale jeśli jest głównym nagłówkiem artykułu, jest to naruszenie.
• Ignorowanie szablonów newsletterów e-mail — choć klienty poczty są poza zakresem WCAG dla przeglądarek, wiele organizacji publikuje swoje newslettery jako strony WWW. Tekst w obrazach nagłówków e-maili osadzonych jako treść webowa nadal podlega 1.4.5.
• Zakładanie, że obrazy w wysokiej rozdzielczości Retina rozwiązują problem — obraz tekstu w rozdzielczości 2× lub 3× jest ostrzejszy niż obraz 1×, ale nadal narusza 1.4.5, ponieważ tekst pozostaje niedostosowywalny, nieprzelewalny i niewidoczny dla wyszukiwarek oraz technologii wspomagających.

Związek z tureckimi regulacjami dostępności

Turecka Prezydencka Okrężnica 2025/10, opublikowana w Dzienniku Urzędowym nr 32933 w dniu 21 czerwca 2025 r., ustanawia obowiązkowe standardy dostępności stron internetowych i aplikacji mobilnych dla szerokiego zakresu podmiotów działających w Turcji. Okrężnica wprost odwołuje się do WCAG 2.2 jako normatywnego standardu technicznego, a zgodność na poziomie AA — która obejmuje WCAG 1.4.5 — jest wymagana do uzyskania Erişilebilirlik Logosu (Logotypu Dostępności), wydawanego przez Ministerstwo Rodziny i Usług Społecznych (Aile ve Sosyal Hizmetler Bakanlığı). Logo to pełni funkcję oficjalnego znaku certyfikacyjnego wskazującego, że produkt cyfrowy spełnia wymagania dostępności zdefiniowane w okrężnicy.

Podmioty objęte okrężnicą obejmują szeroki przekrój tureckiej gospodarki cyfrowej. Instytucje publiczne i agencje rządowe na wszystkich poziomach są zobowiązane do zgodności, podobnie jak banki i instytucje finansowe regulowane przez BDDK (Banking Regulation and Supervision Agency). Okrężnica obejmuje szpitale i świadczeniodawców opieki zdrowotnej, zarówno publicznych, jak i prywatnych. W sektorze prywatnym w zakres okrężnicy wchodzą platformy e-commerce, operatorzy telekomunikacyjni z 200,000 lub większą liczbą abonentów, biura podróży, prywatne firmy transportowe oraz prywatne szkoły i instytucje edukacyjne upoważnione przez Ministerstwo Edukacji Narodowej (MoNE / Milli Eğitim Bakanlığı).

Dla tych organizacji WCAG 1.4.5 ma bezpośrednie i praktyczne konsekwencje. Wiele tureckich serwisów e-commerce i stron instytucjonalnych używa obrazów promocyjnych, banerów z niestandardowymi fontami i nagłówków kampanii, które osadzają tekst jako obrazy rastrowe — to powszechna praktyka w procesach projektowania stron, które zaczynają się w narzędziach graficznych. Zgodnie z Prezydencką Okrężnicą takie implementacje stanowią brak zgodności na poziomie AA i uniemożliwiłyby witrynie uzyskanie lub utrzymanie Erişilebilirlik Logosu. Banki wyświetlające tabele oprocentowania jako obrazy, szpitale wymieniające nazwy oddziałów w banerach PNG czy operatorzy telekomunikacyjni prezentujący taryfy promocyjne jako płaskie pliki graficzne — wszyscy naruszaliby to kryterium.

Organizacje dążące do zgodności powinny przeprowadzić audyt wszystkich obrazów w swoich serwisach pod kątem osadzonej treści tekstowej, w pierwszej kolejności priorytetyzując konwersję stron o wysokim ruchu (strony główne, strony produktów, strony usług). Należy też ustanowić proces od projektu do wdrożenia, który zabrania dostarczania treści tekstowych wewnątrz plików graficznych. Inwestycja w strategię fontów webowych z użyciem @font-face w formacie WOFF2 i odpowiednimi wartościami font-display pozwoli projektantom osiągnąć tę samą bogatą typografię wymaganą przez wytyczne marki, pozostając jednocześnie w pełni zgodnym zarówno z WCAG 2.2 poziom AA, jak i tureckim mandatem dostępności na rok 2025.