Wróć do wszystkich kryteriów

1.4.10 Zawijanie treści (ang.) Reflow

Specjalizacje:

  • Content Creator
  • Designer
  • Deweloper

Elementy:

  • Cała strona / widok

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Głównym celem tego kryterium jest umożliwienie użytkownikom powiększania treści bez konieczności przewijania jej w dwóch kierunkach (pionowo i poziomo jednocześnie) w celu przeczytania wiersza tekstu. Standard wymaga, aby zawartość „przepływała” (dostosowywała się) do obszaru widocznego ((ang.) viewport) w następujących warunkach:

    • Dla treści czytanych poziomo (np. język polski): przy szerokości wynoszącej 320 pikseli CSS.
    • Dla treści czytanych pionowo (niektóre języki azjatyckie): przy wysokości wynoszącej 256 pikseli CSS.

    Wartość 320 pikseli odpowiada powiększeniu strony o szerokości 1280 pikseli do poziomu 400%. Dzięki temu osoby słabowidzące nie tracą orientacji i nie muszą wykonywać uciążliwych ruchów kursorem „od lewej do prawej”, aby przeczytać każde zdanie.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#reflow

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#dopasowanie-do-ekranu

    Słownik pojęć

    Układ dwuwymiarowy
    –

    Sytuacja, w której użytkownik musi przewijać stronę zarówno w pionie, jak i poziomie, aby zapoznać się z całością informacji.

    Obszar widoczny (ang.) viewport
    –

    to szerokość okna przeglądarki, w której renderowana jest strona.

    Piksele CSS (ang.) pixels CSS
    –

    abstrakcyjna jednostka miary niezależna od fizycznej rozdzielczości ekranu (gęstości usłonecznienia punktów matrycy), używana w kaskadowych arkuszach stylów ((ang.) CSS) do zapewnienia spójności skalowania i renderowania interfejsu niezależnie od używanego urządzenia.

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby z niepełnosprawnościami motorycznymi: Zapewniając pionowy układ, ułatwiasz nawigację osobom, dla których precyzyjne sterowanie suwakami poziomymi jest trudne lub niemożliwe.
    • Osoby słabowidzące: Zastosuj to kryterium, aby umożliwić im czytanie tekstu w dużym powiększeniu bez utraty kontekstu i orientacji na stronie.
    • Użytkownicy z zaburzeniami poznawczymi (np. dysleksją): Pamiętaj, że konieczność operowania dwoma paskami przewijania drastycznie zwiększa wysiłek umysłowy i utrudnia skupienie się na meritum informacji.
    • Użytkownicy urządzeń mobilnych: Choć wytyczna skupia się na powiększeniu, jej wdrożenie naturalnie poprawia komfort osób korzystających ze smartfonów.

    Zasady wdrażania i wymagania techniczne

    Aby spełnić kryterium, musisz zadbać o pełną elastyczność interfejsu:

    • Projektowanie responsywne ((ang.) Responsive Web Design): Wykorzystuj reguły CSS (ang.) Media Queries, aby definiować punkty przełamania, w których elementy zmieniają swój układ z poziomego na pionowy.
    • Relacja z kryterium 1.4.4 Zmiana rozmiaru tekstu: Pamiętaj, że nawet przy zastosowaniu (ang.) Reflow, użytkownik musi mieć możliwość powiększenia samego tekstu do 200% bez utraty treści.
    • Jednostki relatywne: Porzuć sztywne piksele na rzecz jednostek takich jak %, em, rem czy vw. Unikaj nadawania stałej szerokości (np. width: 1200px) kontenerom głównym.
    • Nowoczesne układy CSS: Stosuj CSS Flexbox oraz CSS Grid. Używaj właściwości flex-wrap: wrap, aby elementy automatycznie przeskakiwały do nowej linii, gdy zabraknie dla nich miejsca.
    • Skalowanie mediów: Każdy obraz powinien posiadać regułę max-width: 100% oraz height: auto, co zapobiegnie jego „wystawaniu” poza krawędź ekranu.
    • Zarządzanie tekstem: Zastosuj właściwości overflow-wrap: break-word lub word-wrap: break-word, aby zapobiec rozpychaniu layoutu przez bardzo długie adresy URL lub nieprzerwane ciągi znaków.

    Wyjątki i sytuacje szczególne

    Przewijanie w dwóch kierunkach jest dopuszczalne, gdy układ dwuwymiarowy jest niezbędny do zrozumienia treści:

    • Mapy i wykresy: Gdzie relacja przestrzenna jest kluczowa.
    • Tabele danych: Same tabele mogą wymagać przewijania, ale tekst wewnątrz komórek powinien być czytelny.
    • Gry i prezentacje: Gdzie zmiana układu zniszczyłaby sens aplikacji.
    • Interfejsy z paskami narzędzi: Gdy narzędzia muszą pozostać widoczne podczas edycji treści.
    • Kod źródłowy i listy zagnieżdżone: Gdzie wcięcia są krytyczne dla znaczenia struktury.

    Przykłady implementacji

    Najczęstsze błędy

    • F102: Zniknięcie treści lub funkcjonalności po zawężeniu okna lub powiększeniu widoku.
    • Sztywne szerokości: Ustawienie width lub min-width większego niż 320px dla głównych kontenerów.
    • Brak łamania słów: Brak właściwości overflow-wrap: break-word, co powoduje, że długie linki „wypychają” layout.
    • Błąd pozycjonowania: Użycie position: fixed, które przy powiększeniu zasłania dużą część treści.
    • Nieskalowalne obrazy: Brak ograniczenia szerokości dla dużych grafik, co wymusza pojawienie się poziomego paska przewijania.

    Najlepsze praktyki

    • Strategia (ang.) Mobile-First: Buduj kod zaczynając od najmniejszych ekranów, co ułatwia późniejsze zarządzanie przepływem treści.
    • Semantyczny HTML: Korzystaj ze znaczników takich jak <main>, <nav> czy <article>, co w połączeniu z elastycznym CSS tworzy stabilną strukturę.
    • Weryfikacja powiększenia: Pamiętaj, że testy na telefonie to nie wszystko – zawsze sprawdzaj widok przy 400% powiększenia w przeglądarce desktopowej.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Ustaw szerokość okna na 320 pikseli i zweryfikuj, czy cały tekst mieści się w pionowym widoku bez konieczności przewijania w poziomie.
    • Testowanie manualne: Zwiększ powiększenie w przeglądarce do 400% i sprawdź, czy żadna funkcjonalność ani informacja nie została ucięta lub przysłonięta przez inne elementy.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 elementów interfejsu. Twoim zadaniem jest sprawdzenie, jak zachowują się one przy bardzo wąskim oknie przeglądarki (ok. 320px) lub przy dużym powiększeniu (Zoom 400%).

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.

    Jak wykonać test?

    1. Złap za krawędź przeglądarki i zacznij ją zwężać.
    2. Zmniejszaj szerokość aż do minimum (lub użyj Trybu Responsywnego w DevTools).
    3. Obserwuj, czy pojawia się poziomy pasek przewijania (scroll) przy którymś z przykładów.

    Proponowane narzędzia: Narzędzie deweloperskie (ang.) Developer Tools

    Link: https://pdc.ambiscale.com/training/wcag-1-4-10/

    #1 BŁĄD

    Problem: Kontener tekstu ma sztywną szerokość (width: 500px).
    Dlaczego: Gdy okno jest węższe niż 500px (np. na telefonie), tekst nie zawija się, lecz wymusza przewijanie poziome. Czytanie tekstu, który wymaga scrollowania w bok, jest bardzo uciążliwe.
    Naprawa: Używać width: 100% lub max-width.

    #2 DOBRZE

    Dlaczego: Kontener używa szerokości względnej (width: 100%). Treść automatycznie dopasowuje się do dostępnej przestrzeni (Reflow), niezależnie od tego, jak wąskie jest okno.

    #3 BŁĄD

    Problem: Menu ma zablokowane zawijanie (flex-wrap: nowrap).
    Dlaczego: Przy dużej liczbie elementów lub wąskim oknie, menu nie mieści się w linii i wychodzi poza ekran.
    Naprawa: Włączyć zawijanie (flex-wrap: wrap) lub zmienić typ menu na mobilne (hamburger) przy małych szerokościach.

    #4 BŁĄD

    Problem: Grafika ma sztywną szerokość (450px) bez atrybutu responsywności.
    Dlaczego: Element jest szerszy niż ekran telefonu (320px), co psuje układ strony.
    Naprawa: Dodać styl max-width: 100%; height: auto;.

    #5 BŁĄD

    Problem: Układ kolumnowy oparty na sztywnych pikselach (200px + 400px = 600px).
    Dlaczego: Poniżej 600px szerokości okna, układ się nie „składa”, wymuszając scroll.
    Naprawa: Użyć CSS Media Queries, aby poniżej pewnej szerokości zmienić układ na jednokolumnowy (flex-direction: column).

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów