1.4.10 Dopasowanie do ekranu - poziom AA

W tym kryterium chodzi o nic innego jak o responsywność

O co tu chodzi w praktyce?

To kryterium jest o tym, żeby użytkownik nie musiał jednocześnie przewijać w dół i w bok, żeby przeczytać treść albo skorzystać z funkcji strony. Najczęstszy problem wygląda tak: powiększasz stronę (albo oglądasz ją na wąskim ekranie), a tekst ucieka poza widok i musisz przesuwać ekran w poziomie, żeby domknąć każdą linijkę. Tego właśnie każe unikać kryterium sukcesu 1.4.10.

Co najczęściej psuje 1.4.10?

Najczęściej to nie jest problem z tekstem, tylko z układem:

• Stałe szerokości, które nie chcą się zwężać (np. sztywne kolumny).
• Elementy, które nie zawijają się w wąskim widoku (np. długie menu, przyciski obok siebie, etykiety formularza).
• Treści w boksach o sztywnej szerokości, które wymuszają przewijanie w poziomie.

Efekt jest zawsze podobny: na wąskim ekranie albo po dużym powiększeniu pojawia się poziomy scroll i bez niego nie da się czytać.

Jak to szybko sprawdzić na gotowej stronie?

Najprostszy test jest praktyczny: otwórz stronę i doprowadź do sytuacji „wąskiego widoku” (albo przez zwężenie okna, albo przez duże powiększenie). Następnie sprawdź, czy:

• da się czytać akapity bez przewijania w bok,
• da się obsłużyć menu, formularz, filtry i przyciski bez „jeżdżenia” w poziomie,
• nic nie znika i nie przestaje działać.

To dokładnie sprawdza warunek, ma być bez utraty informacji lub funkcjonalności i bez przewijania w dwóch wymiarach

Pełny tekst kryterium 1.4.10 Dopasowanie do ekranu

Treść może być prezentowana bez utraty informacji lub funkcjonalności, bez konieczności przewijania w dwóch wymiarach dla:

• Pionowego przewijania treści o szerokości odpowiadającej 320 pikselom CSS;
• Poziomego przewijania treści na wysokości odpowiadającej 256 pikselom CSS.

Wyjątkiem są te części treści, które wymagają dwuwymiarowego układu ze względu na sposób używania lub znaczenie.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#dopasowanie-do-ekranu

Chcesz wiedzieć więcej?

• 1.1.1 Treść nietekstowa - poziom A
• 1.2.1 Tylko audio lub tylko wideo (nagranie) - poziom A
• 1.2.2 Napisy rozszerzone (nagranie) - poziom A
• 1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) - Poziom A
• 1.2.4 Napisy rozszerzone (na żywo) - poziom AA
• 1.2.5 Audiodeskrypcja (nagranie) - poziom AA
• 1.2.6 Język migowy (nagranie) - poziom AAA
• 1.2.7 Rozszerzona audiodeskrypcja (nagranie) - poziom AAA
• 1.2.8 Alternatywa dla mediów (nagranie) - poziom AAA
• 1.2.9 Tylko audio (na żywo) - poziom AAA
• 1.3.1 Informacje i relacje - poziom A
• 1.3.2 Zrozumiała kolejność - poziom A
• 1.3.3 Właściwości zmysłowe - poziom A
• 1.3.4 Orientacja - poziom AA
• 1.3.5 Określenie pożądanej wartości - poziom AA
• 1.3.6 Określenie przeznaczenia - poziom AAA
• 1.4.1 Użycie koloru - poziom A
• 1.4.2 Kontrola odtwarzania dźwięku - poziom A
• 1.4.3 Kontrast (minimalny) - poziom AA
• 1.4.4 Zmiana rozmiaru tekstu - poziom AA
• 1.4.5 Obrazy tekstu - poziom AA
• 1.4.6 Kontrast (wzmocniony) - poziom AAA
• 1.4.7 Niska głośność lub bez dźwięków w tle - poziom AAA
• 1.4.8 Prezentacja wizualna - poziom AAA
• 1.4.9 Obrazy tekstu (bez wyjątków) - poziom AAA
• 1.4.10 Dopasowanie do ekranu - poziom AA
• 1.4.11 Kontrast elementów nietekstowych - poziom AA
• 1.4.12 Odstępy w tekście - poziom AA
• 1.4.13 Treść spod kursora lub fokusu - poziom AA