Zasada 1: Postrzegalność 1.4 Rozróżnialność

1.4.10 Dopasowanie do ekranu

WCAG 1.4.10 Reflow

W skrócie

Treść musi się dopasować do szerokości 320 px (odpowiednik zoomu 400% na ekranie 1280 px) bez przewijania w dwóch kierunkach – wyjątki to np. mapy, tabele danych i edytory.

Poziom
AA Standard, którego wymaga prawo – usuwa najczęstsze bariery.
Czy to obowiązkowe?
Wymagane prawem
Kto w zespole odpowiada
Programowanie, Projektowanie UX/UI
Jak to wykryć
Częściowo automatyczne

Wyjaśnienie prostym językiem: Dopasowanie do ekranu (responsywność)

Komu i dlaczego to pomaga

Osoby słabowidzące powiększają stronę nawet 4-krotnie. Jeśli muszą wtedy przewijać każdą linijkę w poziomie, czytanie staje się koszmarem.

  • Osoby słabowidzące
  • Seniorzy

Jak zrobić to dobrze

  • Projektuj mobile-first i używaj elastycznych układów (flex, grid, max-width: 100%).
  • Dodaj overflow-wrap: anywhere dla długich słów i adresów.
  • Przyklejone nagłówki zmniejszaj lub odklejaj przy dużym powiększeniu.

Najczęstsze błędy

  • Strona niereponsywna ze stałą szerokością 1200 px.
  • Menu lub nagłówki, które przy powiększeniu zasłaniają pół ekranu.
  • Długie adresy e-mail i linki bez łamania, rozpychające układ.

Jak to sprawdzić

  1. Ustaw okno przeglądarki na szerokość 1280 px i zoom 400% – przewijanie w poziomie nie powinno być potrzebne.
  2. Albo sprawdź widok 320 px w trybie responsywnym DevTools.

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu AA z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

1.4.4

Zmiana rozmiaru tekstu

Poziom AA Wymagane prawem

Tekst można powiększyć do 200% (np. zoomem przeglądarki) bez utraty treści i funkcji – nic nie może się uciąć ani nałożyć.

1.3.4

Orientacja

Poziom AA Wymagane prawem

Strona lub aplikacja działa zarówno w pionie, jak i w poziomie – nie blokuje jednej orientacji ekranu, chyba że jest to niezbędne (np. aplikacja do czeków bankowych).

2.4.11

Fokus nie jest zasłonięty (minimum)

Poziom AA Nowe w 2.2

Element z fokusem nie może być całkowicie zasłonięty przez treści stworzone przez autora strony – np. przyklejony nagłówek, stopkę czy baner cookies.

Ostatnia aktualizacja: .
Źródło: Understanding SC 1.4.10: Reflow – oficjalne objaśnienie W3C (po angielsku).