1.4.10Poziom AA1.4 Distinguishable

Dopasowanie do ekranu

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions, for vertical scrolling content at a width equivalent to 320 CSS pixels and for horizontal scrolling content at a height equivalent to 256 CSS pixels. Exceptions apply for content requiring two-dimensional layout.

Zobacz specyfikację W3C ↗

Co to oznacza

Zrozumieć KS Dopasowanie do ekranu | Jak spełnić KS Dopasowanie do ekranu (Poziom AA) 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. Uwaga 320 pikseli CSS odpowiada początkowej szerokości obszaru roboczego 1280 pikseli CSS przy 400% powiększeniu. Dla treści internetowych, które są przeznaczone do przewijania w poziomie (np. z tekstem pionowym), 256 pikseli CSS odpowiada początkowej wysokości obszaru roboczego 1024 pikseli CSS z 400% powiększeniem. Uwaga Przykładami treści, które wymagają dwuwymiarowego układu są obrazy prezentujące np. mapy i diagramy, wideo, gry, prezentacje, tabele danych (nie poszczególne komórki) oraz interfejsy, w których konieczne jest zachowanie pasków narzędzi w widoku podczas manipulacji treścią. Dopuszczalne jest zapewnienie przewijania dwuwymiarowego dla takich części treści.

Failing example

/* Fails: fixed-width table forces horizontal scroll */
table { width: 1200px; }

How to fix it

/* Pass: responsive table with horizontal scroll
   contained within the component, not the viewport */
.table-wrapper { overflow-x: auto; max-width: 100%; }
table { min-width: 600px; width: 100%; }

Jak A11yRisk to wykrywa

A11yRisk wykrywa to kryterium automatycznie.

Skanuj swoją witrynę pod kątem tego naruszenia →