Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung
Accessibilité
Comment un site web reste-t-il lisible au téléphone sans défilement latéral ?
Un site web reste lisible sans défilement latéral quand ses contenus se rompent automatiquement en une colonne lorsqu'ils sont affichés étroitement — la norme pose 320 pixels de largeur — ce qui correspond à un téléphone étroit ou à une vue fortement agrandie sur un ordinateur. Celui qui doit alors faire défiler chaque ligne d'avant en arrière perd le fil de sa lecture.
Fluidité : les contenus s'adaptent à la largeur
La fluidité signifie : quand l'espace d'affichage devient plus étroit, les contenus se réorganisent — les colonnes côte à côte glissent les unes sous les autres, les images se réduisent, les lignes se rompent plus tôt. Cela affecte deux groupes simultanément. Premièrement, les utilisateurs de téléphones, c'est-à-dire la majorité des visiteurs sur la plupart des sites web. Deuxièmement, les personnes malvoyantes sur un ordinateur qui agrandissent fortement les pages : avec un agrandissement important, l'extrait visible correspond exactement à une présentation étroite. Si la page ne se recouvre pas, ils doivent faire défiler chaque ligne vers la droite puis revenir — la lecture devient une épreuve de patience. Les causes typiques sont les tableaux de largeur fixe, les cartes intégrées trop grandes et les images avec des dimensions de pixels fixes.
Ainsi, notre noyau de mesure teste le défilement latéral
Notre noyau de mesure restitue votre page dans un vrai navigateur selon plusieurs largeurs d'écran — dont la vue étroite de 320 pixels — et mesure si une barre de défilement horizontal apparaît et de combien de pixels le contenu déborde. Seule la possibilité de défilement effectivement mesurée compte comme constat ; pour exclure les faux positifs dus à des délais de chargement, le test mesure au besoin deux fois avec un décalage de 800 millisecondes et signale honnêtement les résultats instables comme « vérifier sur l'appareil réel ». Chaque constat nomme la largeur d'écran affectée et est documenté par une capture d'écran. Les résultats alimentent à la fois le domaine de contrôle Accessibilité et le domaine de contrôle Responsivité — c'est la même mesure.
Exemples
Largeur fixe sur mobile
.inhalt { width: 1100px; }
.tabelle { min-width: 900px; }.inhalt { max-width: 1100px; width: 100%; }
.tabelle-huelle { overflow-x: auto; }Avec une largeur de 320 pixels (400 pour cent de zoom), le contenu circule autour; seules les tables et les cartes peuvent avoir leur propre zone de défilement.
- Rétrécissez progressivement la fenêtre de votre navigateur à l'ordinateur jusqu'à la colonne étroite — une barre de défilement horizontal signale un problème.
- Vérifiez les tableaux en priorité : les grandes tables de données exigent une solution propre à la téléphonie, comme des conteneurs scrollables avec un indicateur visible.
- Demandez à votre agence de remplacer les largeurs de pixels fixes sur les images et conteneurs par des spécifications adaptables.
- Testez les contenus intégrés comme les cartes et vidéos en vue étroite — les composants tiers dépassent le cadre le plus souvent.
- Contrôlez la vue mobile après chaque mise à jour de contenu majeure, avant que la page ne soit mise en ligne.
