WCAG 1.4.4 Zmiana rozmiaru tekstu

Kryterium sukcesu 1.4.4 pozwala osobom słabowidzącym powiększyć tekst bez specjalnego oprogramowania i nadal korzystać ze strony. Wielu starszych odwiedzających po prostu naciska Ctrl i + albo rozsuwa palce na telefonie. To poziom AA i część normy EN 301 549 (punkt 9.1.4.4); na tej normie opiera się też polska ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze.

Czego wymaga kryterium

Rozmiar tekstu można zmienić bez technologii wspomagających do 200 procent bez utraty treści lub funkcjonalności.

• Liczy się każdy mechanizm skalowania tekstu obsługiwany przez przeglądarkę, w tym powiększenie całej strony; nie są potrzebne własne przyciski „A+”.
• Przy 200 % cały tekst musi pozostać widoczny i czytelny, a wszystkie funkcje muszą działać: bez uciętego lub nachodzącego na siebie tekstu, bez przycisków wypchniętych poza ekran lub schowanych za innymi elementami.

Wyjątki: napisy rozszerzone i obrazy tekstu (o obrazach tekstu mówi 1.4.5).

Typowe błędy w sklepie internetowym

• metatag viewport zawiera user-scalable=no lub maximum-scale=1, przez co powiększanie gestem nie działa na telefonach;
• tekst w przyciskach, plakietkach lub kartach jest ucięty, bo ich kontenery mają stałą wysokość lub szerokość;
• przyklejony nagłówek i pasek cookies rosną przy 200 % tak bardzo, że zasłaniają większość ekranu;
• menu rozwijane lub minikoszyk stają się nieosiągalne przy większych rozmiarach;
• rozmiary czcionek wyłącznie w jednostkach widoku (vw), przez co tekst nie rośnie przy powiększeniu.

Jak to sprawdzić

Automatycznie: nasz skaner oznacza metatag viewport, który wyłącza powiększanie lub ogranicza je poniżej 2× (reguła meta viewport). To, czy przy 200 % treść zostaje utracona, zależy od układu i wymaga ręcznej kontroli.

Ręcznie: w oknie przeglądarki na komputerze o szerokości około 1280 px powiększyć do 200 % i przejść przez główne zadania: wyszukiwanie, otwarcie produktu, wybór opcji, dodanie do koszyka, złożenie zamówienia. Szukać uciętego tekstu, nakładania się elementów i wszystkiego, do czego nie da się dotrzeć. Na telefonie sprawdzić, czy działa powiększanie gestem. Powiększanie samego tekstu (w Firefoksie „Powiększaj tylko tekst”) to bardziej rygorystyczny dodatkowy test.

Jak to naprawić

• Usunąć user-scalable=no i maximum-scale z metatagu viewport.
• Stosować jednostki względne (rem, em) dla rozmiarów czcionek i unikać stałych wysokości elementów zawierających tekst.
• Pozwolić przyciskom, etykietom i plakietkom zawijać się do dwóch wierszy zamiast ucinać tekst.
• Utrzymywać przyklejone nagłówki niewielkie przy dużym powiększeniu albo wyłączać przyklejanie na niskich ekranach.

Powiązane kryteria

• 1.4.10 Dopasowanie do ekranu — brak przewijania w poziomie przy powiększeniu 400 %.
• 1.4.12 Odstępy w tekście — większa interlinia i odstępy między literami bez utraty treści.
• 1.4.5 Obrazy tekstu — tekst na obrazach słabo się skaluje.

Najczęstsze pytania

Czy powiększenie w przeglądarce wystarcza do spełnienia 1.4.4?

Tak, powiększenie strony w przeglądarce jest uznanym sposobem zmiany rozmiaru tekstu. Strona musi pozostać użyteczna przy 200 %: bez uciętego tekstu, nachodzących na siebie elementów i ukrytych przycisków.

Czy WCAG określa minimalny rozmiar czcionki?

Nie. WCAG 2.2 nie ma minimalnego rozmiaru czcionki. 1.4.4 wymaga, by tekst dało się powiększyć do 200 %, a 1.4.3 określa kontrast tekstu niezależnie od jego rozmiaru.

Czy user-scalable=no to błąd?

Metatag viewport, który wyłącza lub ogranicza powiększanie (user-scalable=no lub niska wartość maximum-scale), uniemożliwia użytkownikom telefonów powiększanie tekstu i jest zgłaszany w ramach tego kryterium.

Jak przetestować WCAG 1.4.4?

Ustawić okno przeglądarki o szerokości 1280 px, powiększyć do 200 % i przejść przez kluczowe strony i zadania. Wszystko musi nadal być czytelne i działać.