Zoom et défilement sur mobile
Silktide vérifie que vos pages fonctionnent sur les petits écrans sans obliger les visiteurs à zoomer et à faire glisser la page dans deux directions pour la lire. Les pages qui échouent ici n’ont généralement pas été conçues pour les appareils mobiles.
Pourquoi c’est important
Lire sur un téléphone une page conçue uniquement pour ordinateur de bureau implique de pincer pour zoomer sur une colonne de texte, puis de faire défiler à la fois horizontalement et verticalement à chaque ligne — pénible pour tout le monde, et impossible pour de nombreuses personnes ayant une basse vision ou des troubles moteurs. Les appareils mobiles représentent désormais la majorité du trafic web ; une telle page échoue donc pour la plupart de ses visiteurs, et les moteurs de recherche la déclassent pour cela. Le critère de succès 1.4.10 (Réorganisation [Reflow], des ) exige que le contenu se réorganise pour un écran de 320 pixels de large, sans défilement bidimensionnel.
Comment corriger
- Utilisez une conception web responsive, afin que la page se réorganise en une seule colonne sur les écrans étroits. La mise en page moderne (requêtes média, flexbox, grid) en fait une pratique standard ; la plupart des thèmes de site la prennent en charge par défaut.
- Incluez une balise correcte dans le modèle de votre page :
<!-- Indique aux navigateurs mobiles d’afficher à la largeur de l’appareil -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Testez la page à 320 pixels de large (la plus petite largeur de téléphone courante) et vérifiez que rien n’impose de défilement horizontal — des tableaux très larges, des images à largeur fixe et de longues chaînes non sécables sont des coupables fréquents.
Si une page ne peut pas raisonnablement être rendue responsive, vous pouvez le constat.
Comment Silktide teste ceci
- Charger la page comme sur un appareil mobile.
- Déterminer si la page semble conçue pour le mobile. Une page échoue si l’un des cas suivants s’applique :
- Elle n’a pas de balise viewport utilisable, ou le viewport déclare une largeur fixe supérieure à 480 pixels.
- Plus de 35 % de son texte s’affiche trop petit pour être lisible (moins de 10 pixels).
- Elle défile horizontalement de plus de 40 % de la largeur de l’écran.
- Le navigateur doit réduire le zoom en dessous de 60 % pour faire tenir la page à l’écran.
- Signaler la page en cas d’échec, une fois par page.
Dépannage
Le contrôle lié au défilement horizontal
Défilement horizontal sur mobile signale de plus petites quantités de débordement horizontal sur des pages par ailleurs adaptées au mobile. Ce contrôle couvre le cas extrême où la page n’essaie pas du tout de prendre en charge le mobile ; la correction consiste donc en une refonte responsive plutôt qu’en l’ajustement d’un seul élément débordant.
Certaines parties de ma page nécessitent réellement une mise en page bidimensionnelle
Les WCAG autorisent des exceptions pour le contenu qui nécessite une mise en page bidimensionnelle pour être utilisable, comme les cartes, les tableaux de données et les diagrammes. La page autour d’eux doit toutefois se réorganiser ; si une page signalée constitue une telle exception, approuvez le constat.