Przepływ

Czego wymaga kryterium

Gdy szerokość obszaru widoku wynosi 320 pikseli CSS — co odpowiada pulpitowi 1280 px przy powiększeniu 400% lub małemu urządzeniu mobilnemu — treść musi przeformatować się do jednej kolumny bez konieczności poziomego przewijania. Użytkownik nie powinien nigdy musieć przewijać jednocześnie w pionie i w poziomie, aby przeczytać ciągłą treść. Dopuszczone są uzasadnione wyjątki: tabele danych, złożone mapy, przykłady kodu i prezentacje, w których dwukierunkowe przewijanie jest fundamentalne dla treści.

Jak spełnić kryterium

• Należy budować układ metodą mobile-first z użyciem flexbox lub CSS grid, które przy małych szerokościach zwijają się do jednej kolumny.
• Należy testować przy dokładnie 320 px szerokości obszaru widoku — lub przy powiększeniu 400% okna 1280 px — i sprawdzać każdą stronę.
• Należy stosować max-width: 100% na obrazach, filmach i osadzonych mediach, by zmniejszały się wraz z obszarem widoku.
• W przypadku nawigacji należy zwinąć poziome menu desktopowe do pionowego menu mobilnego przy odpowiednim punkcie przełamania.
• Dla tabel danych należy dopuścić poziome przewijanie wewnątrz kontenera z overflow-x: auto — sama tabela jest zwolniona z wymogu, lecz jej kontener nie powinien rozszerzać strony w bok.
• Nie należy używać stałych szerokości w pikselach dla kontenerów treści ani modalnych okien dialogowych.

Typowe błędy

• Sekcje hero ze stałą szerokością (width: 1200px), które przy 320 px wychodzą poza obszar widoku i wymuszają poziome przewijanie.
• Okna modalne wymiarowane w vw lub px, przekraczające 320 px szerokości i obcinane na małych ekranach.
• Przykłady kodu w blokach <pre> bez zawijania ani kontenerów przewijania, rozszerzające stronę w bok.
• Strony marketingowe z absolutnie pozycjonowanymi elementami dekoracyjnymi nieuwzględniającymi wąskich obszarów widoku.
• Elementy przyklejone (sticky), które przy powiększeniu 400% nakładają się na treść, ponieważ były wymiarowane dla pełnoekranowego obszaru widoku.
• Tabele niezapakowane w kontener overflow, przez co cała strona przewija się poziomo zamiast samej tabeli.

Dlaczego to ważne

Przepływ to kryterium, które wykrywa większość witryn „responsywnych, ale nie naprawdę responsywnych” — układ łamiący się przy 320 pikselach CSS to układ łamiący się przy powiększeniu 400% dla użytkownika słabowidzącego na komputerze stacjonarnym. Oba przypadki są matematycznie identyczne. Naprawa przepływu oznacza zazwyczaj wzmocnienie responsywnego projektu, który był już w większości gotowy — co czyni to kryterium jedną z najbardziej opłacalnych poprawek WCAG.