1.4.10 Dopasowanie do ekranu

Krótko

Przy szerokości odpowiadającej 320 CSS px użytkownik powinien czytać stronę przewijając głównie w jednym kierunku. Nie powinien przesuwać ekranu raz w prawo, raz w lewo, żeby przeczytać każdą linię.

Problem w praktyce

Użytkownik powiększa stronę do 400% albo korzysta z małego ekranu. Treść nie zawija się, a strona wymaga przewijania poziomego i pionowego jednocześnie. Każdą linię trzeba czytać przez przesuwanie widoku w bok.

1.4.10 nie jest ogólną oceną „czy strona jest ładnie responsywna”. Chodzi o konkretny efekt: brak utraty informacji i funkcji oraz brak konieczności przewijania w dwóch kierunkach dla typowej treści.

Są wyjątki, na przykład mapy, diagramy, filmy, gry, prezentacje, tabele danych i edytory, jeśli układ dwuwymiarowy jest potrzebny do użycia albo zrozumienia.

Kogo to dotyczy

• Osób słabowidzących korzystających z dużego zoomu.
• Osób, które widzą tylko mały fragment ekranu naraz.
• Użytkowników urządzeń mobilnych i wąskich okien przeglądarki.
• Osób z ograniczeniami ruchowymi, dla których ciągłe przewijanie w dwóch osiach jest męczące.
• Osób z trudnościami poznawczymi, które gubią miejsce przy czytaniu linii wymagających przesuwania w bok.

Dobry przykład

• Układ wielokolumnowy zmienia się w jedną kolumnę.
• Karty przechodzą jedna pod drugą.
• Długie linki i ciągi znaków zawijają się zamiast wypychać stronę poza ekran.
• Etykiety formularza przechodzą nad pola albo układają się w prostą kolumnę.
• Tabela danych może mieć własny przewijany obszar, jeśli dwuwymiarowy układ jest potrzebny do zrozumienia tabeli.

Zły przykład

• Kontener ma stałą szerokość 1200 px i wypycha stronę poza ekran.
• Trzy kolumny pozostają obok siebie przy szerokości 320 CSS px.
• Menu lub panel boczny zasłania treść i nie da się do niej dotrzeć.
• Długi URL w karcie wymusza poziome przewijanie całej strony.
• Po reflow część treści znika i nie jest dostępna w innym miejscu.

Przykłady kodu

.layout {
  width: 1200px;
  display: grid;
  grid-template-columns: 300px 600px 300px;
}

.layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  max-width: 100%;
}

.content,
.content a,
.case-number {
  overflow-wrap: anywhere;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.form-row label {
  flex: 1 1 12rem;
}

.form-row input {
  flex: 2 1 16rem;
  max-width: 100%;
}

Przykład graficzny

Jak sprawdzić

1. Ustaw widok odpowiadający szerokości 320 CSS px albo powiększ stronę do 400% przy szerokości startowej 1280 CSS px.
2. Przejdź główne widoki, formularze, listy, karty, menu, panele i tabele.
3. Sprawdź, czy zwykła treść nie wymaga przewijania w dwóch kierunkach.
4. Sprawdź, czy żaden element nie znika po zmianie układu.
5. Sprawdź długie linki, identyfikatory, nazwy produktów i komunikaty błędów.
6. Oddziel wyjątki: mapa, diagram, wideo, gra, prezentacja albo tabela danych mogą potrzebować układu dwuwymiarowego.
7. Nie oceniaj tylko breakpointów. Sprawdź realne zadania użytkownika po reflow.

Co sprawdzi automat, a czego nie

Automat może wykryć

• poziome przewijanie całej strony przy wąskim widoku,
• elementy szersze niż viewport,
• część stałych szerokości i problemów z overflow,
• część treści ukrytej po zmianie breakpointu.

Automat nie oceni pewnie

• czy dwuwymiarowy układ jest wyjątkiem potrzebnym do zrozumienia treści,
• czy użytkownik nadal może ukończyć cały proces,
• czy przewijany obszar tabeli jest sensowny i nie ukrywa funkcji,
• czy treść zniknęła, czy została przeniesiona w inne dostępne miejsce.

Typowe błędy

• Stały layout desktopowy bez elastycznych kolumn.
• Ukrywanie panelu bocznego razem z ważną treścią.
• Menu, które wypada poza ekran i nie ma alternatywnego dostępu.
• Długie linki bez zawijania.
• Formularze z etykietą i polem zamkniętymi w sztywnej siatce.
• Traktowanie tabeli jako wymówki dla całej strony, choć tylko sama tabela potrzebuje przewijania poziomego.

Powiązane kryteria

• 1.4.4 Zmiana rozmiaru tekstu: gdy tekst ma działać po powiększeniu do 200%.
• 1.4.11 Kontrast elementów nietekstowych: gdy po reflow kontrolki i granice elementów nadal muszą być rozpoznawalne.
• 2.5.8 Rozmiar celu (minimum): gdy małe cele w ciasnym układzie utrudniają obsługę wskaźnikiem.

Źródła

• WCAG 2.2: 1.4.10 Reflow (otwiera się w nowym oknie)
• Understanding WCAG 1.4.10: Reflow (otwiera się w nowym oknie)
• How to Meet WCAG 1.4.10: Reflow (otwiera się w nowym oknie)
• C32: Using media queries and grid CSS to reflow columns (otwiera się w nowym oknie)
• C31: Using CSS Flexbox to reflow content (otwiera się w nowym oknie)
• C33: Allowing for Reflow with Long URLs and Strings of Text (otwiera się w nowym oknie)
• C38: Using CSS width, max-width and flexbox to fit labels and inputs (otwiera się w nowym oknie)
• F102: Failure due to content disappearing when content has reflowed (otwiera się w nowym oknie)