RGAA 10.11 — Pour chaque page web, les contenus peuvent-ils être présentés sans perte d'information ou de fonctionnalité et sans avoir recours à un défilement dans les deux dimensions ?

Contenu qui déborde sur mobile (reflow 320px)

Le problème

Le critère 10.11 du RGAA, correspondant au critère de succès 1.4.10 des WCAG (Reflow), exige que le contenu d'une page web puisse être affiché sur une largeur de 320 pixels CSS sans nécessiter de défilement horizontal. Cette largeur de 320px correspond à un écran de 1280px avec un zoom navigateur à 400%, qui est le cas d'usage des personnes malvoyantes utilisant un fort agrandissement. Quand un site force le défilement horizontal à cette largeur, l'utilisateur doit scroller simultanément horizontalement et verticalement pour lire le contenu — une opération extrêmement pénible qui transforme la lecture en exercice de navigation. Les causes principales de ce problème sont les largeurs fixes en pixels (width: 1200px), les tableaux de données larges qui ne s'adaptent pas, les images sans max-width: 100%, les éléments avec min-width trop élevé, et les mises en page inflexibles qui ne passent pas en colonne unique sur les petits écrans. Les pré-formats (balise pre) et les blocs de code sont aussi des points sensibles car leur contenu ne peut pas être coupé sans perdre du sens. Le problème est souvent aggravé par l'utilisation de tailles absolues partout dans le CSS. Un conteneur de 1000px de large ne peut physiquement pas tenir dans 320px. La solution repose sur le responsive design : utiliser des largeurs en pourcentage ou en unités relatives, des images fluides (max-width: 100%), des media queries pour réorganiser la mise en page, et flexbox ou CSS Grid avec des colonnes adaptatives. Les tableaux de données larges peuvent être rendus responsifs avec un défilement horizontal localisé (overflow-x: auto sur le conteneur du tableau uniquement) ou en transformant les lignes en cartes empilées sur mobile.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Impact sur les utilisateurs

Les personnes malvoyantes qui utilisent un zoom à 400% dans leur navigateur voient effectivement le site dans une fenêtre de 320px de large. Si le contenu déborde, elles doivent naviguer dans deux directions pour lire chaque ligne de texte : aller à droite pour lire la fin de la ligne, revenir à gauche pour trouver le début de la ligne suivante, et ainsi de suite. C'est un exercice épuisant qui rend la lecture d'un article simple extrêmement pénible. Sur mobile, le même problème se pose pour tous les utilisateurs si le site n'est pas responsif. Le contenu qui dépasse l'écran crée une barre de défilement horizontale et une expérience de navigation dégradée. Les utilisateurs de lecteurs d'écran sur mobile sont aussi affectés : les gestes de balayage pour naviguer dans le contenu deviennent imprévisibles quand le contenu déborde dans deux dimensions. La non-conformité au critère de reflow est un indicateur fort d'un site qui n'a pas été conçu avec une approche responsive et mobile-first.

Exemple de code

Avant (non conforme)
<style>
  .container {
    width: 1200px;
    margin: 0 auto;
  }
  .two-columns {
    display: flex;
    gap: 40px;
  }
  .column {
    width: 580px;
  }
  img {
    width: 800px;
  }
  table {
    width: 1000px;
  }
</style>
Après (conforme)
<style>
  .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }
  .two-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .column {
    flex: 1 1 280px; /* largeur flexible, min 280px */
  }
  img {
    max-width: 100%;
    height: auto;
  }
  .table-wrapper {
    overflow-x: auto; /* scroll horizontal localisé */
  }
  table {
    min-width: 600px; /* le tableau scrolle dans son conteneur */
  }
</style>

Questions fréquentes

Comment tester le reflow à 320px ?
Méthode 1 : Zoomez votre navigateur à 400% sur un écran de 1280px de large. Méthode 2 : Ouvrez les DevTools de Chrome, activez le mode responsive et réglez la largeur à 320px. Vérifiez qu'aucun contenu ne nécessite de défilement horizontal (sauf les exceptions : tableaux de données, cartes, diagrammes).
Les tableaux de données sont-ils exemptés du critère de reflow ?
Oui, partiellement. Les WCAG et le RGAA acceptent que les tableaux de données nécessitent un défilement horizontal car leur structure bidimensionnelle est essentielle à la compréhension. Cependant, le défilement doit être localisé (le tableau scroll dans son conteneur, pas la page entière) et le tableau doit rester fonctionnel. Encapsulez le tableau dans un div avec overflow-x: auto.
max-width: 100% sur les images suffit-il ?
C'est un bon début. Ajoutez aussi height: auto pour conserver le ratio de l'image. Pour les images de fond CSS, utilisez background-size: contain ou cover. Pour les SVG inline, ajoutez un viewBox et retirez les attributs width/height fixes. Testez avec des images de toutes tailles pour vérifier qu'aucune ne dépasse de son conteneur.
Que faire des blocs de code (pre) qui sont trop larges ?
Les blocs de code longs sont une exception acceptée par les WCAG (le contenu qui nécessite un défilement bidimensionnel pour être compris). Encapsulez le bloc pre dans un conteneur avec overflow-x: auto pour qu'il scrolle horizontalement dans son propre espace sans affecter la page entière. Ajoutez white-space: pre-wrap si le retour à la ligne automatique est acceptable.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit