WCAG 1.4.9: Obrazy tekstu (bez wyjątku)

Co Oznacza Ta Zasada

WCAG 1.4.9 — Obrazy tekstu (bez wyjątku) to kryterium na poziomie AAA, które doprowadza wymagania WCAG 1.4.5 (Obrazy tekstu, poziom AA) do logicznego końca. Podczas gdy 1.4.5 dopuszcza obrazy tekstu, gdy obraz jest wizualnie konfigurowalny lub gdy określona prezentacja wizualna jest niezbędna, 1.4.9 eliminuje niemal wszystkie te wyjątki. Zgodnie z tym kryterium tekst musi być renderowany jako prawdziwy tekst — rzeczywiste znaki w DOM — a nie jako rastrowe lub wektorowe obrazy zawierające tekst.

Jedynym dozwolonym wyjątkiem w 1.4.9 jest tekst, który jest czysto dekoracyjny (nie niesie absolutnie żadnej wartości informacyjnej) lub tekst, który stanowi część logo lub nazwy marki, gdzie konkretne opracowanie wizualne jest nierozerwalne z przekazywaną tożsamością. W praktyce oznacza to, że zrzuty ekranu produktów zawierające tekst, grafiki banerowe z treściami promocyjnymi, infografiki z opisanymi danymi, obrazy certyfikatów, karty cytatów w stylu mediów społecznościowych oraz zeskanowane dokumenty wyświetlane w sieci muszą zostać zastąpione lub przynajmniej uzupełnione prawdziwym renderowanym tekstem.

Spełnienie 1.4.9 ma miejsce, gdy każdy fragment znaczącego tekstu widocznego dla użytkownika jest renderowany przez silnik tekstowy przeglądarki — czy to poprzez węzły tekstowe HTML, treści generowane przez CSS tam, gdzie to właściwe, czy elementy SVG <text> — tak aby agent użytkownika mógł go przelewać, zmieniać rozmiar, kolor i odstępy. Niespełnienie ma miejsce zawsze, gdy <img>, <canvas>, obraz tła CSS, SVG <image>, osadzony PDF lub jakiekolwiek inne zasoby nietekstowe są używane do wyświetlania tekstu niosącego znaczenie, niezależnie od tego, czy podano atrybut alt. Należy zauważyć, że dobrze napisany atrybut alt spełnia 1.1.1 (Treść nietekstowa), ale nie spełnia 1.4.9, ponieważ tekst alternatywny nie jest wizualnie renderowany, a oryginalny obraz nadal pozbawia użytkowników widzących możliwości dostosowania wizualnej prezentacji tekstu.

Kryterium wpływa na następujące typowe wzorce HTML: elementy <img>, których pliki źródłowe zawierają tekst; właściwości CSS background-image wskazujące na obrazy z osadzonym tekstem; elementy <canvas>, na których tekst został narysowany programowo; osadzone inline elementy SVG, które używają <image> zamiast <text>; oraz osadzenia zewnętrzne, takie jak iframy zawierające treści w formie renderowanych obrazów. Nawet technicznie skalowalne formaty, takie jak SVG, podlegają analizie, gdy tekst jest osadzony jako ścieżka lub obraz, a nie jako węzeł SVG <text>.

Dlaczego To Ma Znaczenie

Według Światowej Organizacji Zdrowia około 2,2 miliarda ludzi na całym świecie ma jakąś formę zaburzeń widzenia. Znacząca część tych osób — w tym osoby z niedowidzeniem, zaburzeniami widzenia barw, dysleksją i innymi niepełnosprawnościami w zakresie czytania druku — polega na narzędziach do dostosowywania tekstu na poziomie przeglądarki lub systemu operacyjnego, aby uczynić treści czytelnymi. Narzędzia te obejmują funkcje powiększania, zastępowanie czcionek, zwiększanie odstępów między literami i słowami, schematy wysokiego kontrastu lub niestandardowe schematy kolorów oraz silniki text-to-speech działające na renderowanym tekście DOM. Gdy tekst jest osadzony wewnątrz obrazu, każda z tych adaptacji staje się dla tej treści niedostępna.

Weźmy pod uwagę użytkownika z niedowidzeniem, który ustawił swoją przeglądarkę tak, aby renderowała tekst dużą czcionką bezszeryfową w wysokokontrastowym zestawieniu żółtego na czarnym tle. Gdy napotyka baner promocyjny z napisem „Summer Sale — 50% Off” wtopionym w JPEG, przeglądarka nie może zmienić koloru ani przelewać tego tekstu. Obraz może się powiększać wraz z powiększeniem strony, ale szybko staje się rozpikselowany i trudniejszy do odczytania, zamiast bardziej czytelny. Gdyby ta sama treść była renderowana jako prawdziwy tekst HTML ostylowany za pomocą CSS, preferencje przeglądarki użytkownika zastosowałyby się automatycznie, a treść pozostałaby ostra, regulowalna i dostępna.

Osoby z dysleksją często instalują rozszerzenia przeglądarki lub stosują niestandardowe arkusze stylów, które zmieniają czcionki na przyjazne dysleksji kroje, takie jak OpenDyslexic, oraz zwiększają odstępy między znakami i słowami, aby zmniejszyć efekt „zagęszczenia” wizualnego. Obrazy tekstu całkowicie omijają te adaptacje. Przycisk wezwania do działania (CTA) renderowany jako obraz zamiast ostylowanego elementu HTML jest w praktyce niewidoczny dla tych dostosowań, potencjalnie ukrywając kluczowe elementy interaktywne przed użytkownikami, którzy polegają na spersonalizowanym renderowaniu.

Użytkownicy z niepełnosprawnościami ruchowymi, którzy polegają na przełącznikach lub oprogramowaniu śledzącym ruch gałek ocznych, mogą agresywnie korzystać z narzędzi powiększania, aby trafiać w precyzyjne cele. Rozmyte, niskiej rozdzielczości obrazy tekstu przy wysokich poziomach powiększenia tworzą dodatkowe trudności w celowaniu. Użytkownicy czytników ekranu, którzy mają pewną resztkową zdolność widzenia, ale nadal używają czytnika ekranu do zrozumienia treści, mogą również stwierdzić, że obrazy tekstu są odczytywane niespójnie, w zależności od tego, czy autor pamiętał o napisaniu kompletnego atrybutu alt — a nawet idealny tekst alt nie przywraca wizualnej prezentacji, której potrzebują.

Poza dostępnością dla osób z niepełnosprawnościami, używanie prawdziwego tekstu zamiast obrazów tekstu niesie ze sobą istotne korzyści SEO. Roboty wyszukiwarek indeksują tekst DOM znacznie bardziej niezawodnie, niż są w stanie interpretować zawartość obrazów, co oznacza, że nagłówki promocyjne, nazwy produktów i etykiety kategorii osadzone w obrazach mogą otrzymywać niewielką lub żadną wagę w rankingach wyszukiwania. Prawdziwy tekst jest również lżejszy pod względem rozmiaru pliku w większości zastosowań typograficznych, poprawiając wyniki Core Web Vitals i zmniejszając zużycie transferu danych przez użytkowników korzystających z połączeń mobilnych — co jest szczególnie istotne na rynkach, gdzie penetracja internetu mobilnego jest wysoka, a koszty danych pozostają istotnym czynnikiem.

Powiązane Zasady Axe-core

WCAG 1.4.9 wymaga testów manualnych, ponieważ żadne narzędzie automatyczne nie jest w stanie wiarygodnie określić, czy obraz zawiera znaczący tekst, czy tekst ten jest czysto dekoracyjny, czy też jego konkretne renderowanie wizualne jest niezbędne. Następujące kwestie mają zastosowanie przy używaniu axe-core lub powiązanych narzędzi:

• Wymagana inspekcja manualna (brak dedykowanej zasady axe): axe-core nie dostarcza zasady, która automatycznie wykrywa obrazy tekstu w kontekście 1.4.9. Narzędzia automatyczne mogą oznaczać elementy <img> bez atrybutów alt (zasada image-alt) oraz obrazy tła, które mogą nieść znaczenie, ale nie są w stanie analizować zawartości pikseli obrazu, aby określić, czy zawiera on tekst, ani ocenić, czy ten tekst jest dekoracyjny. Tester człowiek musi wizualnie przejrzeć każdy obraz i grafikę tła na stronie i zdecydować, czy przekazuje ona informacje tekstowe, które nie są również dostępne jako prawdziwy renderowany tekst w DOM. Jest to nieodłącznym ograniczeniem analizy statycznej: teoretycznie można by zastosować optyczne rozpoznawanie znaków, ale generowałoby ono znaczną liczbę fałszywych trafień w przypadku obrazów, które przypadkowo zawierają litery lub opracowania logotypów.
• image-alt (zasada axe): Choć nie jest to bezpośredni test 1.4.9, zasada image-alt sprawdza, czy wszystkie elementy <img> mają niepusty atrybut alt lub są wyraźnie oznaczone jako dekoracyjne. Uruchomienie tej zasady pomaga audytorom zidentyfikować obrazy wymagające dokładniejszej inspekcji: każdy obraz z opisowym atrybutem alt, który brzmi jak zdanie lub zawiera treści promocyjne, jest silnym sygnałem, że sam obraz może być obrazem tekstu, a zatem kandydatem do oceny pod kątem 1.4.9.
• Audyt Lighthouse „Image elements do not have [alt] attributes”: Podobnie jak image-alt, to sprawdzenie Lighthouse wyświetla obrazy, które są całkowicie nieopisane. Testerzy powinni ręcznie przejrzeć oznaczone obrazy, aby ocenić, czy przedstawiają tekst.

Jak Testować

1. Uruchom skan automatyczny jako pierwszy krok. Otwórz axe DevTools, rozszerzenie przeglądarki Deque lub Lighthouse w Chrome DevTools i uruchom audyt całej strony. Przejrzyj wszystkie oznaczone problemy związane z obrazami. Chociaż żadna zasada automatyczna nie obejmuje bezpośrednio 1.4.9, ten krok ujawnia wszystkie elementy <img> i obrazy tła CSS do dalszego ręcznego przeglądu. Wyeksportuj wyniki i zanotuj każdy obraz, który ma niepusty, zdaniopodobny atrybut alt lub który axe oznacza w ramach image-alt.
2. Wizualnie przejrzyj wszystkie obrazy i grafiki tła. Przewiń stronę i zbadaj każdy obraz, tło CSS, element canvas i grafikę SVG. Zapytaj: czy ten obraz zawiera tekst? Jeśli tak, czy ten tekst jest czysto dekoracyjny (nie dodaje żadnych informacji i mógłby zostać usunięty bez straty)? Czy jest to logotyp, w którym konkretny styl liter jest nierozerwalny z tożsamością marki? Jeśli żaden z wyjątków nie ma zastosowania, obraz stanowi naruszenie 1.4.9.
3. Wyłącz obrazy w przeglądarce. W Firefox przejdź do about:config i ustaw permissions.default.image na 2, lub użyj rozszerzenia takiego jak „Disable Images”. Przeładuj stronę. Wszelkie informacje tekstowe, które znikają i nie są zastąpione widocznym tekstem DOM (nie tylko atrybutem alt odczytywanym przez czytnik ekranu), reprezentują naruszenie 1.4.9. Po testach ponownie włącz obrazy.
4. Zastosuj niestandardowy arkusz stylów użytkownika. W Firefox umieść plik w katalogu chrome/userContent.css swojego profilu i dodaj regułę, taką jak * { font-family: OpenDyslexic, sans-serif !important; color: yellow !important; background-color: black !important; }. Przeładuj stronę. Tekst renderowany jako prawdziwy HTML przyjmie te style; tekst osadzony w obrazach nie ulegnie zmianie. Wszelkie treści tekstowe, które pozostają wizualnie niezmienione i nieczytelne przy wymuszonych stylach, stanowią naruszenie.
5. Testuj z NVDA i Firefox. Nawiguj po stronie, używając trybu przeglądania NVDA. Dla każdego obrazu zanotuj, co NVDA ogłasza. Jeśli NVDA odczytuje atrybut alt, który zawiera znaczącą treść tekstową, porównaj tę treść z tym, co jest wizualnie wyświetlane na obrazie. Obecność znaczącej treści tekstowej w atrybucie alt jest silnym wskaźnikiem, że obraz zawiera tekst — i potwierdza naruszenie 1.4.9, nawet jeśli 1.1.1 jest technicznie spełnione.
6. Testuj z VoiceOver i Safari na macOS. Użyj VO + strzałka w prawo, aby przechodzić przez treść. Nasłuchuj opisów obrazów, które relacjonują pełne zdania, nagłówki lub tekst promocyjny. Porównaj z wizualną inspekcją, aby potwierdzić, że źródłem jest obraz, a nie prawdziwy tekst.
7. Powiększ do 400%. WCAG 1.4.4 i 1.4.10 wymagają, aby tekst pozostał czytelny przy wysokich poziomach powiększenia. Obrazy tekstu stają się rozpikselowane przy powiększaniu przeglądarki; prawdziwy tekst renderowany przez silnik przeglądarki pozostaje ostry. Przy powiększeniu 400% każdy tekst, który wygląda na rozmyty lub rozpikselowany, prawdopodobnie jest obrazem tekstu i powinien zostać zbadany jako potencjalne naruszenie 1.4.9.

Jak Naprawić

Baner promocyjny z osadzonym tekstem — Nieprawidłowe

<!-- A marketing banner where the headline and CTA are baked into the image.
     Even with alt text, users cannot customize the text rendering. -->
<a href='/sale'>
  <img src='/images/summer-sale-banner.jpg'
       alt='Summer Sale — Up to 50% off all products. Shop Now.'
       width='1200' height='400'>
</a>

Baner promocyjny z osadzonym tekstem — Prawidłowe

<!-- The banner uses a real background image for visual decoration,
     while all text is rendered as real HTML so users can resize,
     recolor, and reflow it independently. -->
<a href='/sale' class='sale-banner'>
  <!-- Background image set via CSS: .sale-banner { background-image: url(/images/summer-bg.jpg); } -->
  <h2 class='sale-banner__headline'>Summer Sale</h2>
  <p class='sale-banner__offer'>Up to 50% off all products</p>
  <span class='sale-banner__cta'>Shop Now</span>
</a>

Infografika z opisanymi punktami danych — Nieprawidłowe

<!-- An infographic where category labels and percentages are drawn
     into the PNG. Screen reader users hear the alt; sighted low-vision
     users cannot enlarge or recolor the labels. -->
<img src='/images/market-share-2024.png'
     alt='Market share 2024: Product A 42%, Product B 31%, Product C 27%'
     width='800' height='600'>

Infografika z opisanymi punktami danych — Prawidłowe

<!-- An accessible SVG chart where all labels are SVG <text> nodes.
     Users can zoom, reflow, and apply high-contrast themes to the text.
     An adjacent <table> provides the same data in tabular form. -->
<figure>
  <svg viewBox='0 0 800 400' role='img'
       aria-labelledby='chart-title chart-desc'>
    <title id='chart-title'>Market Share 2024</title>
    <desc id='chart-desc'>Pie chart: Product A 42%, Product B 31%, Product C 27%</desc>
    <!-- chart paths -->
    <text x='200' y='150' class='chart-label'>Product A — 42%</text>
    <text x='450' y='200' class='chart-label'>Product B — 31%</text>
    <text x='350' y='320' class='chart-label'>Product C — 27%</text>
  </svg>
  <figcaption>
    <details>
      <summary>View data as table</summary>
      <table>
        <caption>Market Share 2024</caption>
        <thead><tr><th>Product</th><th>Share</th></tr></thead>
        <tbody>
          <tr><td>Product A</td><td>42%</td></tr>
          <tr><td>Product B</td><td>31%</td></tr>
          <tr><td>Product C</td><td>27%</td></tr>
        </tbody>
      </table>
    </details>
  </figcaption>
</figure>

Obraz tła CSS zawierający nagłówek z dużą ilością tekstu — Nieprawidłowe

<!-- The page title is set as a CSS background image rather than real text.
     This is a common design pattern from the early 2000s image-replacement era
     that should not appear in modern codebases. -->
<h1 class='logo-header'></h1>
<!-- CSS: .logo-header {
       background: url('/images/page-title-about-us.png') no-repeat;
       width: 400px; height: 80px; display: block;
       text-indent: -9999px;
     } -->

Obraz tła CSS zawierający nagłówek z dużą ilością tekstu — Prawidłowe

<!-- Real text is rendered by the browser. Custom web fonts reproduce
     the desired typographic style without sacrificing adaptability.
     The background image, if needed at all, is purely decorative texture. -->
<h1 class='page-title'>About Us</h1>
<!-- CSS: .page-title {
       font-family: 'BrandTypeface', serif;
       font-size: 3rem;
       color: #1a1a2e;
       letter-spacing: 0.05em;
     } -->

Typowe Błędy

• Zakładanie, że kompletny atrybut alt spełnia 1.4.9. Zapewnienie pełnej alternatywy tekstowej w atrybucie alt spełnia WCAG 1.1.1, ale nie ma wpływu na 1.4.9. Kryterium dotyczy konkretnie tego, aby wizualne renderowanie tekstu było dostępne do dostosowania, a nie programowych odpowiedników dla czytników ekranu.
• Używanie technik CSS zastępujących tekst (text-indent: -9999px lub metody clip) na elementach <h1> do <h6>. Te przestarzałe techniki ukrywają prawdziwy tekst wizualnie i zastępują go obrazem tła, co oznacza, że użytkownicy widzący z niedowidzeniem otrzymują wyłącznie obraz, podczas gdy użytkownicy czytników ekranu otrzymują wyłącznie ukryty tekst — rozbieżność, która szkodzi obu grupom na różne sposoby.
• Eksportowanie typografii webowej jako PNG lub JPEG, ponieważ niestandardowa czcionka nie jest dostępna jako webfont. Jeśli licencjonowany krój pisma nie może być legalnie serwowany jako webfont, właściwym rozwiązaniem jest wynegocjowanie praw do webfontu lub wybór alternatywnego kroju, a nie rasteryzowanie tekstu do obrazów.
• Traktowanie plików SVG jako z natury dostępnych. SVG, który osadza tekst jako elementy <path> (typowy wynik z narzędzi graficznych, takich jak opcja „outline text” w Illustratorze), jest równie niedostępny jak PNG. SVG musi używać elementów <text>, aby spełnić 1.4.9.
• Osadzanie tekstu w elementach <canvas> bez tekstowego odpowiednika w prawdziwym tekście. Zawartość canvas jest rasteryzowana na poziomie pikseli. Każdy tekst rysowany za pomocą ctx.fillText() nie jest częścią DOM i nie może być adaptowany przez agentów użytkownika. Wymagana jest nakładka z prawdziwym tekstem lub alternatywa.
• Pozostawianie zeskanowanych dokumentów (PDF-ów renderowanych jako obrazy) bez warstw prawdziwego tekstu opartego na OCR. Zeskanowane dokumenty prezentowane w znacznikach <img> lub jako PDF-y zawierające wyłącznie obrazy naruszają 1.4.9. Konieczne jest uruchomienie OCR i osadzenie warstwy tekstu możliwego do zaznaczenia lub konwersja dokumentu na poprawnie otagowany HTML.
• Używanie obrazów tekstu dla danych dynamicznych, takich jak ceny, ilości w magazynie czy treści generowane przez użytkowników. Za każdym razem, gdy serwer generuje obraz zawierający dane tekstowe, dane te zostają „zamknięte” w formacie obrazu. Ceny w listach produktów, dostępność miejsc na platformach rezerwacyjnych i wyniki na żywo w sporcie muszą być renderowane jako prawdziwy tekst, aby użytkownicy mogli zmieniać ich rozmiar i kolor.
• Pomijanie obrazów podpisów e-mail. Zespoły marketingowe często tworzą bloki podpisów jako obrazy, aby zachować spójność identyfikacji wizualnej. Gdy te e-maile są archiwizowane i linkowane z witryn internetowych, obrazy podpisów stają się treścią webową podlegającą 1.4.9.
• Ignorowanie treści widżetów zewnętrznych. Widżety czatu, odznaki „social proof” i karuzele recenzji dostarczane przez zewnętrznych dostawców mogą wstrzykiwać obrazy tekstu na stronę. Właściciele witryn pozostają odpowiedzialni za dostępność całej treści na swoich stronach; jeśli dostawca nie może zapewnić renderowania opartego na tekście, należy poszukać innego dostawcy.
• Mylenie wyjątków dla logotypów z ogólnymi wyjątkami dla brandingu. Wyjątek dla logotypów obejmuje wyłącznie samo logo lub znak słowny — stylizowaną nazwę marki. Nie rozciąga się na slogany, etykiety nawigacyjne ani jakikolwiek inny tekst, który pojawia się obok logo w tym samym obrazie.

Związek z Tureckimi Regulacjami Dotyczącymi Dostępności

Okrężnik Prezydencki Turcji 2025/10, opublikowany w Dzienniku Urzędowym nr 32933 w dniu 21 czerwca 2025 r., ustanawia obowiązkowe wymogi dostępności stron internetowych dla szerokiego zakresu organizacji działających w Turcji. Okrężnik wymaga, aby objęte podmioty spełniały WCAG 2.1 na poziomie AA jako minimalną podstawę. Podmioty wyraźnie objęte zakresem obejmują instytucje publiczne i organy rządowe, platformy e-commerce, banki i instytucje finansowe, szpitale i prywatnych świadczeniodawców opieki zdrowotnej, firmy telekomunikacyjne z 200 000 lub większą liczbą abonentów, biura podróży, prywatne firmy transportowe oraz szkoły prywatne upoważnione przez Ministerstwo Edukacji Narodowej.

WCAG 1.4.9 jest kryterium na poziomie AAA, a zatem wykracza poza obowiązkowe minimum ustanowione przez Okrężnik Prezydencki 2025/10. Podmioty objęte zakresem nie są prawnie zobowiązane do przestrzegania 1.4.9, aby spełnić podstawowe obowiązki wynikające z okrężnika. Jednak osiągnięcie poziomu AAA w odniesieniu do odpowiednich kryteriów świadczy o wzorcowym zaangażowaniu w inkluzywność i znacząco poszerza grono odbiorców, którzy mogą skutecznie korzystać z usługi.

Wiele sektorów objętych okrężnikiem ma szczególnie silne motywacje, aby dobrowolnie dążyć do zgodności z 1.4.9. Platformy e-commerce często używają banerów promocyjnych, grafik wyprzedażowych i nagłówków kategorii produktów renderowanych jako obrazy — wszystkie te elementy są typowymi wzorcami naruszeń 1.4.9. Dla użytkowników z niedowidzeniem lub dysleksją, którzy polegają na dostosowywaniu tekstu przy podejmowaniu decyzji zakupowych, takie naruszenia przekładają się bezpośrednio na utracone konwersje i potencjalną ekspozycję prawną w ramach szerszych tureckich przepisów dotyczących ochrony konsumentów i przeciwdziałania dyskryminacji. Banki i instytucje finansowe w podobny sposób prezentują oprocentowanie kredytów, zestawienia rachunków i tabele opłat; jeśli jakiekolwiek z tych informacji są osadzone w obrazach, klienci z niedowidzeniem nie mogą dostosować prezentacji, aby czytać je z pewnością, co budzi obawy zarówno w kontekście okrężnika, jak i przepisów dotyczących ochrony konsumentów w usługach finansowych. Szpitale i świadczeniodawcy opieki zdrowotnej, którzy wyświetlają instrukcje dawkowania, szczegóły wizyt lub informacje dla pacjentów w formie obrazów, tworzą ryzyko dla bezpieczeństwa pacjentów, którzy nie mogą dostosować renderowania tekstu.

Organizacje, które chcą zabezpieczyć swoje zasoby cyfrowe na przyszłość przed ewolucją regulacyjną — lub te, które ubiegają się o zamówienia publiczne wymagające wykazania przywództwa w zakresie dostępności — powinny rozważyć audyt i naprawę naruszeń 1.4.9 jako część kompleksowego programu dostępności. SDK nakładki Accsible może pomóc w adaptacji tekstu w czasie rzeczywistym w niektórych starszych scenariuszach obrazów tekstu, ale trwała naprawa na poziomie kodu — zastąpienie obrazów tekstu prawdziwym tekstem HTML ostylowanym za pomocą CSS i webfontów — pozostaje najbardziej solidnym i trwałym rozwiązaniem dla długoterminowej zgodności.