Espacement de la cible tactile

Les contrôles actionnables doivent avoir une dimension minimale de 24 x 24 points ou doivent être positionnés de telle sorte que si un cercle d'un diamètre de 24 points 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.

Attentes

Les éléments interactifs ont le potentiel d'étendre la zone de toucher d'une cible sans augmenter les limites visuelles de la cible, par exemple grâce à l'utilisation d'une reconnaissance de geste. 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 visibles des éléments interactifs respectent le minimum de 24 pt.

Confirmation

Exécutez l’application dans Xcode et accédez à l’écran contenant le contrôle actif à tester.

1. Dans Xcode, sélectionnez Hiérarchie de la vue de débogage
2. Sélectionnez le contrôle à tester
3. Ouvrez le panneau d'inspection s'il n'est pas visible
4. Sélectionnez l'inspecteur de taille
5. Observez la largeur et la hauteur du contrôle sélectionné
6. 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 24 pt sur toute la longueur du contrôle.
• Inaccessible : la vue sera plus petite que le minimum 24x24 et aura un espacement insuffisant entre elle et les vues proches.
• Inaccessible : Il existe une autre vue interactive qui réduit la zone tactile de la vue testée en dessous de ce 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 interactives voisines pour permettre un espace suffisant entre les composants interactifs.
• Retirez les obstructions autour des curseurs.
• Ajouter une marge autour des vues interactives.

UIKit

Dans le storyboard :

1. Accéder au contrôle actif
2. Ouvrez le panneau d'inspection s'il n'est pas visible
3. Sélectionnez l'inspecteur de taille
4. Sous View, mettez à jour les paramètres width et height pour qu'ils aient un minimum de 24 pt.

Dans le code :

Mettez à jour les width et height du contrôle actif frame pour qu'ils aient au moins 24 pt.

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

SwiftUI

Utilisez un modificateur de frame sur la vue pour définir la hauteur et la largeur appropriées.

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

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 facile peuvent être encapsulés dans un view avec une disposition flexible, en utilisant 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>