1.4.10Niveau AA1.4 Distinguishable

Reflow

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.

Bekijk W3C-specificatie ↗

Wat het betekent

Reflow begrijpen | Hoe te voldoen aan Reflow (Niveau AA) Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor: Verticaal scrollbare content met een breedte gelijkwaardig aan 320 CSS-pixels ; Horizontaal scrollbare content met een hoogte gelijkwaardig aan 256 CSS-pixels ; Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen. Noot 320 CSS-pixels zijn gelijk aan de beginbreedte van een weergavekader van 1280 CSS-pixels bij 400% zoom. Voor webcontent die ontworpen is om horizontaal te scrollen (bijv. bij verticale tekst), zijn de 256 CSS-pixels gelijk aan de beginbreedte van een weergavekader van 1024 CSS-pixels bij 400% zoom. Noot Voorbeelden van content die een tweedimensionale lay-out vereisen, zijn afbeeldingen, kaarten, schema's, video's, games, presentaties, gegevenstabellen en interfaces waarbij de werkbalken zichtbaar moeten blijven tijdens het manipuleren van de content.

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%; }

Hoe A11yRisk dit detecteert

A11yRisk detecteert dit criterium automatisch.

Scan uw site op deze overtreding →