Taille de la cible tactile

Ce que nous vérifions

Tous les éléments interactifs doivent avoir une taille minimale de 44pt par 44pt, à la fois pour les zones visuelles et cliquables.

La zone de clic d'un élément interactif peut potentiellement être agrandie au-delà de ses limites visuelles - par exemple, en attachant un détecteur de geste avec une région d'activation plus grande. Après mûre réflexion, Deque maintient qu'il est préférable que les limites visuelles et interactives de la cible soient alignées. Cela offre à l'utilisateur un espace clair pour interagir, garantissant ainsi les meilleures chances de succès. Par conséquent, cette règle vérifie également que les limites visuelles des éléments interactifs respectent le minimum de 44pt.

Exemple échoué ❌

Touch target size = 20pt × 20pt

Cet élément est plus petit que le minimum de 44pt × 44pt

La zone de clic est trop petite pour être activée de manière fiable, surtout pour les utilisateurs ayant des limitations motrices

Exemple réussi ✅

Touch target size = 44pt × 44pt

Cet élément respecte le minimum de 44pt × 44pt

Les limites visuelles et cliquables sont suffisamment grandes pour être activées avec précision.

En un coup d'œil

• Cette règle a un impact modéré sur les utilisateurs
• Tous les éléments interactifs doivent avoir un cadre visuel et cliquable d'au moins 44pt × 44pt
• Les limites visuelles et interactives doivent toutes deux respecter le minimum
• Les petits contrôles sont un problème d'utilisation pour tout le monde, et particulièrement problématiques pour les utilisateurs ayant des limitations motrices

Impact sur les utilisateurs

Sur un appareil tactile, les petits contrôles sont un problème d'utilisation pour tout le monde. De plus, les personnes ayant des limitations motrices ont plus de difficultés à interagir avec des cibles petites et à les viser.

Confirmer le problème de taille de la cible tactile

Exécutez l'application dans Xcode et accédez à l'écran contenant l'élément interactif à tester.

1. Dans Xcode, sélectionnez Déboguer la hiérarchie de vue
2. Sélectionnez l'élément à tester
3. Ouvrez le panneau des inspecteurs s'il n'est pas visible
4. Sélectionnez le Inspecteur de taille
5. Observez la largeur et la hauteur de l'élément sélectionné

Si la largeur ou la hauteur est inférieure à 44pt, l'élément échoue à cette règle.

Corriger les problèmes

Pour résoudre les problèmes de taille de cible tactile, assurez-vous que le cadre visuel de chaque élément interactif est d'au moins 44pt × 44pt. Les limites visuelles et la zone de clic doivent correspondre — agrandir uniquement la zone tactile via un détecteur de geste n'est pas suffisant.

Un problème détecté par cette règle se produit lorsque le frame d'un contrôle actif n'a pas une hauteur et une largeur de 44pt ou plus.

UIKit

Définissez le cadre de l'élément interactif à au moins 44pt × 44pt en utilisant l'une des approches suivantes.

Dans le storyboard :

1. Accédez à l'élément interactif
2. Ouvrez le panneau des inspecteurs s'il n'est pas visible
3. Sélectionnez le Inspecteur de taille
4. Sous View, mettez à jour les paramètres width et height à au moins 44pt

Dans le code :

Mettez à jour les width et height du frame de l'élément interactif à au moins 44pt.

Cela peut être défini via l'initialiseur et un cadre spécifique :

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))

ou, peut être défini par des contraintes de vue. S'il y a une contrainte actuelle sur le bouton, allez-y et mettez à jour la largeur et la hauteur pour être au minimum de 44 points. Sinon, vous pouvez ajouter des contraintes :

// Update Height:
myButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

// Update Width:
myButton.widthAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

SwiftUI

Appliquez un modificateur de .frame pour étendre les contrôles à au moins 44pt × 44pt.

Champs de texte

Veuillez noter qu'actuellement dans SwiftUI, il n'y a pas de moyen cohérent d'augmenter la taille de la zone cliquable d'un champ de texte, donc un TextField SwiftUI renverra .INCOMPLETE pour cette règle. Un rapport radar a été déposé auprès d'Apple.

Boutons

Utilisez un modificateur de cadre sur le contenu du paramètre label plutôt que sur tout le bouton.

1. Utilisez l'initialiseur basé sur l'étiquette de Button, qui a 'action' comme premier paramètre et 'étiquette' comme deuxième paramètre comme montré ci-dessous.

Button(action: {
  print("Button tapped")
  }, label: {
  Text("Tap here")
  }
)

1. Ajoutez un modificateur de cadre au contenu du paramètre label du bouton, en spécifiant une hauteur et une largeur d'au moins 44.

Button(action: {
  print("Button tapped")
  }, label: {
  Text("Tap here")
    .frame(width: 80, height: 45)
  }
)

React Native

Utilisez des propriétés de taille spécifiques à la plateforme pour garantir que les contrôles respectent la taille minimale de la cible tactile.

Certains composants de React Native ne sont pas personnalisables pour permettre des ajustements de taille, tels que le composant Button. Si possible, assurez-vous que tous les éléments interactifs mesurent au moins 44pt par 44pt. Si cela n'est pas possible, envisagez d'autres composants qui vous permettent de modifier la taille.

Astuce : Lorsque vous utilisez des contrôles personnalisés, assurez-vous que le rôle d'accessibilité est correctement défini !

Flutter

Les widgets Matériel de Flutter (ElevatedButton, IconButton, etc.) imposent automatiquement une zone tactile minimale de 48pt par 48pt, ils répondent donc à cette exigence par défaut. Les violations proviennent généralement des cibles tactiles personnalisées créées avec GestureDetector, ce qui n'étend pas la zone tactile au-delà de la taille visuelle.

  // Failing — tap target is only 24×24
  GestureDetector(                                                                                      
    onTap: () {},
    child: Container(                                                                                   
      width: 24,                                                                                      
      height: 24,
      color: Colors.blue,
      child: const Icon(Icons.close, size: 16, color: Colors.white),                                    
    ),
  )                                                                                                     
                                                                                                      
  // Passing — tap target meets 44×44 minimum                                                           
  GestureDetector(
    onTap: () {},                                                                                       
    child: Container(                                                                                 
      width: 44,
      height: 44,
      color: Colors.blue,
      child: const Icon(Icons.close, size: 24, color: Colors.white),
    ),                                                                                                  
  )

Puis-je ignorer cette règle ?

La taille de la cible tactile a un impact modéré pour les utilisateurs. Dans les cas où une contrainte de conception empêche de respecter le minimum de 44pt — comme une icône de barre d'outils dans une interface très dense — documentez la décision et explorez des alternatives avant d'ignorer la règle. En savoir plus sur ignorer les règles.

Ressources

Pages de cours de Deque University

• 2.5.5 Taille de la cible (AAA)

Remarque : L'accès complet aux ressources de Deque University nécessite un abonnement.

Autres ressources

• Règles pour l'accessibilité des contenus web (WCAG) 2.1, recommandation du W3C
  • Critère de succès 2.5.5 - Taille de la cible
• Documents de compréhension du WCAG 2.1
  • Comprendre 2.5.5 AAA - Taille de la cible