Défilement horizontal sur mobile
Silktide vérifie si vos pages défilent latéralement sur les téléphones intelligents. Le contenu devrait s'adapter à la largeur d'un petit écran, de sorte que les visiteurs ne fassent défiler que vers le bas.
Pourquoi c'est important
Lorsque la page est plus large que l'écran, une partie de chaque ligne de texte se retrouve hors de vue, et le lecteur doit faire glisser d'un côté à l'autre pour suivre le contenu. C'est fatigant pour tout le monde et un véritable obstacle pour les personnes ayant une basse vision (qui agrandissent souvent la page) et les personnes ayant des limitations motrices. Le critère de réussite 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.
Habituellement, la page dans son ensemble est correcte et un seul élément provoque le débordement - un tableau trop large, une image à largeur fixe, une vidéo intégrée, ou une longue chaîne non sécable (p. ex., une URL).
Comment corriger
- Ouvrez la page sur un téléphone (ou rétrécissez la fenêtre de votre navigateur à 320 pixels) et trouvez ce qui dépasse du bord droit.
- Corrigez l'élément fautif avec du adaptatif (responsive) :
\/* Un élément à largeur fixe force la page à être plus large que 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, laissez le tableau défiler à l'intérieur de son propre conteneur (
overflow-x: auto) afin que le reste de la page tienne toujours dans l'écran. - Le contenu qui nécessite réellement une mise en page bidimensionnelle, comme les cartes et les diagrammes, est autorisé à défiler - si c'est tout ce que le constat indique, vous pouvez l'.
Comment Silktide teste cela
- Charger la page en mode appareil mobile.
- Mesurer à quel point la page dépasse du bord droit de l'écran. Tout débordement inférieur à 10 pixels est ignoré comme erreur d'arrondi.
- Classer le débordement en fonction du nombre d'appareils touchés, allant 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 toucher les grands téléphones (414 pixels de large, comme un iPhone 7 Plus).
Dépannage
La vérification de conception mobile connexe
Cette vérification signale un débordement horizontal sur des pages autrement adaptées aux appareils mobiles. Les pages qui n'essaient 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, où la correction consiste en une refonte adaptative (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 précisément la largeur - et repérez tout ce qui franchit le bord droit.