Pour chaque page web, les contenus peuvent-ils être présentés sans perte d’information ou de fonctionnalité et sans avoir recours soit à un défilement vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ?
Un utilisateur malvoyant zoome son navigateur à 400 % pour lire votre page. À ce niveau de zoom, une fenêtre de 1 280 px se comporte comme si elle faisait 320 px de large. Si votre mise en page n’est pas fluide, une barre de défilement horizontale s’ajoute à la verticale, et lire un paragraphe devient une navigation en zigzag, colonne par colonne.
Le critère 10.11 pose une règle claire : pour les pages à défilement vertical (le cas standard du web occidental), tout le contenu doit rester accessible à 320 px de large sans défilement horizontal. La règle symétrique s’applique aux rares contenus à défilement horizontal (pour les écritures verticales comme le japonais ou le chinois classique) : à 256 px de hauteur, aucun défilement vertical supplémentaire ne doit être nécessaire. Deux axes de défilement simultanés, c’est rédhibitoire.
Les coupables habituels : un conteneur avec width fixe en pixels, une image sans max-width: 100%, un tableau sans overflow-x: auto, un bloc <pre> avec white-space: nowrap. Flexbox avec flex-wrap: wrap, Grid et les unités relatives (%, vw, rem) règlent la majorité des cas. La méthode de test de référence est le mode responsive du navigateur à 100 % de zoom, pas le zoom à 400 % : les deux ne donnent pas toujours les mêmes résultats.
2 tests pour vérifier l'adaptation du contenu aux petites fenêtres
Reflow horizontal à 320 px
Ce test s’applique à la quasi-totalité des pages françaises (texte lu de gauche à droite).
- Ouvrez les outils de développement du navigateur (F12).
- Activez le mode responsive (icône mobile) et réglez la largeur à exactement 320 px.
- Vérifiez que le zoom du navigateur est bien à 100 %.
- Parcourez la page de haut en bas : aucune barre de défilement horizontale ne doit apparaître.
- Vérifiez que tout le contenu reste accessible : aucun texte tronqué, aucun lien ou bouton hors de portée.
- Si aucun défilement horizontal n’est nécessaire et que toutes les informations et fonctionnalités sont disponibles, le test est validé.
Reflow vertical à 256 px
Ce test concerne uniquement les pages dont le contenu est conçu pour défiler horizontalement (pour des écritures verticales comme le japonais ou le chinois classique). Peu applicable sur les sites francophones.
- Vérifiez que la page contient bien des contenus à défilement horizontal (direction de lecture verticale).
- Ouvrez les outils de développement, activez le mode responsive et réglez la hauteur à exactement 256 px.
- Vérifiez que le zoom est à 100 %.
- Parcourez la page de gauche à droite : aucune barre de défilement vertical supplémentaire ne doit apparaître.
- Vérifiez que toutes les informations et fonctionnalités restent accessibles.
- Si aucun défilement vertical n’est nécessaire, le test est validé.
Exemples
❌ Non conforme : Conteneur et cartes à largeur fixe en pixels
<style>
.page-wrapper {
width: 960px;
margin: 0 auto;
}
.cards {
display: flex;
gap: 20px;
}
.card {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
}
</style>
<div class="page-wrapper">
<div class="cards">
<div class="card">
<h2>Offre Standard</h2>
<p>Accès aux fonctionnalités de base de la plateforme.</p>
<a href="/standard">Choisir cette offre</a>
</div>
<div class="card">
<h2>Offre Premium</h2>
<p>Accès à toutes les fonctionnalités sans restriction.</p>
<a href="/premium">Choisir cette offre</a>
</div>
</div>
</div>Le .page-wrapper a width: 960px et les .card ont width: 300px, toutes deux en valeurs fixes. À 320 px de large, le contenu déborde de la fenêtre et une barre de défilement horizontale apparaît. Un utilisateur malvoyant zoomé doit faire défiler latéralement pour voir les liens « Choisir cette offre », s’il remarque seulement qu’ils existent.
✅ Conforme : Mise en page fluide avec Flexbox
<style>
.page-wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
}
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 280px;
min-width: 0;
padding: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
}
</style>
<div class="page-wrapper">
<div class="cards">
<div class="card">
<h2>Offre Standard</h2>
<p>Accès aux fonctionnalités de base de la plateforme.</p>
<a href="/standard">Choisir cette offre</a>
</div>
<div class="card">
<h2>Offre Premium</h2>
<p>Accès à toutes les fonctionnalités sans restriction.</p>
<a href="/premium">Choisir cette offre</a>
</div>
</div>
</div>Le conteneur utilise width: 100% avec max-width pour les grands écrans. flex: 1 1 280px permet aux cartes de s’empiler en colonne unique quand la largeur disponible est inférieure à 280 px. box-sizing: border-box et min-width: 0 évitent les débordements internes causés par le padding. À 320 px, tout le contenu est visible sans défilement horizontal et les liens restent accessibles.
Astuces et pièges
⚠️ overflow: hidden masque le problème sans le résoudre
Appliquer overflow-x: hidden sur le <body> fait disparaître la barre de défilement horizontale, ce qui donne l’illusion que le critère est respecté. En réalité, le contenu débordant est tronqué : des liens, des boutons ou du texte deviennent invisibles et inaccessibles. C’est une non-conformité encore plus grave que de laisser la barre de défilement apparaître.
⚠️ Zoom 400 % et mode responsive ne donnent pas toujours les mêmes résultats
Tester au zoom 400 % et tester en mode responsive à 320 px sont deux opérations distinctes. Certaines media queries CSS fonctionnent correctement en mode responsive mais pas en zoom 400 %, selon la façon dont les éléments en position absolue interagissent avec le viewport. La méthode de référence pour le critère 10.11 est le mode responsive à 100 % de zoom (Firefox, Chrome, Edge) : c’est la seule qui reflète fidèlement un viewport de 320 px.
⚠️ Tableaux de données : défilement local, pas global
Un tableau comparatif avec huit colonnes ne peut pas tenir dans 320 px sans perte de lisibilité. La solution acceptable est d’envelopper le tableau dans un <div> avec overflow-x: auto et tabindex="0" pour le rendre navigable au clavier. Le tableau défile localement dans son conteneur, sans générer de défilement horizontal sur la page entière.
⚠️ Cas particuliers explicitement exemptés
Le critère précise « hors cas particuliers ». Les exceptions officielles incluent : les cartes interactives, les interfaces de traitement d’image ou de dessin, les jeux, les présentations de type diaporama, les tableaux de données complexes, et les vidéos. L’exception s’applique quand la navigation bidirectionnelle est intrinsèque à la fonctionnalité, pas quand c’est simplement plus commode de ne pas adapter la mise en page. Un tableau marketing de trois colonnes n’est pas un cas particulier.
💡 Blocs de code : préférez overflow-x: auto à pre-wrap
Les éléments <pre> et <code> sont une source fréquente de défilement horizontal, car white-space: pre empêche le retour à la ligne par défaut. Appliquer overflow-x: auto sur le bloc crée un défilement local limité au code sans affecter la page entière. white-space: pre-wrap est une alternative mais elle casse l’alignement du code : à réserver aux extraits courts où la mise en forme exacte n’est pas critique.
Questions fréquentes
Comment tester le critère RGAA 10.11 reflow sans outil spécifique ?
Deux méthodes suffisent. Première méthode : ouvrez les outils de développement du navigateur, activez le mode responsive et réglez la largeur à 320 px. Deuxième méthode : passez le zoom du navigateur à 400 % sur un écran de 1280 px. Dans les deux cas, faites défiler la page verticalement et vérifiez qu’aucun scroll horizontal n’apparaît. Faites toujours les deux : les résultats peuvent diverger selon le comportement des media queries CSS.
Quelles exceptions RGAA reflow s'appliquent à un tableau de données à nombreuses colonnes ?
Non. Les tableaux de données font partie des exceptions officielles du critère 10.11. Un tableau dont la compréhension requiert de voir plusieurs colonnes simultanément peut légitimement imposer un défilement horizontal. L’exemption s’applique au tableau lui-même, mais le reste de la page (texte courant, navigation, formulaires) doit quand même respecter le reflow.
Quelle est la différence entre le test 10.11.1 et le test 10.11.2 ?
Le test 10.11.1 s’applique aux pages en lecture horizontale (français, anglais) : on vérifie l’absence de scroll horizontal à 320 px de large. Le test 10.11.2 concerne les pages en lecture verticale (certaines langues CJK comme le japonais en mode tategaki) : on vérifie l’absence de scroll vertical à 256 px de hauteur. Pour la quasi-totalité des projets web en français, seul le test 10.11.1 s’applique.
Quel impact a overflow-x: hidden sur body pour corriger un problème de reflow RGAA ?
Non, et c’est pire. Masquer le défilement ne supprime pas le contenu qui déborde : il reste dans le DOM, mais devient inaccessible à l’utilisateur. Le critère 10.11 exige que les informations et les fonctionnalités restent disponibles. Un contenu inaccessible constitue une perte d’information et fait échouer le critère tout autant qu’un scroll horizontal.
Comment évaluer la responsabilité RGAA reflow pour un composant tiers qui déborde à 320 px ?
Oui. L’audit RGAA évalue la page telle qu’elle est présentée à l’utilisateur, quelle que soit l’origine du composant. Si un widget ou un carrousel génère un défilement horizontal, la page échoue au critère 10.11. Adaptez le composant en appliquant max-width: 100% sur son conteneur, ou remplacez-le par une alternative conforme.