Lorsque votre conception est affichée sur un appareil mobile, vous devez vous assurer que les éléments interactifs tels que les boutons ou les liens sont suffisamment grands et qu'ils disposent de suffisamment d'espace autour pour qu'ils soient faciles à appuyer sans qu'ils se chevauchent accidentellement 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 de l'appareil sur un site dont la fenêtre d'affichage pour mobile est correctement définie. Par exemple, bien qu'une icône ne puisse avoir qu'une largeur et une hauteur de 24 pixels, vous pouvez utiliser une marge intérieure supplémentaire pour que la taille de l'élément tactile puisse atteindre 48 pixels. La zone de 48 x 48 pixels correspond à environ 9 mm, soit à peu près la taille de la zone du bout du doigt d'une personne.
Dans la démonstration, j'ai ajouté une marge intérieure à tous les liens afin de m'assurer qu'ils respectent la taille minimale.
Les zones cibles tactiles doivent également être espacées d'environ huit pixels, horizontalement et verticalement, afin que le doigt d'un utilisateur qui appuie sur une zone cible tactile ne le fasse pas par inadvertance.
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 dimensionner le texte et toute marge intérieure, vous pouvez utiliser les outils de développement pour vérifier que la valeur calculée de cette zone est suffisamment grande.
Dans l'exemple ci-dessous, j'utilise em pour le texte et la marge intérieure.
Inspectez l'élément a du lien et, dans les outils pour les développeurs Chrome, accédez au volet calculé pour inspecter les différentes parties de la zone et voir la taille en pixels correspondant à leur résolution.
Dans les outils pour les développeurs Firefox, il y a un panneau de mise en page.
Ce panneau affiche la taille réelle de l'élément inspecté.
Utiliser des requêtes multimédias pour détecter l'utilisation de l'écran tactile
Au lieu de simplement tester les dimensions de la fenêtre d'affichage, puis de deviner que les petites dimensions sont 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 média 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 renverront fine ou coarse.
Un pointeur fin est une personne qui utilise une souris ou un pavé tactile, même si cette souris est connectée à un téléphone via Bluetooth.
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 média pour augmenter la zone cible tactile, tester un pointeur grossier vous permet d'augmenter les zones cibles tactiles pour tous les utilisateurs de l'écran tactile. Ainsi, la zone cliquable est plus étendue, qu'il s'agisse d'un téléphone ou d'un appareil plus grand.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Pour en savoir plus sur les fonctionnalités de média d'interaction, telles que le pointeur, consultez l'article Principes de base du Responsive Web Design.