Espacement des cibles tactiles
Assurez-vous que les éléments interactifs sont suffisamment espacés pour être tapés avec précision
Découvrez comment nous utilisons l'intelligence artificielle pour cette règle !
Ce que nous vérifions
Les éléments interactifs doivent avoir une dimension minimale de 24dp par 24dp, ou avoir suffisamment de marge autour d'eux pour qu'un cercle de 24dp de diamètre placé au centre de l'élément ne croise pas une autre cible ni avec le cercle pour une autre cible.
La zone tactile d’un élément interactif peut potentiellement être étendue au-delà de ses limites visuelles - par exemple, en utilisant un TouchDelegate pour accroître la région active au toucher. Après un examen attentif, Deque maintient 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, 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 24dp.
Quelle est la différence entre l'espacement des cibles tactiles et la taille des cibles tactiles ?
L'espacement des cibles tactiles vise la conformité WCAG 2.2 AA avec un minimum de 24dp, tandis que Taille des cibles tactiles s'aligne plus étroitement avec la recommandation de Google de 48dp par 48dp. Nous recommandons vivement de soutenir les les deux règles - la conformité aux directives de Google aide à s'assurer qu'il n'y a pas de problèmes lors de la soumission au Play Store.
Exemple échoué ❌
Touch target spacing est insuffisant
Ces contrôles sont trop proches - un cercle de 24dp 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 24dp × 24dp, soit dispose de suffisamment d'espace autour de lui pour qu'un cercle de 24dp de diamètre centré dessus n'intersecte aucune cible adjacente
En bref
- Cette règle a un impact important pour les utilisateurs
- Les éléments interactifs doivent mesurer au moins 24dp × 24dp, OU être positionnés de sorte qu'un cercle de 24dp de diamètre centré sur l'élément ne chevauche aucune cible adjacente
- Les limites visuelles et interactives (zone de frappe) doivent toutes deux respecter le minimum
- Les curseurs doivent maintenir au moins 24dp d'espace sur leur longueur
Impact pour les utilisateurs
Sur un appareil tactile, les petits contrôles posent un problème d'utilisabilité pour tout le monde. De plus, les personnes ayant des limitations motrices rencontrent des difficultés accrues à interagir avec des cibles petites et trop proches pour être activées de manière indépendante.
Confirmer un problème d'espacement des cibles tactiles
Exécutez l'application et naviguez jusqu'à l'écran contenant l'élément à tester.
- Dans Android Studio, ouvrez le Inspecteur de mise en page (Outils > Inspecteur de mise en page)
- Sélectionnez l'élément à tester dans l'arbre des composants ou sur le canevas
- Dans le panneau Attributs, observez la largeur, la hauteur et la position de l'élément sélectionné par rapport aux éléments interactifs voisins
- Si nécessaire, identifiez la densité de pixels de l'appareil pour confirmer les valeurs dp
L'un des résultats suivants s'applique :
- Conforme : L'élément mesure au moins 24dp × 24dp, et il n'y a pas d'éléments superposés qui réduisent la zone cliquable disponible en dessous du minimum
- Conforme : L'élément est plus petit que 24dp × 24dp, mais la marge autour de lui est suffisamment grande pour qu'un cercle de 24dp de diamètre centré sur l'élément n'intersecte aucune cible adjacente
- Conforme : Les curseurs maintiennent au moins 24dp d'espace sur la longueur de l'élément
- Non conforme : L'élément est plus petit que 24dp × 24dp, avec un espacement insuffisant entre lui-même et les éléments interactifs adjacents
- Non conforme : Un élément interactif voisin réduit la zone cliquable de l'élément testé en dessous du seuil minimal
Résoudre les problèmes
Pour résoudre les problèmes d'espacement des cibles tactiles, assurez-vous que chaque élément interactif est soit d'au moins 24dp × 24dp, soit dispose d'une marge suffisante pour qu'un cercle de 24dp de diamètre centré dessus n'intersecte aucune cible interactive adjacente.
XML
Réglez minimumHeight et minimumWidth sur 24dp, et ajoutez une marge entre les éléments interactifs voisins.
Dans le code :
Button button = findViewById(R.id.an_accessible_button_yay);
button.setMinimumHeight(24);
button.setMinimumWidth(24);Dans la définition de la mise en page :
<Button
android:id="@+id/an_accessible_button_yay"
android:minimumHeight="24dp"
android:minimumWidth="24dp"
android:text="@string/batman_likes_accessible_buttons" />Composer
Utilisez Modifier.defaultMinSize pour définir une hauteur et une largeur minimales, et padding pour ajouter un espacement entre les éléments interactifs voisins.
Button(
modifier = Modifier
.defaultMinSize(minWidth = 24.dp, minHeight = 24.dp)
.padding(start = 24.dp, top = 24.dp),
onClick = { }
) {
Text(stringResource(id = R.string.button))
}React Native
Ajustez la hauteur et la largeur des éléments interactifs, et utilisez les propriétés de mise en page pour ajouter de l'espacement entre eux.
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: 'lightblue',
width: 24,
height: 24
}
});Certains éléments ne permettent pas facilement les ajustements de taille. Ceux-ci peuvent être enveloppés dans un View avec une disposition flex, en utilisant la propriété gap pour obtenir un espacement adéquat 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 fournit 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 le rendent vraiment infaisable. En savoir plus sur ignorer les règles.
Ressources
Pages de cours de Deque University
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
- Documents de compréhension WCAG 2.2