- Poziom
- AA
- Od wersji
- WCAG 2.1
- Pozycje
- 10 / 193
1.4.10 Dopasowanie do ekranu
Strona musi działać w widoku o szerokości 320 pikseli CSS bez zmuszania czytelnika do przewijania jednocześnie w dół i w bok.
/ Czego wymaga
Osoby powiększające ekran potrzebują, żeby strona się przeorganizowała, a nie tylko urosła. Przy powiększeniu 400 procent okno o szerokości 1280 pikseli zachowuje się jak widok o szerokości 320 pikseli CSS, czyli jak mały telefon. Jeśli układ zachowuje szerokość z komputera, każdy wiersz wychodzi poza ekran i trzeba go czytać, przewijając w prawo i z powrotem, zdanie po zdaniu. Treść ginie też wtedy, gdy szerokie bloki są ucinane albo przypięte paski zasłaniają większość widoku.
Kryterium wymaga, by treść dało się przedstawić bez utraty informacji i funkcjonalności oraz bez przewijania w dwóch wymiarach: przy szerokości 320 pikseli CSS dla stron przewijanych w pionie i przy wysokości 256 pikseli CSS dla treści przewijanej w poziomie. Wyłącza części, które do użycia lub zrozumienia wymagają układu dwuwymiarowego: mapy, diagramy, wideo, gry, tabele danych i interfejsy, w których pasek narzędzi musi być widoczny podczas edycji. Te części mogą przewijać się w obu kierunkach; strona wokół nich nie.
/ Jak strony go nie spełniają
- Układ ma stałą szerokość w pikselach, więc strona przewija się w bok przy powiększeniu 400 procent albo na wąskim ekranie.
- Strona nie ma znacznika meta viewport, więc przeglądarki mobilne renderują ją w szerokości komputerowej i pomniejszają.
- Długi adres URL, szeroki obraz albo blok preformatowany rozpycha stronę ponad szerokość widoku.
- Treść, która przestaje się mieścić, jest ucinana przez overflow: hidden, więc tekst lub kontrolki znikają, zamiast się zawijać.
- Przyklejony nagłówek, baner cookies i widżet czatu zasłaniają razem większość widoku o szerokości 320 pikseli.
/ Jak sprawdzić samodzielnie
- Ustaw okno przeglądarki na szerokość 1280 pikseli i powiększ do 400 procent klawiszami Ctrl i plus. Przewiń całą stronę i wypatruj poziomego paska przewijania.
- Albo otwórz narzędzia deweloperskie, przełącz na tryb responsywny i ustaw widok na 320 na 256 pikseli.
- W tym rozmiarze otwórz każde menu, okno dialogowe, formularz i akordeon i sprawdź, czy nic nie jest ucięte i czy do każdej kontrolki da się dotrzeć.
- Gdy coś przewija się w bok, oceń, czy to część objęta wyjątkiem, na przykład tabela danych lub mapa. Jeśli razem z nią przewija się cała strona, to nie jest wyjątek.
- Otwórz źródło strony i upewnij się, że w sekcji head jest znacznik meta viewport.
/ Jak to naprawić
- Dodaj do sekcji head znacznik meta name="viewport" content="width=device-width, initial-scale=1".
- Zamień stałe wartości width na max-width i procenty, a kolumny buduj z flex-wrap: wrap albo siatką z auto-fit i minmax().
- Ustaw max-width: 100% dla img, video i iframe oraz overflow-wrap: anywhere dla tekstu, w którym mogą wystąpić długie ciągi znaków.
- Szerokie tabele i bloki kodu umieść w kontenerze z overflow-x: auto, żeby przewijały się we własnym polu.
- W wąskim widoku przełącz przyklejone nagłówki i banery na position: static albo zmniejsz ich wysokość.
/ Co sprawdza nasz skaner
Skan statyczny sprawdza tu jedno: czy źródło strony zawiera znacznik meta viewport, i zgłasza stronę, gdy go brakuje. Nie ładuje strony w szerokości 320 pikseli, więc przewijanie w bok, ucięta treść i zbyt duże przyklejone paski nie są przez tę kontrolę wykrywane. Brak znacznika to mocna wskazówka, że układ nie dopasuje się na telefonie, a nie pomiar tego zjawiska.
/ Kto je łamie, według naszych pomiarów
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| Federal Aviation Administration | transport · US | 1 | 14 |
| Gorzów Wielkopolski | city · PL | 1 | 66 |
| Kielce | city · PL | 1 | 71 |
| Miami-Dade County | government · US | 1 | 20 |
| National Weather Service | government · US | 1 | 34 |
| New York Public Library | culture · US | 1 | 23 |
| Sejm RP | government · PL | 1 | 9 |
| Social Security Administration | government · US | 1 | - |
| Sąd Najwyższy | government · PL | 1 | 14 |
| Zarząd Transportu Miejskiego Warszawa | transport · PL | 1 | 77 |
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
Jak sprawdzić dopasowanie do ekranu przy powiększeniu 400 procent?
Ustaw okno przeglądarki na szerokość 1280 pikseli CSS, a potem powiększ do 400 procent. Widok ma teraz 320 pikseli CSS szerokości, czyli rozmiar podany w kryterium. Przejdź stronę od góry do dołu, otwierając po drodze menu i formularze. Poza częściami objętymi wyjątkiem, takimi jak tabele danych i mapy, nic nie powinno wymagać przewijania w poziomie i nic nie powinno znikać.
Dlaczego WCAG podaje 320 pikseli CSS?
Bo 320 pikseli CSS to tyle, ile zostaje z widoku o szerokości 1280 pikseli przy powiększeniu 400 procent, a zarazem szerokość małego telefonu trzymanego pionowo. To samo rozumowanie daje 256 pikseli CSS, czyli widok o wysokości 1024 pikseli przy 400 procentach, dla treści przewijanej w poziomie. Układ responsywny, który działa na małym telefonie, zwykle spełnia oba warunki.
Czy tabele danych muszą dopasowywać się do ekranu?
Nie. Kryterium wymienia tabele danych jako treść wymagającą układu dwuwymiarowego, więc tabela może przewijać się w poziomie. Wyjątek dotyczy tabeli, a nie strony: umieść ją w kontenerze z własnym paskiem przewijania, żeby tekst wokół nadal mieścił się w widoku. Zawartość każdej komórki powinna się nadal zawijać, a tabela użyta wyłącznie do układu nie jest objęta wyjątkiem.