Kryterium 1.4.10 – Reflow to wymóg WCAG 2.1 na poziomie AA, który dotyczy dostosowania strony internetowej do różnych rozmiarów ekranu, bez konieczności przewijania w poziomie. Celem jest zapewnienie, aby treści były czytelne i dostępne zarówno na komputerze, jak i na urządzeniach mobilnych – bez względu na poziom powiększenia.
W tym artykule pokażemy, jak samodzielnie sprawdzić, czy Twoja strona spełnia ten wymóg — bez potrzeby znajomości kodu.
Co oznacza „Reflow”?
Reflow (czyli „przepływ treści”) polega na tym, że po zmniejszeniu rozmiaru ekranu (np. na telefonie, tablecie albo przy powiększeniu strony do 400%) zawartość automatycznie dopasowuje się do dostępnej przestrzeni.
Strona nie powinna wymagać przewijania w poziomie, by przeczytać akapit tekstu, wypełnić formularz czy korzystać z menu. Dotyczy to w szczególności:
-
tekstów,
-
formularzy,
-
nawigacji,
-
przycisków,
-
grafik zawierających informacje.
Jak sprawdzić zgodność z kryterium 1.4.10 bez wiedzy technicznej?
1. Zmniejszenie szerokości okna przeglądarki
Co zrobić?
Na komputerze otwórz stronę internetową, a następnie zmniejsz szerokość okna przeglądarki (przeciągając krawędź okna w lewo). Zatrzymaj się, gdy szerokość okna będzie przypominała ekran telefonu (ok. 320–400 pikseli).
Na co zwrócić uwagę?
-
Czy treści dostosowują się automatycznie do nowej szerokości?
-
Czy wszystko mieści się w pionie, bez potrzeby przewijania w bok?
-
Czy tekst pozostaje czytelny i nie ucieka poza ekran?
-
Czy można swobodnie korzystać z formularzy, menu, przycisków?
Przykład błędu:
Strona zawiera blok tekstu, który wychodzi poza ekran i wymaga przewijania w poziomie, by przeczytać całość. To znak, że strona nie wspiera reflow.
2. Powiększenie zawartości do 400%
Co zrobić?
Użyj funkcji powiększania w przeglądarce:
-
Windows:
Ctrl++kilka razy, -
Mac:
Cmd++kilka razy.
Powiększ zawartość do 400% i sprawdź, czy strona nadal działa prawidłowo.
Na co zwrócić uwagę?
-
Czy wszystkie elementy pozostają widoczne i funkcjonalne?
-
Czy treści nadal układają się pionowo (zamiast „uciekać” w bok)?
-
Czy można nadal korzystać z formularzy i nawigacji?
Przykład błędu:
Po powiększeniu strona wymaga przewijania w poziomie, żeby zobaczyć całą treść formularza – to naruszenie kryterium 1.4.10.
Wyjątki – kiedy poziome przewijanie jest dopuszczalne?
WCAG dopuszcza poziome przewijanie tylko wtedy, gdy jest to technicznie uzasadnione. Dotyczy to m.in.:
-
dużych tabel danych,
-
map interaktywnych,
-
diagramów, wykresów i grafik, gdzie przewijanie w poziomie jest niezbędne do zrozumienia całości.
Dla takich elementów można zrobić wyjątek – ale reszta strony powinna zachowywać zasadę reflow.
Podsumowanie
Kryterium 1.4.10 – Reflow zapewnia, że Twoja strona będzie wygodna i dostępna niezależnie od urządzenia i rozmiaru ekranu. Dzięki niemu użytkownicy nie muszą przewijać w bok, aby korzystać z treści – co jest szczególnie ważne dla osób słabowidzących i korzystających z powiększenia.
Dobre praktyki:
-
Projektuj strony w sposób responsywny – by automatycznie dopasowywały się do różnych ekranów.
-
Testuj stronę na telefonie i tablecie.
-
Unikaj sztywnych szerokości (np. określanych w pikselach).
-
Regularnie sprawdzaj widoczność treści przy 400% powiększeniu.
Zadbaj o reflow, a Twoja strona będzie nie tylko bardziej dostępna, ale też nowocześniejsza i wygodniejsza dla wszystkich użytkowników – również tych bez specjalnych potrzeb.