Taille de la cible tactile

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.1 - 2.5.5 AAA Impact – Modéré

Tous les contrôles actifs doivent avoir une zone visuelle et tactile d'au moins 44 dp par 44 dp.

Impact

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

Attentes

Les éléments interactifs ont le potentiel d’étendre la zone de frappe d’une cible sans augmenter les limites visuelles de la cible. Après mûre réflexion, Deque persiste à penser qu'il est préférable d'aligner les limites visuelles et interactives de la cible. Cela donne à l’utilisateur final un espace clair avec lequel s’engager pour avoir les meilleures chances de succès. Par conséquent, cette règle teste également que les limites visuelles des éléments interactifs respectent le minimum de 44 dp.

Confirmation

  1. Identifiez la densité de pixels de votre appareil Android.
  2. Utilisez l’inspecteur de hiérarchie de vue pour confirmer la taille du contrôle en pixels.
  3. L’une des situations suivantes se produira :
    • Accessible : Assurez-vous que le contrôle correspond au nombre correct de pixels indépendants de la densité de l'écran (dip).
    • Inaccessible : Le contrôle ne mesure ni 44 dip en largeur ni 44 dip en hauteur.

Comment corriger

Un problème détecté par cette règle se produit lorsque les valeurs « hauteur » et/ou « largeur » ne sont pas égales ou supérieures à 44dip.

XML

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" />

Composer

Button(
     onClick = { },
     modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
     Text(text = "My Button")
}

React Native

Certains composants de React Native ne sont pas personnalisables pour permettre des ajustements de taille, comme le composant Button . Dans la mesure du possible, assurez-vous que tous les contrôles mesurent au moins 44 dp par 44 dp. Si ce n’est pas possible, explorez des composants alternatifs qui vous permettent d’ajuster la taille. Astuce : lorsque vous utilisez des contrôles personnalisés, assurez-vous que le rôle d’accessibilité est correctement défini !