WCAG 1.4.10 Dopasowanie do ekranu (reflow) (AA) · aktualizacja
Strona nie mieści się na wąskim ekranie: reflow i powiększenie 400%
Przy szerokości 320 pikseli treść strony musi się mieścić bez przewijania w bok (WCAG 1.4.10). To tyle, ile ma mały telefon albo ekran komputera po powiększeniu do 400%. Wyjątkiem są tylko treści, które z natury potrzebują dwóch wymiarów: mapy, duże tabele danych, wykresy.
Komu to przeszkadza
Osoby słabowidzące, które powiększają stronę, żeby cokolwiek przeczytać. Jeśli po powiększeniu tekst ucieka w bok, każdą linijkę czytają, przewijając w lewo i w prawo. Przy opisie produktu na dwadzieścia linijek to męka.
Skąd się bierze
- Baner albo zdjęcie ze sztywną szerokością w pikselach (width: 800px).
- Tabela rozmiarów, która nie ma własnego przewijania.
- Długi adres e-mail albo link w stopce, który nie łamie się między wierszami.
- Blokada powiększania w meta viewport (user-scalable=no albo maximum-scale=1).
Poprawka w kodzie
Przed
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no">
<div class="baner" style="width:800px">...</div>Po
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="baner" style="max-width:100%">...</div>
<div class="tabela-rozmiarow" style="overflow-x:auto">...</div>Szeroką tabelę rozmiarów możesz zostawić szeroką. Wystarczy, że przewija się ona sama, a nie cała strona.
Jak sprawdzić to samodzielnie
- Na komputerze ustaw okno przeglądarki na szerokość 1280 px i powiększ stronę do 400% (Ctrl i plus).
- Albo w narzędziach deweloperskich ustaw widok na 320 px szerokości.
- Przewiń stronę główną, kartę produktu i koszyk. Pojawia się pasek przewijania w poziomie? To błąd.
Co wykryje skaner, a czego nie
Skaner wykryje
Axe wykryje blokadę powiększania w meta viewport. Dostepli dodatkowo zmienia szerokość okna na 320 px i wskazuje elementy, które wystają poza ekran.
Wymaga sprawdzenia przez człowieka
Automat nie oceni, czy przy powiększeniu nie zniknęła żadna treść ani funkcja, na przykład czy menu nadal da się otworzyć. To trzeba przeklikać.
Najczęstsze pytania
Skąd wzięło się 320 pikseli?
To szerokość ekranu komputera 1280 px po powiększeniu do 400%. WCAG przyjęło ją jako punkt odniesienia, bo odpowiada też najmniejszym popularnym telefonom.
Czy responsywna strona automatycznie spełnia to kryterium?
Zwykle w dużej części tak, ale pojedyncze elementy (tabele, osadzone filmy, długie adresy) często wystają. Dlatego warto sprawdzić kilka typów podstron, a nie tylko stronę główną.
Źródła
- [1] Understanding Success Criterion 1.4.10W3C Web Accessibility Initiative (WAI)
- [2] Web Content Accessibility Guidelines (WCAG) 2.2W3C (World Wide Web Consortium)
- [3] Understanding Success Criterion 2.5.8W3C Web Accessibility Initiative (WAI)