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 oblige à pincer pour zoomer sur une colonne de texte, puis à faire défiler à la fois horizontalement et verticalement à chaque ligne — pénible pour tous et impossible pour de nombreuses personnes ayant une basse vision ou des limitations motrices. Les appareils mobiles représentent maintenant la majorité du trafic Web; une telle page déçoit donc la plupart de ses visiteurs et est pénalisée par les moteurs de recherche. Le critère de réussite 1.4.10 des WCAG (Réagencement, des ) exige que le contenu se réagence pour un écran d’une largeur de 320 pixels, sans défilement bidimensionnel.
Comment le corriger
- Utilisez une conception Web adaptative (responsive), afin que la page se réagence en une seule colonne sur les écrans étroits. La mise en page moderne (requêtes média, flexbox, grille) en fait une pratique courante; la plupart des thèmes de site la prennent en charge d’emblée.
- Incluez une balise correcte dans votre gabarit de page :
<!-- Tells mobile browsers to render at the device's width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Testez la page à 320 pixels de large (la plus petite largeur courante de téléphone) et vérifiez que rien n’impose de défilement horizontal — les tableaux larges, les images à largeur fixe et les longues chaînes non sécables en sont souvent la cause.
Si une page ne peut pas raisonnablement être rendue adaptative, vous pouvez le constat.
Comment Silktide teste cela
- Charger la page comme sur un appareil mobile.
- Évaluer si la page semble conçue pour le mobile. Une page échoue lorsque l’une des conditions suivantes est remplie :
- Elle n’a pas de balise viewport utilisable, ou la balise 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 dézoomer à moins de 60 % pour faire tenir la page à l’écran.
- Signaler la page lorsqu’elle échoue, une seule 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épassement horizontal sur des pages par ailleurs adaptées au mobile. Ce contrôle détecte le cas extrême où la page n’essaie pas du tout de prendre en charge le mobile; la solution est alors une refonte adaptative plutôt qu’un ajustement d’un seul élément qui déborde.
Certaines parties de ma page ont réellement besoin d’une mise en page bidimensionnelle
Les WCAG autorisent des exceptions pour du contenu qui nécessite une mise en page bidimensionnelle pour être utilisable, comme les cartes, les tableaux de données et les diagrammes. Le reste de la page devrait quand même se réagencer; si une page signalée constitue une telle exception, approuvez le constat.