WCAG 1.4.5: Obrazy tekstu

Wprowadzenie do Kryterium Sukcesu WCAG 1.4.5: Obrazy tekstu

Kryterium sukcesu 1.4.5 Obrazy tekstu (otwiera nową kartę) (poziom AA) jest kluczowym elementem Wytycznych dla Dostępności Treści Internetowych (WCAG) 2.0 i 2.1, mającym na celu zapewnienie, że informacje tekstowe są dostępne dla jak najszerszej grupy użytkowników.

Główna zasada tego kryterium jest prosta: jeżeli technologie pozwalają, do przekazywania informacji należy używać tekstu zamiast obrazów tekstu. Oznacza to, że wszędzie tam, gdzie jest to możliwe, zamiast osadzać tekst w pliku graficznym (np. PNG, JPG, GIF), należy używać rzeczywistego tekstu HTML, który może być stylizowany za pomocą CSS.

Dlaczego kryterium 1.4.5 ma znaczenie?

Zgodność z kryterium 1.4.5 jest fundamentalna dla zapewnienia kompleksowej dostępności treści cyfrowych. Obrazy tekstu stwarzają liczne bariery, które skutecznie eliminują prawdziwy tekst HTML/CSS.

Wpływ na dostępność i grupy użytkowników

• Użytkownicy z wadami wzroku:
  • Skalowanie: Rzeczywisty tekst można dowolnie skalować (powiększać) bez utraty jakości i pikselizacji, co jest kluczowe dla osób słabowidzących. Obrazy tekstu często stają się rozmyte lub zniekształcone przy powiększeniu.
  • Personalizacja: Użytkownicy mogą dostosowywać wygląd tekstu (rozmiar, kolor, kontrast, krój czcionki, odstępy między wierszami) za pomocą własnych arkuszy stylów CSS, co jest niemożliwe w przypadku tekstu w obrazach.
• Użytkownicy czytników ekranu: Czytniki ekranu nie potrafią "czytać" tekstu zawartego w obrazach, chyba że zostanie on udostępniony w alternatywnym tekście (alt). Nawet wtedy jest to gorsze rozwiązanie niż bezpośredni dostęp do tekstu.
• Użytkownicy z dysleksją lub zaburzeniami poznawczymi: Możliwość zmiany kroju czcionki na bardziej czytelny lub zwiększenie odstępów między literami i wyrazami znacząco poprawia komfort i efektywność czytania.
• Użytkownicy urządzeń mobilnych: Rzeczywisty tekst lepiej adaptuje się do różnych rozmiarów ekranów i rozdzielczości (responsywność), zapewniając optymalne wrażenia wizualne bez konieczności przewijania w poziomie.
• Inne korzyści:
  • SEO: Wyszukiwarki indeksują rzeczywisty tekst, co poprawia widoczność strony.
  • Tłumaczenie: Tekst HTML może być łatwo przetłumaczony przez automatyczne narzędzia, czego nie można zrobić z tekstem w obrazach.
  • Wydajność: Często ładowanie czcionek i renderowanie tekstu HTML jest szybsze niż pobieranie dużych plików graficznych.

Kryterium sukcesu 1.4.5: Obrazy tekstu (Poziom AA) – Szczegółowe wymagania

Oto dokładne brzmienie kryterium oraz jego wyjątki:

Kryterium Sukcesu 1.4.5 (Obrazy tekstu): Jeżeli technologie pozwalają, do przekazywania informacji należy używać tekstu zamiast obrazów tekstu.Wyjątki:

• Dekoracyjne: Obraz tekstu jest używany wyłącznie do celów dekoracyjnych i jego konkretna prezentacja wizualna nie jest niezbędna dla przekazywanych informacji. W takim przypadku, jeśli obraz zawiera tekst, a jego wizualna prezentacja nie jest kluczowa dla zrozumienia treści, można go użyć, ale zaleca się alternatywne rozwiązania (np. puste atrybuty alt="" dla obrazów bez znaczenia informacyjnego).
• Niezbędne: Konkretna prezentacja tekstu jest niezbędna dla przekazywanych informacji. Obejmuje to:
  • Logotypy i nazwy marek: Nazwy firm i logo, które są przedstawiane jako obrazy.
  • Części zdjęcia: Tekst, który jest integralną częścią zdjęcia (np. tabliczka znamionowa na maszynie).
  • Specjalistyczne notacje: Tekst w specyficznych formatach (np. równania matematyczne, chińskie znaki kaligraficzne), gdzie renderowanie jako prawdziwy tekst HTML jest technicznie trudne lub niemożliwe bez utraty znaczenia.
• Dostosowywalne: Obraz tekstu może być wizualnie dostosowany do wymagań użytkownika. Oznacza to, że użytkownik może zmienić jego wygląd (np. rozmiar, kolor). Ten wyjątek jest rzadziej spotykany w praktyce dla prostych obrazów tekstu i wymaga zaawansowanych rozwiązań.

Praktyczne wskazówki dla zgodności

Aby spełnić wymagania kryterium 1.4.5, należy przede wszystkim dążyć do używania rzeczywistego tekstu.

• Zawsze preferuj tekst HTML/CSS: Zamiast tworzyć obraz z nagłówkiem, menu nawigacyjnym czy ważnym komunikatem, użyj odpowiednich znaczników HTML (<h1>, <p>, <a>, <span>) i stylizuj je za pomocą CSS.
• Używaj czcionek internetowych (Web Fonts): Dzięki @font-face w CSS możesz używać niestandardowych czcionek, aby osiągnąć pożądany wygląd bez uciekania się do obrazów tekstu.
• Zapewnij alternatywny tekst dla obrazów tekstowych (jeśli niezbędne): Jeżeli użycie obrazu tekstu jest uzasadnione wyjątkiem (np. logo), upewnij się, że atrybut alt obrazu zawiera równoważną informację tekstową.

  <img src="logo.png" alt="Nazwa Firmy - Strona Główna">
  Skopiuj tekst

• Rozważ SVG dla złożonej typografii: Skalowalna Grafika Wektorowa (SVG) może zawierać rzeczywisty tekst HTML lub tekst osadzony w elemencie <text>, który jest dostępny dla technologii wspomagających i skalowalny.
• Unikaj tekstu nałożonego na złożone tła w obrazach: Jeśli tekst jest częścią większego obrazu (np. banera promocyjnego), postaraj się umieścić go jako rzeczywisty tekst HTML/CSS na obrazie, a nie osadzić go w pliku graficznym.

Przykłady implementacji

Poprawne implementacje

W tych przykładach tekst jest renderowany za pomocą HTML i CSS, co zapewnia pełną dostępność.

<h1 style="font-family: 'Open Sans', sans-serif; color: #333; font-size: 2.5em; text-transform: uppercase;">Witamy na naszej stronie</h1>
Skopiuj tekst

<a href="#o-nas" class="button">Dowiedz się więcej o nas</a>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
  }
</style>
Skopiuj tekst

<svg width="200" height="50" viewBox="0 0 200 50" aria-labelledby="svgTitle">
  <title id="svgTitle">Nasz nagłówek SVG</title>
  <text x="10" y="30" font-family="Verdana" font-size="20" fill="purple">Tekst w SVG</text>
</svg>
Skopiuj tekst

Niepoprawne implementacje

Te przykłady naruszają kryterium 1.4.5, ponieważ przekazują informację tekstową za pomocą obrazu, mimo że można użyć rzeczywistego tekstu.

<img src="naglowek-witamy.png" alt="Witamy na naszej stronie">
Skopiuj tekst

<img src="cena-promocyjna.jpg" alt="Cena specjalna: 99.99 PLN">
Skopiuj tekst

.button-img {
  width: 150px;
  height: 40px;
  background-image: url('button-text.png'); /* Obraz zawiera tekst np. "Wyślij" */
  background-size: cover;
  text-indent: -9999px; /* Tekst HTML ukryty poza ekranem, obraz tła dostarcza tekst */
  overflow: hidden;
}
<a href="#" class="button-img">Wyślij</a>
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki

• Priorytet dla tekstu HTML: Zawsze zaczynaj od myśli, czy dana informacja może być przedstawiona jako rzeczywisty tekst.
• Wykorzystanie CSS i Web Fonts: Używaj CSS do stylizacji tekstu i web fontów do implementacji niestandardowej typografii.
• Testowanie skalowalności: Sprawdź, jak strona wygląda przy powiększeniu tekstu (np. 200%) oraz przy powiększeniu całej strony, aby upewnić się, że tekst pozostaje czytelny.
• Współpraca z projektantami: Edukuj zespoły projektowe na temat znaczenia używania rzeczywistego tekstu w projektach graficznych.

Typowe pułapki

• Wizualne efekty ponad dostępnością: Projektanci mogą faworyzować złożone efekty typograficzne, które są łatwiejsze do osiągnięcia w edytorach graficznych, co prowadzi do tworzenia obrazów tekstu.
• Błędne interpretowanie wyjątków: Nadużywanie wyjątków "dekoracyjne" lub "niezbędne" do uzasadnienia użycia obrazów tekstu tam, gdzie nie jest to konieczne.
• Dynamika treści: Generowanie obrazów zawierających tekst "w locie" (np. wykresy z etykietami, certyfikaty) bez zapewnienia dostępnego tekstu alternatywnego lub samej możliwości dostępu do tekstu.
• Zaniedbanie SVG: Użycie SVG, ale osadzenie tekstu jako ścieżek graficznych zamiast elementów <text>, co czyni go niedostępnym dla czytników ekranu.