Postrzegalność · Poziom AA

1.4.5 Obrazy tekstu

Gdy tekst może być prawdziwym tekstem, nie zamieniaj go w grafikę.

Krótko

Jeśli baner, przycisk, kafel albo nagłówek zawiera ważny tekst, zrób go jako tekst HTML i ostyluj CSS-em. Grafika z tekstem jest dopuszczalna głównie wtedy, gdy wygląd tekstu jest istotą informacji, na przykład w logo.

Problem w praktyce

Grafika z napisem „Promocja tylko dziś” wygląda ładnie, ale użytkownik nie może łatwo zmienić jej rozmiaru, koloru, fontu ani odstępów. Tekst w grafice może też stać się rozmazany przy powiększeniu.

To kryterium nie mówi o samym tekście alternatywnym. Tekst alternatywny może pomóc zrozumieć obraz, ale nie daje użytkownikowi kontroli nad wyglądem tekstu w grafice.

Kogo to dotyczy

  • Osób słabowidzących, które powiększają tekst albo zmieniają kolory.
  • Osób korzystających z trybów wysokiego kontrastu lub własnych arkuszy stylów.
  • Osób z dysleksją, które potrzebują innego fontu, odstępów albo koloru tła.
  • Użytkowników urządzeń mobilnych, gdzie obraz tekstu może być za mały lub niewyraźny.
  • Osób korzystających z tłumaczenia, kopiowania albo wyszukiwania tekstu na stronie.

Dobry przykład

  • Nagłówek promocji jest prawdziwym tekstem HTML na tle graficznym.
  • Przycisk ma tekst w elemencie `button` albo linku, a nie w pliku PNG.
  • Infografika ma tekstowe dane obok grafiki, jeśli dane są kluczowe.
  • CSS odpowiada za font, cień, kolor, tło i układ.
  • Logo pozostaje obrazem, jeśli specyficzny zapis nazwy jest częścią identyfikacji marki.

Zły przykład

  • Baner z tekstem „Zapisz się na szkolenie” jest jednym obrazem.
  • Przycisk „Kup teraz” jest obrazkiem bez prawdziwego tekstu w komponencie.
  • Karta produktu ma cenę i nazwę produktu wpisane w grafikę.
  • Komunikat administracyjny jest skanem albo obrazem zamiast treścią HTML.
  • Tekst alternatywny opisuje grafikę, ale użytkownik nadal nie może dostosować wyglądu tekstu.

Przykłady kodu

Zły przykład: baner jako obraz tekstu

Cały komunikat jest w pliku graficznym.

Kod — HTML

<img
  src="/assets/promocja-szkolenia.png"
  alt="Promocja: szkolenie WCAG 20% taniej tylko dziś"
>

Dlaczego to problem

Tekst jest ważną informacją, ale jest zamknięty w obrazie. Użytkownik nie może go wygodnie dostosować.

Dobry przykład: tekst HTML na tle graficznym

Obraz jest tłem, a informacja jest prawdziwym tekstem.

Kod — HTML

<section class="promo">
  <h2>Szkolenie WCAG 20% taniej</h2>
  <p>Promocja trwa tylko do końca dnia.</p>
  <a href="/szkolenia">Zapisz się na szkolenie</a>
</section>

Kod — CSS

.promo {
  background-image: url("/assets/promo-background.jpg");
  background-size: cover;
  color: white;
  padding: 2rem;
}

Logo może być obrazem, bo specyficzny wygląd napisu jest częścią marki.

Kod — HTML

<img
  src="/assets/logo-firmy.svg"
  alt="Accessibility First"
>

Uwaga

To nie znaczy, że każdy baner reklamowy może być obrazem tekstu. Wyjątek dotyczy sytuacji, w których wygląd tekstu jest istotny.

Przykład graficzny

Źle

Promocja tylko dziś

Tekst wygląda jak treść, ale jest częścią obrazu. Nie skaluje się i nie dopasuje do ustawień użytkownika tak jak prawdziwy tekst.

Dobrze

Promocja tylko dziś

Tekst jest HTML-em. CSS odpowiada za wygląd.

Użytkownik może powiększyć, skopiować, przetłumaczyć i ostylować tekst.

Statyczne demo pokazuje różnicę między tekstem zamkniętym w obrazie a prawdziwym tekstem ostylowanym CSS-em.

Jak sprawdzić

  1. Znajdź obrazy, banery, kafle, przyciski i infografiki, które zawierają tekst.
  2. Oceń, czy tekst przekazuje informację, instrukcję, nazwę, cenę, datę albo wezwanie do działania.
  3. Sprawdź, czy ten sam efekt można osiągnąć tekstem HTML i CSS.
  4. Jeśli tak, rekomenduj zamianę obrazu tekstu na prawdziwy tekst.
  5. Sprawdź, czy przypadek nie jest wyjątkiem: logo, próbka kroju pisma albo sytuacja, w której wygląd tekstu jest istotą informacji.
  6. Nie uznawaj samego tekstu alternatywnego za pełną poprawkę 1.4.5.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • obrazy z tekstem alternatywnym sugerującym, że obraz zawiera tekst,
  • część przypadków tekstu wykrytego OCR-em, jeśli narzędzie ma taką funkcję,
  • brak tekstu alternatywnego, ale to jest głównie temat 1.1.1.

Automat nie oceni pewnie

  • czy tekst w obrazie jest ważny, dekoracyjny czy istotny dla marki,
  • czy efekt wizualny da się rozsądnie odtworzyć CSS-em,
  • czy dany przypadek mieści się w wyjątku „essential”,
  • czy tekst alternatywny nie przykrywa realnego problemu z obrazem tekstu.

Typowe błędy

  • Projektowanie banerów z całym tekstem w PNG albo JPG.
  • Używanie obrazów jako przycisków z napisami.
  • Publikowanie skanów komunikatów, tabel albo instrukcji zamiast treści HTML.
  • Zakładanie, że `alt` rozwiązuje problem obrazów tekstu.
  • Wrzucanie tekstu do grafiki, bo „font wygląda dokładniej”.
  • Brak procesu redakcyjnego: grafika z tekstem trafia na stronę bez pytania, czy tekst może być HTML-em.