Powiększanie treści i wąskie ekrany: dwa kryteria, jedna poprawka
Czego wymagają kryteria
Kryterium 1.4.4 wymaga, aby treść dawała się powiększyć do 200 procent bez utraty treści i funkcji. Kryterium 1.4.10, zwane reflow, wymaga, aby przy szerokości odpowiadającej 320 pikselom treść nie wymagała przewijania w dwóch kierunkach jednocześnie.
Te 320 pikseli to nie jest wymysł. To szerokość, jaką widzi użytkownik ekranu o szerokości 1280 pikseli po powiększeniu strony do 400 procent. Innymi słowy kryterium dotyczy w równym stopniu osoby słabowidzącej przy dużym monitorze i osoby na małym telefonie.
Najczęstszy błąd: blokada powiększania
Spotykany w wielu polskich sklepach zapis blokuje powiększanie na telefonie:
<!-- źle: użytkownik nie powiększy strony -->
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
<!-- dobrze -->
<meta name="viewport" content="width=device-width, initial-scale=1">
Ta jedna linijka bywa dodawana, żeby układ się nie rozjeżdżał. Skutek jest taki, że osoba, która potrzebuje powiększenia, nie może z serwisu skorzystać.
Jak sprawdzić u siebie
Zwęź okno przeglądarki do 320 pikseli albo powiększ stronę do 400 procent skrótem Ctrl i plus. Jeżeli pojawia się poziomy pasek przewijania, a treść trzeba przesuwać w bok, żeby przeczytać zdanie, kryterium nie jest spełnione.
Co zwykle jest przyczyną
- Sztywne szerokości podane w pikselach zamiast szerokości elastycznych.
- Tabele o wielu kolumnach, które nie zawijają się na wąskim ekranie.
- Układy wielokolumnowe bez zawijania.
- Obrazy bez ograniczenia maksymalnej szerokości.
.kontener { max-width: 100%; }
.uklad { display: flex; flex-wrap: wrap; }
img { max-width: 100%; height: auto; }
Wyjątkiem, w którym przewijanie poziome jest dopuszczalne, są treści wymagające układu dwuwymiarowego, na przykład duże tabele danych czy mapy.