Défilement horizontal sur mobile

Silktide vérifie si vos pages défilent latéralement sur les téléphones mobiles. Le contenu doit s’adapter à la largeur d’un petit écran, afin que les visiteurs ne fassent défiler que vers le bas.

Pourquoi c’est important

Lorsqu’une page est plus large que l’écran, une partie de chaque ligne de texte sort du cadre, et le lecteur doit glisser d’un côté à l’autre pour suivre le contenu. C’est fatigant pour tout le monde et constitue un réel obstacle pour les personnes malvoyantes (qui oftent aussi agrandissent la page) et les personnes ayant des troubles moteurs. Le critère de succès 1.4.10 (Réagencement, des ) exige que le contenu s’adapte à un écran de 320 pixels de large sans défilement dans deux dimensions.

En général, la page dans son ensemble est correcte et un seul élément provoque le débordement - un tableau large, une image à largeur fixe, une vidéo intégrée, ou une longue chaîne non sécable telle qu’une URL.

Comment corriger

Ouvrez la page sur un téléphone (ou réduisez la fenêtre de votre navigateur à 320 pixels) et repérez ce qui dépasse sur le bord droit.
Corrigez l’élément en cause avec du responsive :

/* Un élément à largeur fixe force la page à dépasser la largeur de l'écran */
img.hero { width: 600px; }

/* Corrigé : se réduit pour s'adapter aux écrans étroits */
img.hero { max-width: 100%; height: auto; }

Pour les tableaux de données larges, faites défiler le tableau dans son propre conteneur (overflow-x: auto) afin que le reste de la page continue de s’adapter à l’écran.
Le contenu qui a réellement besoin d’une mise en page bidimensionnelle, comme les cartes et les diagrammes, est autorisé à défiler - si c’est tout ce que le constat montre, vous pouvez l’.

Comment Silktide teste cela

Charger la page en mode appareil mobile.
Mesurer jusqu’où la page dépasse le bord droit de l’écran. Un débordement inférieur à 10 pixels est ignoré comme erreur d’arrondi.
Classer le débordement selon le nombre d’appareils affectés, d’un léger débordement qui ne touche que les petits téléphones (320 pixels de large, comme un iPhone 5) jusqu’à un débordement suffisamment large pour affecter les grands téléphones (414 pixels de large, comme un iPhone 7 Plus).

Dépannage

La vérification de conception mobile associée

Cette vérification signale un débordement horizontal sur des pages par ailleurs adaptées au mobile. Les pages qui ne tentent pas du tout de prendre en charge le mobile - pas de , texte minuscule, débordement extrême - sont signalées par Zoom et défilement sur mobile à la place, où la solution est une refonte responsive.

Je ne vois aucun défilement

Les petits débordements peuvent être invisibles sur les téléphones plus grands. Testez à 320 pixels de large - les outils de développement du navigateur permettent de définir la largeur exacte - et recherchez tout ce qui dépasse le bord droit.