Espacement de la cible tactile

Les contrôles actionnables doivent avoir une dimension minimale de 24 x 24 dp ou doivent être positionnés de telle sorte que si un cercle d'un diamètre de 24 dp est placé au centre du contrôle, le cercle ne croise pas une autre cible ou le cercle d'une autre cible.

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.

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 : la vue sera plus grande que l'exigence minimale et ne comportera pas de vues superposées qui entraîneraient une cible disponible plus petite que 24 x 24.
   • Accessible : la vue sera plus petite que le minimum 24x24, mais le remplissage autour de la vue permettra au bouton d'avoir suffisamment d'espace pour être appuyé de manière fiable par les utilisateurs.
   • Accessible : les curseurs maintiennent un espace de 24dp sur toute la longueur du contrôle.
   • Inaccessible : Il existe une autre vue cliquable qui réduit la zone tactile de la vue testée en dessous du seuil minimum.

Comment corriger

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

• Définition de la hauteur et de la largeur minimales de la vue à 24x24pt.
• Ajustez les vues cliquables voisines pour permettre un espace suffisant entre les composants cliquables.
• Retirez les obstructions autour des curseurs.
• Ajouter une marge autour des vues cliquables.
• Définissez la hauteur et la largeur minimales de vue à 24dp.

XML

Ajuster la hauteur et la largeur minimales dans le code :

Button button = findViewById(R.id.an_accessible_button_yay)
button.setMinimumHeight(24);
button.setMinimumWidth(24);

Ajuster la hauteur et la largeur minimales 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

Ajuster la hauteur et la largeur minimales dans le code :

Button(modifier = modifier
  .constrainAs(textButtonBottom) {
      top.linkTo(slider.bottom)
      start.linkTo(parent.start)
      bottom.linkTo(parent.bottom)
  }
  .padding(start = 24.dp, top = 24.dp), onClick = { }) {
  Text(stringResource(id = R.string.button))
}

React Native

Ajuster la hauteur et la largeur des composants interactifs :

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

Certains composants qui ne permettent pas un espacement aussi facile peuvent être enveloppés dans un view composant avec une disposition flexible et en définissant la gap propriété pour obtenir un espacement approprié :

<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 }}
   </Slider>
</View>