Taille de la zone tactile
Assurez-vous que les contrôles interactifs sont assez grands pour être tapés avec précision
Découvrez comment nous utilisons l'intelligence artificielle pour cette règle !
Ce que nous vérifions
Tous les éléments interactifs doivent avoir une taille minimale de 44dp par 44dp, tant pour les zones visuelles que tactiles.
La zone tactile d'un élément interactif peut potentiellement être agrandie au-delà de ses limites visuelles — par exemple, en utilisant un TouchDelegate pour augmenter la zone de contact active. Après mûre réflexion, Deque soutient qu'il est préférable d'aligner les limites visuelles et interactives de la cible. Cela offre à l'utilisateur final une zone claire pour interagir avec la 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 44dp.
Exemple de non-conformité ❌
Touch target size = 20dp × 20dp
Cet élément est plus petit que le minimum de 44dp × 44dp
La zone de contact est trop petite pour être activée de manière fiable, surtout pour les utilisateurs ayant des limitations motrices.
Exemple de conformité ✅
Touch target size = 44dp × 44dp
Cet élément respecte le minimum de 44dp × 44dp
Les limites visuelles et tactiles sont assez grandes pour être activées avec précision.
En un coup d'œil
- Cette règle a un impact modéré pour les utilisateurs
- Tous les éléments interactifs doivent avoir une taille visuelle et tactile d'au moins 44dp × 44dp
- Les limites visuelles et interactives (zone de contact) doivent respecter le minimum
- Les petits contrôles sont un problème d'utilisabilité pour tout le monde, et particulièrement problématiques pour les utilisateurs avec des limitations motrices
Impact sur les utilisateurs
Sur un appareil tactile, les petits contrôles posent un problème d'utilisation pour tout le monde. De plus, les personnes ayant des limitations motrices ont plus de difficulté à interagir avec, et viser, de petites cibles.
Confirmer le problème de taille de la zone tactile
Exécutez l'application et naviguez jusqu'à l'écran contenant l'élément à tester.
- Dans Android Studio, ouvrez l'Inspecteur de mise en page (Outils > Inspecteur de mise en page)
- Sélectionnez l'élément à tester dans l'arborescence des composants ou sur le canevas
- Dans le panneau Attributs, observez les valeurs
widthetheighten dp - Si nécessaire, identifiez la densité de pixels de l'appareil pour confirmer les valeurs dp
Si l'une des dimensions est inférieure à 44dp, l'élément échoue à cette règle.
Corriger les problèmes
Pour résoudre les problèmes de taille de zone tactile, assurez-vous que la taille visuelle de chaque élément interactif est d'au moins 44dp × 44dp. Les limites visuelles et la zone de contact tactile doivent correspondre — élargir uniquement la zone de contact via TouchDelegate n'est pas suffisant.
Un problème détecté par cette règle se produit lorsque les valeurs height et/ou width d'un élément interactif ne sont pas de 44dp ou plus.
XML
Définissez minimumHeight et minimumWidth sur l'élément, ou définissez des valeurs explicites layout_width et layout_height d'au moins 44dp.
Button button = findViewById(R.id.my_button);
button.setMinimumHeight(44);
button.setMinimumWidth(44);<Button
android:id="@+id/an_accessible_button_yay"
android:minimumHeight="44dp"
android:minimumWidth="44dp"
android:text="@string/batman_likes_accessible_buttons" />Compose
Utilisez un Modifier.size ou Modifier.defaultMinSize pour définir une taille minimale d'au moins 44dp × 44dp.
Button(
onClick = { },
modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
Text(text = "Scan for Issues")
}React Native
Utilisez les propriétés de taille spécifiques à la plateforme pour vous assurer 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, comme le composant Button.
Si possible, assurez-vous que tous les éléments interactifs mesurent au moins 44dp par 44dp. Si ce n'est pas possible, explorez des composants alternatifs qui vous permettent d'ajuster la taille.
Conseil : Lorsque vous utilisez des contrôles personnalisés, assurez-vous que le rôle d'accessibilité est correctement défini !
Flutter
Les widgets Material de Flutter (ElevatedButton, IconButton, etc.) imposent automatiquement une zone tactile minimale de 48dp par 48dp, ils respectent donc cette exigence par défaut. Les violations proviennent généralement des cibles tactiles personnalisées construites avec GestureDetector, qui n'agrandit 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 ?
Taille de la zone tactile a un impact modéré pour les utilisateurs. Dans les cas où une contrainte de conception empêche de respecter le minimum de 44dp — 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 l'université Deque
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
- WCAG 2.1 Comprendre les documents