- Poziom
- AA
- Od wersji
- WCAG 2.0
- Pozycje
- 11 / 193
1.4.4 Zmiana rozmiaru tekstu
Odwiedzający musi móc powiększyć tekst dwukrotnie bez utraty treści i funkcji.
/ Czego wymaga
Osoby słabowidzące powiększają tekst, najczęściej zwykłym powiększeniem w przeglądarce. Strona musi to wytrzymać do 200 procent: cały tekst nadal jest na miejscu, nic nie jest ucięte ani nie nachodzi na siebie, każdy przycisk i formularz dalej działa. Gdy witryna blokuje powiększanie na telefonie albo pola o stałej wysokości połykają powiększone wiersze, odwiedzającemu zostaje wybór między tekstem zbyt małym, by go przeczytać, a stroną, która przestała działać.
Kryterium mówi, że rozmiar tekstu można zwiększyć do 200 procent bez technologii wspomagających i bez utraty treści lub funkcjonalności. Wyłącza napisy rozszerzone i obrazy tekstu. Nie wymaga, by układ pozostał w jednej kolumnie: przewijanie w poziomie przy 200 procentach nie jest tu błędem, a wąskimi widokami zajmuje się kryterium 1.4.10. Powiększenie całej strony w przeglądarce jest uznanym sposobem spełnienia wymogu, o ile strona go nie blokuje i nie psuje się pod jego wpływem.
/ Jak strony go nie spełniają
- Znacznik meta viewport zawiera user-scalable=no albo maximum-scale poniżej 2, co blokuje powiększanie gestem na telefonach.
- Tekst znajduje się w kontenerach o stałej wysokości z overflow: hidden, więc powiększone wiersze są ucinane.
- Rozmiar czcionki jest podany wyłącznie w jednostkach widoku, na przykład font-size: 2vw, więc tekst nie rośnie przy powiększaniu strony.
- Powiększony tekst nachodzi na sąsiednią treść, bo elementy są pozycjonowane absolutnie z przesunięciami w pikselach.
- Tekst w polach formularzy i na przyciskach zachowuje rozmiar, gdy tekst wokół rośnie.
/ Jak sprawdzić samodzielnie
- W przeglądarce na komputerze naciskaj Ctrl i plus (Cmd i plus na Macu), aż powiększenie pokaże 200 procent. Przeczytaj każdą sekcję i użyj każdej kontrolki.
- W Firefoksie włącz Widok, Powiększenie, Powiększaj tylko tekst i powtórz test. Wtedy rośnie sam tekst i wychodzą na jaw pola o stałej wysokości.
- Na telefonie powiększ stronę gestem dwóch palców. Jeśli strona nie reaguje, otwórz źródło i odczytaj zawartość znacznika meta viewport.
- Szukaj uciętych wierszy, nachodzących na siebie bloków, tekstu schowanego pod innymi elementami i przycisków, które znalazły się poza zasięgiem.
/ Jak to naprawić
- Zapisz znacznik jako meta name="viewport" content="width=device-width, initial-scale=1" i usuń user-scalable=no oraz maximum-scale.
- Podawaj font-size w rem lub em. Jeśli używasz jednostek widoku, połącz je z wartością w rem, na przykład clamp(1rem, 0.8rem + 1vw, 1.5rem).
- Zamień height na min-height we wszystkim, co zawiera tekst, i pozwól kontenerom rosnąć.
- Używaj line-height bez jednostki, na przykład 1.5, żeby interlinia skalowała się razem z tekstem.
- Nadaj kontrolkom formularzy font: inherit, żeby ich tekst podążał za rozmiarem strony.
/ Co sprawdza nasz skaner
Skan statyczny odczytuje znacznik meta viewport w źródle strony i zgłasza go, gdy jego zawartość zawiera user-scalable=no albo maximum-scale=1. To cała kontrola po stronie serwera: strona nie jest powiększana, więc tekst ucięty, nachodzący na siebie albo utracony przy 200 procentach pozostaje niezauważony, podobnie jak tekst o rozmiarze w jednostkach widoku. Takie błędy trzeba znaleźć, powiększając stronę ręcznie.
/ Kto je łamie, według naszych pomiarów
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| Bundesministerium des Innern | government · DE | 1 | 10 |
| Deutsche Nationalbibliothek | culture · DE | 1 | 23 |
| Deutsche Rentenversicherung | government · DE | 1 | 5 |
| Los Angeles County | government · US | 1 | 9 |
| Narodowy Instytut Dziedzictwa | culture · PL | 1 | 6 |
| PKP Intercity | transport · PL | 1 | 2 |
| Polski Instytut Sztuki Filmowej | culture · PL | 1 | 7 |
| Prezydent RP | government · PL | 1 | 15 |
| Statistisches Bundesamt | government · DE | 1 | 9 |
| Uniwersytet Jagielloński | education · PL | 1 | 1 |
| Warszawa | city · PL | 1 | 20 |
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy user-scalable=no narusza WCAG?
Jest traktowane jako naruszenie 1.4.4, gdy uniemożliwia powiększenie tekstu do 200 procent, a tak działa w przeglądarkach mobilnych, które to ustawienie respektują. To samo dotyczy wartości maximum-scale poniżej 2. Niektóre przeglądarki ignorują oba ustawienia, ale zgodność nie może się na tym opierać. Usuń je: znacznikowi viewport wystarczą width=device-width i initial-scale=1.
Czy powiększenie w przeglądarce wystarczy do spełnienia 1.4.4?
Tak, o ile strona działa przy powiększeniu 200 procent. Kryterium wymaga, by rozmiar tekstu dało się zmienić bez technologii wspomagających, a powiększenie jest funkcją przeglądarki, nie narzędziem wspomagającym. Witryna nie potrzebuje własnych przycisków zmiany rozmiaru tekstu. Nie może natomiast blokować powiększania ani tracić treści i funkcji, gdy ktoś z niego korzysta.
Czym różni się 1.4.4 Zmiana rozmiaru tekstu od 1.4.10 Dopasowanie do ekranu?
1.4.4 dotyczy rozmiaru: tekst powiększony do 200 procent ma pozostać kompletny, a strona ma nadal działać; przewijanie w bok jest dopuszczalne. 1.4.10 dotyczy układu: przy szerokości 320 pikseli CSS, co odpowiada powiększeniu 400 procent w oknie o szerokości 1280 pikseli, treść ma się mieścić bez przewijania w dwóch kierunkach. Strona może spełniać pierwsze kryterium i nadal naruszać drugie.