Distinguer la forme visible de la zone interactive
Pour une petite icône comme un bouton pause, faites dépasser le conteneur interactif de l’icône dessinée. Espacez suffisamment les commandes voisines pour qu’un doigt ne les active pas toutes les deux par accident. Dans un jeu canvas, dessinez l’objet et calculez sa zone interactive à partir des mêmes données de mise en page : dupliquer les coordonnées dans plusieurs chemins de code risque de créer des écarts.
Le critère de réussite 2.5.8 de WCAG 2.2 fixe une taille minimale de 24 × 24 pixels CSS, avec des exceptions définies, notamment pour l’espacement et les commandes équivalentes. Considérez-le comme une exigence d’accessibilité, pas comme une limite de conception : une cible mobile ou une action principale peut nécessiter une zone plus grande. Ne comptez pas uniquement sur la couleur ou une bordure discrète pour indiquer où le toucher est détecté.
Vérifier les zones interactives sur de vrais écrans
Testez les appuis près de chaque bord et de chaque coin, entre des commandes voisines et lorsque la surface de jeu change d’échelle. Vérifiez que la commande visible, la zone interactive DOM et les coordonnées du monde du jeu correspondent à la même action. Pour les petits objets mobiles, vous pouvez agrandir la zone de détection au-delà de l’illustration tout en maintenant une séparation suffisante avec les dangers.
Testez différentes tailles de fenêtre d’affichage au toucher. Une souris peut viser un endroit qu’un doigt ne peut pas atteindre avec la même précision. Convertissez les positions du pointeur dans le système de coordonnées de la surface et vérifiez-les après un redimensionnement. L’explication du W3C décrit le critère et ses exceptions.
Questions sur taille de la cible tactile du jeu
Chaque cible du jeu doit-elle mesurer au moins 24 pixels ?
Le critère 2.5.8 de WCAG 2.2 exige une cible d’au moins 24 × 24 pixels CSS pour les entrées par pointeur, avec des exceptions. Évaluez ce critère et prévoyez une zone plus grande si le contexte du jeu le nécessite.
La zone interactive peut-elle dépasser l’illustration ?
Oui. Une zone interactive avec marge peut faciliter l’activation d’une petite icône, à condition que les commandes proches restent distinctes et produisent des résultats prévisibles.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction