Redistribution

Ce que le critère demande

Lorsque la fenêtre de visualisation est de 320 pixels CSS de large — ce qui correspond à un bureau de 1 280 px à 400 % de zoom, ou un petit appareil mobile — le contenu doit se redistribuer en une seule colonne sans nécessiter de défilement horizontal. L’utilisateur ne doit jamais avoir à faire défiler à la fois verticalement et horizontalement pour lire du contenu continu. Des exceptions essentielles sont admises : tableaux de données, cartes complexes, exemples de code et présentations pour lesquels le défilement bidimensionnel est inhérent au contenu.

Comment le respecter

• Construire la mise en page en priorité mobile avec flexbox ou CSS grid, qui se replie en une seule colonne pour les petites largeurs.
• Tester exactement à 320 px de largeur de fenêtre — ou à 400 % de zoom dans un navigateur sur une fenêtre de 1 280 px — et vérifier chaque page.
• Utiliser max-width: 100% sur les images, vidéos et médias intégrés pour qu’ils se réduisent avec la fenêtre.
• Pour la navigation, replier la barre de navigation horizontale du bureau en un menu mobile vertical au bon point de rupture.
• Pour les tableaux de données, autoriser le défilement horizontal à l’intérieur d’un conteneur overflow-x: auto — le tableau lui-même est exempté, mais son conteneur ne doit pas faire défiler la page latéralement.
• Ne pas utiliser de largeurs fixes en pixels sur les conteneurs principaux ni sur les modales.

Échecs courants

• Sections héros à largeur fixe (width: 1200px) qui débordent de la fenêtre à 320 px, forçant le défilement horizontal.
• Boîtes de dialogue modales dimensionnées en vw / px qui dépassent 320 px de large et sont rognées sur les petits écrans.
• Exemples de code dans des blocs <pre> sans retour à la ligne ni conteneur de défilement, faisant s’élargir la page.
• Pages marketing avec des éléments décoratifs positionnés en absolu qui ne tiennent pas compte des fenêtres étroites.
• Éléments épinglés qui chevauchent le contenu à 400 % de zoom parce qu’ils ont été dimensionnés pour la fenêtre pleine largeur.
• Tableaux non inclus dans un conteneur de défilement, faisant défiler la page entière horizontalement au lieu du seul tableau.

Pourquoi c’est important

La redistribution est le critère qui détecte la plupart des sites « responsifs mais pas vraiment responsifs » — une mise en page qui se casse à 320 px CSS équivaut à une mise en page qui se casse à 400 % de zoom pour un utilisateur malvoyant sur bureau. Les deux cas sont mathématiquement identiques. Corriger la redistribution implique généralement de consolider le design responsif qui était déjà en grande partie fonctionnel, ce qui en fait l’une des corrections WCAG les plus rentables.