Taille de la cible tactile

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

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 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 visuelles des éléments interactifs respectent le minimum de 44 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é

Comment corriger

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

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 44 pt.

Dans le code :

Mettez à jour les [termes manquants] width et [termes manquants] height du contrôle actif [termes manquants] frame pour qu'ils aient au moins 44 pt.

Cela peut être défini via l'initialiseur et un cadre spécifique :

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))

Ou peut être défini via des contraintes de vue. S'il existe une contrainte actuelle sur le bouton, mettez à jour la largeur et la hauteur pour qu'elles soient au minimum de 44 pt. Sinon, vous pouvez ajouter des contraintes :

// Update Height:
myButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

// Update Width:
myButton.widthAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

SwiftUI

TextFields

Veuillez noter qu'actuellement dans SwiftUI, il n'existe aucun moyen cohérent d'augmenter la taille de la zone tactile d'un TextField, donc un TextField SwiftUI renverra .INCOMPLETE pour cette règle. Un rapport radar a été déposé auprès d'Apple.

Boutons

Utilisez un modificateur de cadre sur le contenu du paramètre Label plutôt que sur l’ensemble du bouton.

1. Utilisez l'initialiseur basé sur l'étiquette du bouton : il a « action » comme premier paramètre et "Label" comme deuxième paramètre, comme indiqué ci-dessous.

Button(action: {
  print("button tapped
}, label: {
  Text("Tap here")
}

2. Ajoutez un modificateur de cadre au contenu du paramètre Label du bouton, en spécifiant une hauteur et une largeur d'au moins 44.

Button(action: {
  print("button tapped
}, label: {
  Text("Tap here")
    .frame(width: 80, height: 45)
}

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 pt par 44 pt. 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 !