Contenu non adaptable au zoom : reflow, critère RGAA 10.11

C'est quoi

Le critère RGAA 10.11 s'appuie sur le critère WCAG 1.4.10 (Reflow, niveau AA). Il exige que le contenu puisse être affiché dans une largeur de 320px sans perte d'information et sans défilement horizontal.

L'objectif : les utilisateurs malvoyants qui zooment fortement ne doivent pas être obligés de scroller dans deux directions simultanément.

Cas particuliers acceptés (pas de reflow requis) :

Les tableaux de données complexes à deux dimensions.
Les cartes géographiques.
Les interfaces qui nécessitent une vue panoramique (présentations, outils graphiques).

Test pratique : zoome à 400% sur un écran 1280px (ou réduis la fenêtre à 320px de large) et vérifie qu'il n'y a pas de défilement horizontal.

Qui est touché

Les personnes malvoyantes qui agrandissent fortement les pages pour lire confortablement : elles se retrouvent avec un défilement horizontal permanent.
Les utilisateurs âgés dont la vue baisse et qui utilisent le zoom du navigateur comme principal moyen d'agrandissement.
Les utilisateurs sur petits écrans ou fenêtres réduites.

Impact business

Sur une page qui ne supporte pas le reflow, l'utilisateur malvoyant est forcé de scroller horizontalement pour lire chaque ligne. C'est une charge cognitive et motrice disproportionnée qui conduit souvent à l'abandon.

Le responsive design moderne résout naturellement ce problème. Les erreurs viennent surtout des blocs à largeur fixe (email templates intégrés, widgets anciens, tableaux sans responsive).

Sources des chiffres

Comment le détecter

Audit Mynto : le scan simule différentes largeurs d'affichage et détecte les débordements horizontaux.
Manuel : ouvre Chrome DevTools, passe en mode responsive à 320px de largeur. Y a-t-il un défilement horizontal ? Des éléments débordent-ils ?
Zoom navigateur : zoome à 400% (Ctrl+= plusieurs fois) ou réduis la fenêtre à 320px de large. La page doit s'adapter sans défilement horizontal.

Comment corriger

Avant - CSS

/* Largeurs fixes qui provoquent un débordement */
.content-block {
  width: 960px;
}

.banner-image {
  min-width: 800px;
}

Après - CSS

/* Largeurs fluides qui s'adaptent */
.content-block {
  width: 100%;
  max-width: 960px;
}

.banner-image {
  width: 100%;
  height: auto;
}

Remplace les largeurs fixes (px) par des largeurs fluides (%, max-width) et utilise des media queries pour adapter la mise en page aux petites largeurs.

Points critiques à vérifier :

Tableaux : utiliser overflow-x: auto sur le conteneur pour qu'ils défilent dans leur zone sans faire déborder la page.
Images : max-width: 100% sur toutes les images.
Grilles CSS (grid, flexbox) : passer en colonne unique sous 480px.

Sur WordPress, les thèmes modernes gèrent le reflow nativement. Si un widget ou un bloc provoque le problème, c'est lui qu'il faut corriger.

Questions fréquentes

Quelle largeur minimale tester ?

320px, c'est le seuil recommandé par WCAG pour le reflow. En pratique, tester à 320px et à 375px (largeur iPhone SE) couvre les cas les plus contraints.

Les tableaux de données sont-ils exemptés ?

Oui, pour les tableaux de données complexes qui requièrent une mise en page bidimensionnelle. L'exemption ne s'applique pas aux tableaux utilisés pour la mise en page visuelle.

Ce critère s'applique-t-il aussi aux applications web ?

Oui. Toute interface web - site, application, outil en ligne - doit respecter ce critère. Les tableaux de bord et les formulaires complexes sont souvent les plus difficiles à rendre adaptatifs.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Contenu non adaptable à l'affichage en colonne unique (reflow)