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 assez grands, et d'avoir assez d'espace autour d'eux, afin qu'elles soient faciles à appuyer sans chevaucher accidentellement d'autres éléments. Cela profite à tous les utilisateurs, mais il 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, alors qu'une icône peut n'avoir qu'une largeur et une hauteur de 24 pixels, vous pouvez ajouter une marge intérieure pour que la taille de l'élément tactile passe à 48 pixels. La zone de 48 x 48 pixels correspond à environ 9 mm, qui est à peu près de la taille de la zone du pavé tactile 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 être espacées d'environ 8 pixels, à la fois horizontalement et verticalement, afin que le doigt d'un utilisateur qui appuie sur un élément tactile ne touche pas par inadvertance un autre élément 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 dimensionner le texte et la marge intérieure,
vous pouvez utiliser les outils de développement pour vérifier que la valeur calculée pour cette zone est suffisamment grande.
Dans l'exemple ci-dessous, j'utilise em pour le texte et la marge intérieure.
Inspectez l'a du lien.
Dans les outils pour les développeurs Chrome, passez au volet de calcul, où vous pouvez inspecter les différentes parties de la boîte.
et voir à quelle taille de
pixel elles se résolvent.
Dans les outils de développement Firefox, il existe un panneau de mise en page.
Dans ce panneau, vous obtenez la taille réelle de l'élément inspecté.
Utiliser des requêtes média pour détecter l'utilisation de l'écran tactile
Au lieu de simplement tester les dimensions de la fenêtre d'affichage, que les petites dimensions sont probablement des téléphones ou des tablettes, qui eux-mêmes 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).
si l'une 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 fin 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 aussi
un écran d'ordinateur portable ou une grande tablette.
Si vous ajustez votre CSS dans une requête média pour augmenter la cible tactile, tester un pointeur approximatif vous permet d'augmenter les éléments tactiles pour tous les utilisateurs d'écrans tactiles. La zone tactile est ainsi plus grande, 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 d'interaction avec les médias, comme le pointeur, dans l'article Principes de base du Responsive Web Design.