Comment tester le critère 1.4.10 « Redistribution — Le contenu peut être présenté sans perte d’information ou de fonctionnalité et sans nécessité de défilement dans les deux dimensions pour : »
- References WCAG
- 1.4.10 Redistribution (AA)
Ce que dit ce critère
Le contenu peut être présenté sans perte d’information ou de fonctionnalité et sans nécessité de défilement dans les deux dimensions pour :
- un contenu à défilement vertical avec une largeur équivalente à 320 pixels CSS ;
- un contenu à défilement horizontal avec une hauteur équivalente à 256 pixels CSS.
Sauf pour les parties du contenu dont l’utilisation ou la compréhension nécessite une mise en page en deux dimensions.
320 pixels CSS équivaut à une largeur initiale d’espace de restitution de 1280 pixels CSS avec un zoom de 400 %. Pour un contenu web conçu pour défiler horizontalement (par exemple, avec du texte vertical), la valeur de 256 pixels CSS équivaut à une hauteur d’affichage initiale de 1024 pixels CSS avec un zoom de 400 %.
On compte parmi les exemples de contenu nécessitant une mise en page en deux dimensions les images nécessaires à la compréhension (comme les cartes ou les diagrammes), les vidéos, les jeux, les présentations, les tableaux de données (non pas les cellules individuelles), et les interfaces où il est nécessaire de garder les barres d’outils visibles pendant la manipulation du contenu. Un défilement bidimensionnel pour ces parties du contenu est acceptable.
Méthodologie officielle pour tester le critère 1.4.10
Techniques officielles du W3C
Le W3C ne publie pas de procédure de test pour ce critère. Il publie des techniques : des façons documentées de le satisfaire, et les échecs qui ne le satisfont pas.
Techniques suffisantes
- C32 Using media queries and grid CSS to reflow columns
- C31 Using CSS Flexbox to reflow content
- C33 Allowing for Reflow with Long URLs and Strings of Text
- C38 Using CSS width, max-width and flexbox to fit labels and inputs
- SCR34 Calculating size and position in a way that scales with text size
- G206 Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text
- G224 Accounting for meaningful text indentation and Reflow
- G225 Section panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page
Using PDF/UA when creating PDFs (Potential future technique)
Techniques complémentaires
- C34 Using media queries to un-fixing sticky headers / footers
- C37 Using CSS max-width and height to fit images
- CSS, Reflowing simple data tables (Potential future technique)
- CSS, Fitting data cells within the width of the viewport (Potential future technique)
- Mechanism to allow mobile view at any time (Potential future technique)
- Alternate view supporting Reflow for otherwise excepted content (Potential future technique)