Poziome przewijanie na urządzeniach mobilnych

Silktide sprawdza, czy strony przewijają się w poziomie na telefonach komórkowych. Treść powinna mieścić się w szerokości małego ekranu, aby użytkownicy musieli przewijać ją wyłącznie w dół.

Dlaczego to ważne

Gdy strona jest szersza niż ekran, część każdej linii tekstu znajduje się poza widocznym obszarem, a czytelnik musi przesuwać widok tam i z powrotem, aby śledzić treść. Jest to męczące dla wszystkich i stanowi prawdziwą barierę dla osób słabowidzących (które często dodatkowo powiększają stronę) oraz osób z niepełnosprawnościami ruchowymi. Kryterium sukcesu WCAG 1.4.10 (Dopasowanie do ekranu, standardu ) wymaga, aby treść mieściła się na ekranie o szerokości 320 pikseli bez przewijania w dwóch wymiarach.

Zwykle sama strona jest w porządku, a przepełnienie powoduje jeden element — szeroka tabela, obraz o stałej szerokości, osadzony film lub długi ciąg znaków bez możliwości podziału, taki jak adres URL.

Jak to naprawić

Otwórz stronę na telefonie (lub zwęź okno przeglądarki do 320 pikseli) i znajdź element wystający poza prawą krawędź.
Napraw problematyczny element za pomocą responsywnego :

/* Element o stałej szerokości sprawia, że strona jest szersza niż ekran */
img.hero { width: 600px; }

/* Poprawka: zmniejsza się, aby dopasować się do wąskich ekranów */
img.hero { max-width: 100%; height: auto; }

W przypadku szerokich tabel z danymi pozwól tabeli przewijać się wewnątrz własnego kontenera (overflow-x: auto), aby pozostała część strony nadal mieściła się na ekranie.
Treść, która rzeczywiście wymaga układu dwuwymiarowego, na przykład mapy i diagramy, może być przewijana — jeśli wynik pokazuje tylko takie przypadki, możesz go .

Jak Silktide przeprowadza tę kontrolę

Wczytaj stronę jako urządzenie mobilne.
Zmierz, jak daleko strona wykracza poza prawą krawędź ekranu. Przepełnienie mniejsze niż 10 pikseli jest ignorowane jako błąd zaokrąglenia.
Sklasyfikuj przepełnienie według liczby urządzeń, których dotyczy — od niewielkiego przepełnienia dotyczącego tylko małych telefonów (o szerokości 320 pikseli, takich jak iPhone 5) po przepełnienie wystarczająco duże, aby dotyczyć dużych telefonów (o szerokości 414 pikseli, takich jak iPhone 7 Plus).

Rozwiązywanie problemów

Powiązana kontrola projektu mobilnego

Ta kontrola zgłasza poziome przepełnienie na stronach, które poza tym są przyjazne urządzeniom mobilnym. Strony, które w ogóle nie próbują obsługiwać urządzeń mobilnych — bez , z małym tekstem i skrajnym przepełnieniem — są zamiast tego zgłaszane przez kontrolę Powiększanie i przewijanie na urządzeniach mobilnych, gdzie rozwiązaniem jest responsywne przeprojektowanie.

Nie widzę żadnego przewijania

Niewielkie przepełnienia mogą być niewidoczne na większych telefonach. Testuj przy szerokości 320 pikseli — narzędzia programistyczne przeglądarki pozwalają ustawić dokładną szerokość — i szukaj wszystkiego, co przekracza prawą krawędź.