Lorsque votre conception s'affiche sur un appareil mobile, assurez-vous que les éléments interactifs tels que les boutons ou les liens sont suffisamment grands et entourés d'un espace suffisant pour que l'utilisateur puisse appuyer dessus facilement sans appuyer en même temps sur d'autres éléments. Cela profite à tous les utilisateurs, mais est particulièrement utile pour les personnes souffrant d'un handicap moteur.
La taille minimale recommandée des zones cibles tactiles est d'environ 48 pixels indépendants des appareils sur un site dont la fenêtre d'affichage pour mobile est correctement définie. Par exemple, même si la largeur et la hauteur d'une icône ne peuvent pas dépasser 24 pixels, vous pouvez utiliser une marge intérieure supplémentaire pour atteindre la taille de 48 pixels. La zone de 48 x 48 pixels correspond à environ 9 mm, ce qui correspond à peu près à la zone du pavé tactile d'une personne.
Dans la démonstration, j'ai ajouté une marge intérieure à tous les liens pour m'assurer qu'ils respectent la taille minimale.
Les cibles tactiles doivent également être espacées d'environ huit pixels, à la fois horizontalement et verticalement, afin que le doigt de l'utilisateur qui appuie sur une cible tactile ne touche pas par inadvertance une autre cible tactile.
Tester vos zones cibles tactiles
Si votre cible est du texte et que vous avez utilisé des valeurs relatives telles que em ou rem pour définir la taille du texte et de la marge intérieure, vous pouvez utiliser DevTools pour vérifier que la valeur calculée de cette zone est suffisamment grande.
Dans l'exemple ci-dessous, j'utilise em pour mon texte et ma marge intérieure.
Inspectez le a du lien, puis dans Chrome DevTools, passez au volet "Computed" (Comptabilisé), où vous pouvez inspecter les différentes parties de la zone et voir à quelle taille en pixels elles se résolvent.
Les outils de développement Firefox comportent un panneau de mise en page.
Dans ce panneau, vous obtenez la taille réelle de l'élément inspecté.
Utiliser des requêtes multimédias pour détecter l'utilisation d'un écran tactile
Au lieu de simplement tester les dimensions de la fenêtre d'affichage, puis de deviner que les petites dimensions correspondent probablement à des téléphones ou des tablettes, qui à leur tour utilisent un écran tactile, il existe désormais des moyens plus robustes d'adapter votre conception en fonction des capacités réelles de l'appareil.
L'une des fonctionnalités multimédias que nous pouvons désormais tester avec les requêtes multimédias est de savoir si l'entrée principale de l'utilisateur est un écran tactile (pointer) et si n'importe laquelle des entrées actuellement détectées est un écran tactile (any-pointer). Les fonctionnalités pointer et any-pointer renvoient fine ou coarse.
Un pointeur précis est une personne qui utilise une souris ou un pavé tactile, même si cette souris est connectée via Bluetooth à un téléphone.
Un pointeur coarse indique un écran tactile, qui peut être un appareil mobile, mais également un écran d'ordinateur portable ou une grande tablette.
Si vous ajustez votre CSS dans une requête multimédia pour augmenter la cible tactile, tester un pointeur grossier vous permet d'augmenter les cibles de pression pour tous les utilisateurs d'écran tactile. Cela offre une zone de pression plus grande, que l'appareil soit un téléphone ou un appareil plus grand.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Pour en savoir plus sur les fonctionnalités multimédias d'interaction telles que le pointeur, consultez l'article Principes de base du Responsive Web Design.