RGAA 10.11 — Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à un défilement vertical pour une fenêtre ayant une largeur de 320 px ou un défilement horizontal pour une fenêtre ayant une hauteur de 256 px ?

Contenu nécessitant un défilement horizontal à 320px

Le problème

Le problème de reflow du contenu survient lorsqu'une page nécessite un défilement horizontal à une largeur de fenêtre de 320 pixels CSS (ou un défilement vertical à 256px de hauteur pour le contenu horizontal). Le critère RGAA 10.11 (correspondant au WCAG 1.4.10, niveau AA) exige que le contenu puisse être présenté sans perte d'information ni de fonctionnalité, et sans nécessiter de défilement dans les deux dimensions.

Le seuil de 320px CSS correspond à un zoom de 400% sur un écran de 1280px -- c'est le zoom que certains utilisateurs malvoyants appliquent pour pouvoir lire le contenu. À ce niveau de zoom, la page doit se réorganiser en une colonne unique sans contenu coupé ni barre de défilement horizontale.

Les causes les plus fréquentes sont : les mises en page multi-colonnes qui ne passent pas en colonne unique, les tableaux de données larges sans mécanisme de défilement horizontal dédié, les images et vidéos à largeur fixe qui débordent, le texte avec white-space: nowrap, et les éléments avec des largeurs minimales (min-width) trop grandes.

Impact sur les utilisateurs

Pour les utilisateurs malvoyants qui zooment à 400%, un défilement horizontal est un obstacle majeur. Devoir défiler horizontalement en plus de verticalement pour lire chaque ligne de texte est extrêmement fatiguant et lent. L'utilisateur doit défiler à droite pour lire la fin de la ligne, revenir à gauche pour la ligne suivante, et ainsi de suite -- multipliant le temps de lecture par 3 ou 4.

Les utilisateurs de lecteurs d'écran avec un afficheur braille sont également affectés : le contenu qui déborde horizontalement peut ne pas apparaître dans leur flux de lecture linéaire. Les utilisateurs mobiles sont aussi concernés car 320px est une largeur courante sur les petits écrans.

Les données tabulaires (qui nécessitent par nature un défilement horizontal) sont exemptées de ce critère, à condition d'être dans un conteneur avec défilement horizontal dédié. Les autres contenus (texte, formulaires, navigation, médias) doivent se réorganiser.

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

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

Testez votre site gratuitement

Exemple de code

Avant (non conforme)
/* Mise en page qui ne s'adapte pas */
.container {
  min-width: 960px;
}

.grid {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
}

img {
  width: 800px; /* Largeur fixe */
}

.nav-links {
  white-space: nowrap; /* Force une seule ligne */
  overflow: hidden;
}
Après (conforme)
/* Mise en page adaptable */
.container {
  max-width: 100%;
  padding: 0 1rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: 300px 1fr 300px;
  }
}

img {
  max-width: 100%; /* S'adapte au conteneur */
  height: auto;
}

.nav-links {
  white-space: normal;
  flex-wrap: wrap;
}

Comment Scrutia détecte ce problème

Scrutia simule l'affichage de chaque page à une largeur de 320px CSS et détecte tout contenu qui déborde horizontalement ou nécessite un défilement horizontal. Il identifie les éléments responsables du débordement (images à largeur fixe, conteneurs avec min-width, texte nowrap) et vérifie que les mises en page multi-colonnes passent en colonne unique. Le rapport propose des correctifs CSS responsive pour chaque élément.

Questions fréquentes

Pourquoi 320px et pas une autre valeur ?
320px CSS correspond à un zoom de 400% sur un écran de 1280px de large. C'est le niveau de zoom que certains utilisateurs malvoyants utilisent. C'est aussi une largeur courante pour les petits écrans mobiles. Le WCAG a choisi ce seuil comme référence pratique.
Les tableaux de données sont-ils exemptés ?
Oui, les tableaux de données et les contenus qui nécessitent par nature un défilement dans les deux dimensions (cartes, diagrammes, tableaux) sont exemptés. Cependant, ils doivent être dans un conteneur avec overflow-x: auto pour fournir un défilement horizontal dédié sans affecter le reste de la page.
Comment tester le reflow ?
Réduisez la fenêtre de votre navigateur à 320px de large (ou zoomez à 400% depuis 1280px). Tout le contenu doit être lisible en défilant uniquement verticalement. Scrutia automatise ce test sur toutes vos pages.
Les media queries suffisent-elles ?
Les media queries sont l'outil principal, mais elles doivent couvrir toutes les largeurs jusqu'à 320px. Beaucoup de sites ont des breakpoints à 768px et 480px mais pas à 320px. Testez spécifiquement à 320px pour être conforme.

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