Le contenu de votre site s'adapte-t-il sans défilement horizontal quand l'affichage est réduit à la largeur d'un mobile ?
Critère officiel 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 hauteur de 256px ou à un défilement horizontal pour une fenêtre ayant une largeur de 320px (hors cas particuliers) ?
Pourquoi c'est important
Les personnes malvoyantes qui agrandissent fortement leur navigateur se retrouvent avec une fenêtre très étroite — équivalente à un petit mobile. Si le site impose un défilement latéral pour lire le contenu, elles doivent se déplacer horizontalement à chaque ligne de texte. C'est une expérience épuisante qui rend la lecture pratiquement impossible.
Exemples concrets
Ce qui est conforme
La page des délibérations du conseil, affichée à 320 pixels de large, reorganise automatiquement le contenu en une seule colonne lisible. Tous les boutons, formulaires et liens restent accessibles sans aucun défilement horizontal.
Ce qui pose problème
Le tableau des tarifs de la cantine a des colonnes de largeur fixe. À 320 pixels, le tableau dépasse sur la droite. Une partie des montants est coupée et nécessite un défilement latéral pour être consultée sur mobile ou en fort zoom.
Comment agir
Test autonome : dans Chrome ou Firefox, ouvrez les outils développeur (F12), cliquez sur l'icône de téléphone (mode responsive) et sélectionnez une largeur de 320 pixels. Vérifiez que tout le contenu est accessible sans défilement latéral. Les tableaux de données complexes sont une exception tolérée — tout le reste doit s'adapter.
Règles clés
- Tester à 320px de large : ouvrir les DevTools, passer en mode responsive, régler à 320px, vérifier qu'aucun scroll horizontal n'apparaît.
- Toutes les largeurs de mise en page doivent être en % ou utiliser max-width, pas width:NNNpx fixe.
- Les images doivent avoir max-width:100% et height:auto.
- Les tableaux de données complexes sont exemptés — mais signaler leur présence dans le rapport.
- Les blocs de code (<pre><code>) peuvent avoir un scroll horizontal interne — c'est acceptable si le bloc lui-même ne dépasse pas le viewport.
- Breakpoint recommandé : vérifier que la mise en page mobile est activée avant 320px.
Erreurs fréquentes
- Éléments avec largeur fixe en px qui dépassent 320px (tableaux, images, blocs de code)
- Flexbox ou grid sans flex-wrap qui force les éléments sur une ligne unique non scrollable
- Navigation horizontale qui ne bascule pas en menu hamburger ou en colonne à 320px
- Marges et paddings fixes en px qui réduisent l'espace disponible pour le texte
- Images sans max-width:100% qui dépassent le viewport
- position:absolute ou position:fixed avec des coordonnées fixes qui sortent du viewport
Exemples de code
élément à largeur fixe dépassant le viewport
✗ Non conforme.hero-banner {
width: 1200px; /* fixe — dépasse systématiquement 320px */
background: #1a1a6e;
padding: 60px;
}Un élément à 1200px de large crée un défilement horizontal sur toute résolution inférieure à 1200px. À 320px, l'utilisateur doit défiler horizontalement sur toute la page.
élément fluide avec max-width
✓ Conforme.hero-banner {
width: 100%; /* occupe toute la largeur disponible */
max-width: 1200px; /* mais ne dépasse pas 1200px */
background: #1a1a6e;
padding: clamp(1rem, 5vw, 60px); /* padding adaptatif */
}width:100% + max-width permet à l'élément de s'adapter à toute largeur de fenêtre. clamp() pour le padding évite les marges internes excessives sur mobile.
flexbox sans wrap
✗ Non conforme.nav-links {
display: flex;
/* Pas de flex-wrap — les liens restent sur une ligne
même si l'espace est insuffisant */
}
.nav-links a {
padding: 0 1.5rem;
white-space: nowrap;
}Sans flex-wrap:wrap, les liens de navigation restent sur une seule ligne. À 320px, ils débordent du viewport et créent un défilement horizontal.
navigation responsive adaptée
✓ Conforme/* Desktop : flex horizontal */
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Mobile : menu hamburger */
@media (max-width: 768px) {
.nav-links {
display: none; /* remplacé par menu hamburger */
}
.nav-links.is-open {
display: flex;
flex-direction: column;
}
}flex-wrap:wrap évite le débordement horizontal. Sur mobile, la navigation bascule en menu hamburger vertical — pas de défilement horizontal possible.
bloc de code avec scroll interne
✓ Conforme/* Bloc de code : scroll interne acceptable */
pre {
max-width: 100%; /* ne dépasse pas le viewport */
overflow-x: auto; /* scroll horizontal DANS le bloc */
padding: 1rem;
background: #f4f4f4;
}
pre code {
white-space: pre; /* préserve le formatage */
display: block;
}Le bloc <pre> lui-même ne dépasse pas le viewport (max-width:100%). Son contenu peut scroller horizontalement en interne (overflow-x:auto) — c'est l'exception acceptable pour les blocs de code.
Référence WCAG : 1.4.10