# Testez la zone touchée, pas seulement l'illustration du bouton

> Facilitez l'accès aux commandes de jeu en séparant les illustrations visuelles des limites interactives et en vérifiant la taille, l'espacement et le chevauchement sur les appareils tactiles.

- URL: https://oneshotgems.ai/fr/topics/game-touch-targets
- Catégorie: Pour les développeurs de jeux
- Type: Guide
- Mis à jour le: 5 octobre 2026

Un contrôle peut paraître volumineux alors que sa zone d'accès réelle ne constitue qu'une infime partie de l'illustration. Dans un jeu par navigateur, définissez délibérément les limites interactives et testez-les avec un doigt, pas seulement avec le pointeur précis de la souris. La bonne cible dépend de son rôle, de son espacement et du mouvement environnant, mais les régions touchées clairement réduisent les échecs accidentels et facilitent le raisonnement.

## 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

**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.

## Suivez votre curiosité

- [Concevoir les commandes tactiles des jeux web](https://oneshotgems.ai/fr/topics/touch-controls-for-web-games): Planifiez les interactions tactiles en tenant compte des gestes du navigateur, de retours visuels lisibles et de l’état du pointeur afin que le jeu réponde de façon prévisible sur téléphone.
- [Créer des mises en page adaptatives pour les jeux web](https://oneshotgems.ai/fr/topics/responsive-game-layouts): Adaptez une surface de jeu à son conteneur sans lier l'état de simulation aux dimensions de l'écran et testez la disposition dans des fenêtres changeantes.
- [Concevoir un jeu mobile pour jouer avec un seul pouce](https://oneshotgems.ai/fr/topics/one-thumb-mobile-game-design): Limitez les commandes à un ensemble utilisable avec un pouce, tenez compte de la position de la main et de ce qu’elle masque, puis testez la mécanique avec des prises en main réalistes.

## Pour aller plus loin

- [W3C : Taille cible (minimale)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- [MDN : événements de pointeur](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

---
Page canonique: https://oneshotgems.ai/fr/topics/game-touch-targets