SC 1.4.4 Poziom AA WCAG 2.0

Zmiana rozmiaru tekstu

Tekst musi pozostać czytelny i użyteczny po powiększeniu do 200% bez utraty treści lub funkcjonalności. Napisy rozszerzone i obrazy tekstu są zwolnione.

Czego wymaga kryterium

Gdy użytkownik powiększa tekst do 200% — za pomocą zoomu przeglądarki, skalowania tekstu w systemie operacyjnym lub gestu uszczypnięcia — strona musi nadal działać poprawnie. Bez przyciętego tekstu, bez nakładających się kontenerów, bez utraty funkcjonalności, bez konieczności przewijania poziomego w celu przeczytania zdań. Kryterium jest starsze od 1.4.10 Reflow, które jest bardziej rygorystyczne; spełnienie Reflow zazwyczaj oznacza automatyczne spełnienie 1.4.4.

Jak spełnić kryterium

Należy stosować jednostki względne (rem, em, %) dla rozmiarów czcionek i wysokości kontenerów, nie stałe wartości w pikselach, które nie mogą rosnąć.
Należy unikać stałych deklaracji height na kontenerach tekstowych — w razie potrzeby stosować min-height.
Nie należy ustawiać metatagów viewport blokujących powiększanie przez użytkownika (user-scalable=no lub maximum-scale=1).
Należy budować elastyczne układy (flexbox, CSS grid), aby kontenery rosły wraz z zawartością.
Należy przeprowadzić testy przy 200% powiększeniu przeglądarki na typowym ekranie biurkowym; sprawdzić, czy nagłówki, przyciski i pola formularzy nie nachodzą na siebie.

Częste błędy

<meta name="viewport" content="user-scalable=no"> blokujące powiększenie na urządzeniach mobilnych — wieloletnie naruszenie 1.4.4.
Przyciski ze stałą wysokością w pikselach, które przycinają etykietę tekstową przy 200% powiększeniu.
Menu nawigacyjne przepełniające kontener przy 200% i stające się nieosiągalne.
Okna modalne mierzone w pikselach, które nie mieszczą już swojej zawartości po powiększeniu.
Etykiety formularzy zawijające się w obszar kolejnego pola, gdy tekst rośnie.

Dlaczego to jest ważne

Osoby słabowidzące regularnie stosują powiększenie 150–200% jako codzienne ustawienie. Niespełnienie 1.4.4 oznacza, że użytkownicy ci albo nie mogą odczytać strony, albo muszą przewijać poziomo każdy wiersz — i w obu przypadkach ją porzucają. Naprawa polega zazwyczaj na przejściu z px na rem w tokenach projektowych — jednorazowy refaktoring.