Espacement des cibles tactiles

Ce que nous vérifions

Les éléments interactifs doivent avoir une dimension minimale de 24 × 24 points, ou avoir suffisamment de marge autour d'eux pour qu'un cercle d'un diamètre de 24 points placé au centre de l'élément ne croise pas une autre cible ni avec le cercle pour une autre cible.

La zone d'impact d'un élément interactif peut potentiellement être étendue au-delà de ses limites visuelles — par exemple, en attachant un détecteur de gestes avec une région d'activation plus grande. Après mûre réflexion, Deque considère que la meilleure pratique est d'aligner les limites visuelles et interactives de la cible. Cela donne à l'utilisateur final une zone claire pour interagir avec une meilleure chance de succès. Par conséquent, cette règle vérifie également que les limites visuelles des éléments interactifs respectent le minimum de 24pt.

Exemple d'échec ❌

Touch target spacing n'est pas suffisant

Ces contrôles sont trop proches les uns des autres - un cercle de 24pt de diamètre centré sur l'un chevauche l'autre

Les utilisateurs avec des limitations motrices peuvent activer accidentellement le mauvais élément

Exemple réussi ✅

Touch target spacing est suffisant

Chaque contrôle est soit d'au moins 24pt × 24pt, soit entouré d'un espace suffisant pour qu'un cercle de 24pt de diamètre centré sur lui ne croise pas de cible adjacente

En un coup d'œil

• Cette règle a un impact sérieux pour les utilisateurs
• Les éléments interactifs doivent être au moins de 24pt × 24pt, OU positionnés de sorte qu'un cercle de 24pt de diamètre centré sur l'élément ne chevauche pas de cible adjacente
• Les limites visuelles et interactives (zone d'impact) doivent toutes deux respecter le minimum
• Les curseurs doivent maintenir au moins 24pt d'espace le long de leur longueur
• Des contrôles petits et trop rapprochés sont particulièrement difficiles pour les utilisateurs avec des limitations motrices

Impact sur les utilisateurs

Sur un appareil tactile, les petits contrôles sont un problème d'ergonomie pour tout le monde. De plus, les personnes ayant des limitations motrices ont des difficultés accrues à interagir avec de petites cibles trop proches pour être activées indépendamment.

Confirmer le problème d'espacement des cibles tactiles

Exécutez l'application sur Xcode et naviguez vers l'écran contenant l'élément interactif à tester.

1. Dans Xcode, sélectionnez Affichage hiérarchique du débogage
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, la hauteur et la position de l'élément sélectionné, par rapport aux éléments interactifs voisins

L'un des résultats suivants s'applique :

• Réussi : L'élément fait au moins 24pt × 24pt, et il n'y a pas d'éléments qui se chevauchent réduisant la zone cliquable disponible en dessous du minimum
• Réussi : L'élément est plus petit que 24pt × 24pt, mais le padding autour de lui est suffisamment grand pour qu'un cercle de 24pt de diamètre centré sur l'élément ne croise pas de cible adjacente
• Réussi : Les curseurs maintiennent au moins 24pt d'espace tout au long de la longueur de l'élément
• Échoué : L'élément est plus petit que 24pt × 24pt, avec un espacement insuffisant entre lui et les éléments interactifs adjacents
• Échoué : Un élément interactif voisin réduit la zone cliquable de l'élément testé en dessous du seuil minimum

Corriger les problèmes

Pour résoudre les problèmes d'espacement des cibles tactiles, assurez-vous que chaque élément interactif soit au moins de 24pt × 24pt ou ait une marge suffisante pour qu'un cercle de 24pt de diamètre centré sur lui ne croise pas de cible interactive adjacente.

UIKit

Réglez la hauteur et la largeur minimales à 24pt et ajoutez une marge entre les éléments interactifs voisins.

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 de width et height à au moins 24pt

Dans le code :

Mettez à jour les width et height de l'élément frame pour qu'ils soient au moins à 24pt.

let button = UIButton(frame: CGRect(x: 10, y: 20, width: 24, height: 24))

SwiftUI

Utilisez un modificateur .frame sur l'élément interactif pour définir la hauteur et la largeur minimales.

Button("Next")
    .frame(minWidth: 24, minHeight: 24, alignment: .leading)

React Native

Ajustez la hauteur et la largeur des éléments interactifs, et utilisez les propriétés de mise en page pour ajouter un espacement entre eux.

const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        backgroundColor: 'lightblue',
        width: 24, 
        height: 24
    }
});

Certains éléments ne permettent pas facilement d'ajustements de taille. Ceux-ci peuvent être encapsulés dans un View avec une disposition flexible, en utilisant la propriété gap pour obtenir un espacement approprié entre les éléments :

<View style={{ flex: 1, flexDirection: 'column', gap: 24 }}>
   <Slider
      step={1.0}
      maximumValue={100}
      style={{ width: 200, height: 60 }}
      value={sliderValue}
      accessible={true}
      onValueChange={setSliderValue}
      onSlidingStart={sliderValue => {
        setSliderValue(sliderValue);
      }}
      onSlidingComplete={sliderValue => {
        setSliderValue(sliderValue);
      }}
      accessibilityValue={{ now: "value: " + a11yValue }}
   />
</View>

Flutter

Les widgets Material de Flutter imposent par défaut une zone tactile de 48pt par 48pt, ce qui assure généralement un espacement adéquat. Les violations sont les plus probables avec des cibles tactiles personnalisées construites à l'aide de GestureDetector, où l'espacement doit être géré manuellement.

// Passing — spacing added between targets
Row(
  spacing: 8.0,
  children: [
    GestureDetector(                                                          
      onTap: () {},
      child: Container(                                                       
        width: 20,                                                          
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_up, size: 14, color: Colors.white),
      ),                                                                      
    ),
    GestureDetector(                                                          
      onTap: () {},                                                         
      child: Container(
        width: 20,
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_down, size: 14, color: Colors.white),
      ),                                                                      
    ),
  ],                                                                          
)                                                                           

Puis-je ignorer cette règle ?

L'espacement des cibles tactiles a un impact sérieux pour les utilisateurs. Nous recommandons de remédier à ce problème, sauf dans de rares cas où les contraintes de mise en page rendent cela réellement infaisable. En savoir plus sur ignorer les règles.

Ressources

Pages de cours de Deque University

• WCAG 2.2 - 2.5.8 Cible tactile (AAA)

Remarque : Un abonnement est nécessaire pour un accès complet aux ressources de Deque University.

Autres ressources

• Directives pour l'accessibilité du contenu Web (WCAG) 2.2, recommandation du W3C
  • Critère de succès 2.5.8 - Taille de la cible (minimale)
• Docs de compréhension de la WCAG 2.2
  • Comprendre 2.5.8 AA - Taille de la cible (minimale)