WCAG 1.4.10 Dopasowanie do ekranu

Kryterium sukcesu 1.4.10 pomaga osobom słabowidzącym, które mocno powiększają stronę. Gdy treść układa się w jedną kolumnę, przewijają tylko w jednym kierunku; gdy nie — muszą przewijać w lewo i w prawo przy każdym wierszu. Kryterium dodano w WCAG 2.1, ma poziom AA i jest częścią normy EN 301 549 (punkt 9.1.4.10); na tej normie opiera się też polska ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze.

Czego wymaga kryterium

Treść można przedstawić bez utraty informacji lub funkcjonalności i bez konieczności przewijania w dwóch wymiarach dla:

• treści przewijanej w pionie (zwykłe strony internetowe) przy szerokości odpowiadającej 320 pikselom CSS;
• treści przewijanej w poziomie przy wysokości odpowiadającej 256 pikselom CSS.

320 px CSS to tyle, ile pokazuje okno przeglądarki na komputerze o szerokości 1280 px CSS przy powiększeniu 400 %; 256 px CSS odpowiada oknu o wysokości 1024 px przy 400 %.

Wyjątek: części treści, które wymagają układu dwuwymiarowego ze względu na sposób użycia lub znaczenie. WCAG wymienia obrazy, takie jak mapy i diagramy, wideo, gry, prezentacje, tabele danych (nie ich pojedyncze komórki) oraz interfejsy, w których paski narzędzi muszą pozostać w widoku podczas pracy z treścią. Tylko te części mogą przewijać się w obu kierunkach.

Typowe błędy w sklepie internetowym

• strona szersza niż ekran przy 320 px z powodu banera, ramki iframe lub tabeli wariantów produktu o stałej szerokości;
• menu główne lub filtry, które znikają przy dużym powiększeniu i nie da się do nich dotrzeć w inny sposób;
• przyklejony nagłówek i pasek cookies, które zasłaniają większość małego widoku;
• długie nazwy produktów, kody SKU lub adresy URL, które się nie zawijają i rozpychają układ na boki;
• proces zamówienia w dwóch kolumnach, które się nie mieszczą i wymagają przewijania w poziomie.

Jak to sprawdzić

Automatycznie: w naszym skanerze żadna reguła automatyczna nie odpowiada temu kryterium. Dopasowanie zależy od układu przy określonym powiększeniu i od tego, czy coś zostaje utracone, a tego reguła nie oceni. Potrzebna jest ręczna kontrola.

Ręcznie: ustawić okno przeglądarki na komputerze na szerokość 1280 px i powiększyć do 400 % albo użyć emulacji urządzenia 320 × 256 px dla treści poziomej. Przejść przez stronę główną, kategorię, produkt, koszyk i proces zamówienia. Sprawdzić, że nigdy nie trzeba przewijać w bok, by przeczytać tekst, że cała treść i menu są nadal dostępne i że nic na siebie nie nachodzi.

Jak to naprawić

• Stosować układ responsywny o elastycznych szerokościach (szerokości procentowe, max-width, minmax() w siatce) zamiast stałych szerokości w pikselach.
• Pozwolić na zawijanie długich słów i adresów URL (overflow-wrap: anywhere).
• Umieścić szerokie tabele danych w kontenerze, który przewija się samodzielnie, a resztę strony zostawić dopasowującą się.
• Uczynić osadzone filmy i ramki iframe responsywnymi.
• Utrzymywać przyklejone nagłówki niewielkie albo odklejać je przy wąskich szerokościach.

Powiązane kryteria

• 1.4.4 Zmiana rozmiaru tekstu — tekst przy powiększeniu 200 %.
• 1.4.12 Odstępy w tekście — większe odstępy bez utraty treści.
• 1.3.4 Orientacja — orientacja pionowa i pozioma.

Najczęstsze pytania

Jak przetestować dopasowanie do ekranu (reflow) wg WCAG?

Otworzyć stronę w oknie przeglądarki na komputerze o szerokości 1280 px CSS i powiększyć do 400 % albo ustawić w narzędziach deweloperskich szerokość widoku 320 px. Przewinąć stronę w dół i wykonać kluczowe zadania: nigdy nie powinno być potrzeby przewijania w bok, by przeczytać tekst lub dotrzeć do elementu sterującego.

Czy tabele danych mogą się przewijać w poziomie?

Tak. Treść, która dla swojego znaczenia lub użycia potrzebuje układu dwuwymiarowego — tabele danych, mapy, diagramy, wideo, gry, paski narzędzi, które muszą pozostać w widoku — może się przewijać w dwóch kierunkach. Reszta strony nadal musi się dopasowywać.

Czy responsywny motyw wystarcza do spełnienia 1.4.10?

Zwykle to dobry początek, ale i tak trzeba to przetestować. Elementy o stałej szerokości, szerokie osadzenia, długie słowa lub adresy URL i przyklejone nagłówki często psują dopasowanie nawet w responsywnych motywach.

Czym różni się 1.4.4 od 1.4.10?

1.4.4 Zmiana rozmiaru tekstu wymaga, by tekst działał przy powiększeniu 200 %. 1.4.10 Dopasowanie do ekranu wymaga, by przy 400 % (szerokość 320 px) treść mieściła się bez przewijania w poziomie.