Boîte de Mise au Point Élément pour l'A11y
La boîte de mise au point de VoiceOver doit entièrement encapsuler l'élément qu'elle annonce
Ce que nous vérifions
Le chemin d'accessibilité d'un élément, ou la boîte de mise au point de VoiceOver, doit entièrement encapsuler son propre cadre visuel à l'écran.
Cette règle fait partie des Bonnes Pratiques de Deque. Vous pouvez désactiver cette règle depuis le Mobile Dashboard ou en ignorer la règle dans les tests écrits pour iOS.
Découvrez comment désactiver les règles depuis le Mobile Dashboard.
Exemple d'échec ❌
VoiceOver est concentré sur un bouton, mais la focus box appears offset - partiellement en dehors des limites visibles du bouton
La zone mise en évidence ne correspond pas à l'élément annoncé, ce qui rend difficile pour les utilisateurs voyants de VoiceOver de suivre
Exemple de réussite ✅
VoiceOver est concentré sur le même bouton et la focus box fully contains the element's visual frame
La zone mise en évidence correspond exactement à ce que l'utilisateur voit à l'écran, offrant aux utilisateurs voyants de VoiceOver un indicateur visuel clair de ce qui est focalisé
En un coup d'œil
- Cette règle a un impact modéré pour les utilisateurs voyants qui utilisent également VoiceOver
- La boîte de mise au point de VoiceOver doit correspondre aux limites visuelles de l'élément qu'elle annonce à l'écran
- Évitez d'utiliser
accessibilityPathouaccessibilityFramesi possible - VoiceOver calcule automatiquement le cadre correct - Si vous devez remplacer le cadre, recalculer les coordonnées chaque fois que l'élément se déplace (comme lors du défilement)
Impact sur les utilisateurs
Les utilisateurs voyants qui utilisent aussi VoiceOver sont les plus impactés. VoiceOver annoncera les détails d'un élément à l'écran, mais la boîte de mise au point apparaîtra partiellement ou totalement en dehors de l'élément annoncé. Ce décalage entre le contenu parlé et la surbrillance visible rend difficile le suivi et la compréhension de ce qui est focalisé.
Confirmer le Problème de la Boîte de Mise au Point Élément pour l'A11y
- Activez VoiceOver
- Focalisez l'élément
- L'un des événements suivants se produira :
- Inaccessible : La boîte de mise au point de VoiceOver contiendra partiellement l'élément
- Inaccessible : La boîte de mise au point de VoiceOver ne contiendra pas du tout l'élément
- Accessible : La boîte de mise au point de VoiceOver contiendra complètement l'élément
Corriger les Problèmes
Les problèmes détectés par cette règle sont presque toujours causés par une utilisation incorrecte de accessibilityPath ou accessibilityFrame. La solution la plus sûre est de les supprimer et de laisser VoiceOver calculer automatiquement la boîte de mise au point. Si un cadre personnalisé est nécessaire, les coordonnées doivent être recalculées par rapport à l'élément racine chaque fois que sa position change.
UIKit
Une utilisation incorrecte de accessibilityPath ou accessibilityFrame sur un élément entraînera la détection d'un problème par cette règle. Corrigez-le de l'une des deux manières suivantes :
- Supprimez
accessibilityPathouaccessibilityFrames'ils ne sont pas nécessaires. VoiceOver calcule automatiquement les coordonnées à l'écran et dessine la boîte de mise au point correcte. - Si vous devez remplacer le cadre, convertissez le cadre de l'élément en coordonnées de vue racine et réattribuez le chemin chaque fois que l'élément se déplace (comme dans un
UIScrollview) :
// Assuming we are in a ViewController
let button = UIButton()
// If not within a ViewController, self.view should be replaced with the rootView of the screen
let rootview = self.view
let onScreenFrame = button.superview!.convert(button.frame, to: rootview)
button.accessibilityPath = UIBezierPath(rect: onScreenFrame)SwiftUI
Ce type de problème d'accessibilité n'est pas attendu dans les vues SwiftUI.
React Native
Ce type de problème d'accessibilité n'est pas attendu avec les éléments par défaut Touchable ou Pressable.
Lors de l'ajout de la mise au point à un autre type d'élément, définissez directement les propriétés accessible et accessibilityElementsHidden sur cet élément :
<Image
source={DequeLogo}
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel="Deque Systems Logo"
accessibilityRole="image"
style={{ width: 100, height: 60 }}
resizeMode='center'
/>Quand les éléments sont regroupés dans un View contenant, définissez les propriétés accessible et accessibilityElementsHidden sur la vue contenant :
<View
style={styles.rowContainer}
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel="Dark Mode"
accessibilityValue={{ text: "" + secondSwitchIsEnabled }}
accessibilityRole="switch"
onTouchStart={() => {
setSecondSwitchIsEnabled(!secondSwitchIsEnabled)
}}>
<Text style={{ fontSize: 18 }}>Dark Mode</Text>
<Switch
style={styles.standardSwitch}
importantForAccessibility='no-hide-descendants'
value={secondSwitchIsEnabled}
onValueChange={() => {
setSecondSwitchIsEnabled(!secondSwitchIsEnabled);
}}
/>
</View>Puis-je ignorer cette règle ?
La boîte de mise au point élément pour l'A11y a un impact modéré pour les utilisateurs. Étant donné que c'est une règle de Meilleure Pratique, elle peut être désactivée depuis le Mobile Dashboard ou supprimée dans les tests individuels. Cependant, une boîte de mise au point désalignée crée une expérience confuse pour les utilisateurs voyants de VoiceOver et mérite d'être corrigée lorsque la cause est un accessibilityPath ou accessibilityFrame mal configuré. En savoir plus sur ignorer les règles.
Ressources
Pages de Cours de Deque University
Note : Un accès complet aux ressources de Deque University requiert un abonnement.
Autres ressources
- Directives pour l'accessibilité du contenu Web (WCAG) 2.1, Recommandation W3C
- Documentation développeur Apple