Texte associé
Un contrôle doit obtenir son nom accessible à partir d'une étiquette proche disponible pour les technologies d'assistance telles que VoiceOver et Voice Control.
Deux impacts ? Si le texte visible n'est pas focalisable ET n'est pas disponible pour le contrôle via son nom ou le nom du parent focalisable, cette règle est considérée comme ayant un impact Critique.
Impact
Les personnes utilisant VoiceOver sont les plus touchées. Un contrôle visuellement lié à un élément descriptif doit également transmettre cette relation par le biais d’un texte destiné à la technologie d’assistance.
Confirmation
- Activer VoiceOver
- Focalisez sur le contrôle
- L’une des situations suivantes se produira :
- Inaccessible : Il n'annoncera pas le libellé associé comme nom du composant, uniquement son rôle et sa valeur s'ils sont présents.
- Accessible : Il annoncera l'étiquette associée comme nom du composant avec VoiceOver.
Comment corriger
UIKit
Pour résoudre un problème détecté par cette règle, ajoutez un [missing term] accessibilityLabel
au contrôle avec le descripteur voisin.
toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false
SwiftUI
Pour résoudre un problème détecté par cette règle, ajoutez un [missing term] accessibilityLabel
au contrôle avec le descripteur voisin.
@State private var payment: CGFloat = 0
private let sliderLabel = "Payment"
var body: some View {
VStack {
Text("\(Int(payment)) \(sliderLabel)")
Slider(value: $payment, in: 0...20).accessibility(label: Text(sliderLabel))
}
}
React Native
Assurez-vous que le texte visible qui accompagne un contrôle est inclus dans la propriété accessibilityLabel
du contrôle :
<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>
Lorsque du texte visible et un contrôle sont regroupés dans une vue contenante focalisable, assurez-vous que le texte visible est inclus dans la propriété accessibilityLabel
de la vue contenante :
<View
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel='Light Level'
>
<Text
style={{ color: 'black', fontSize: 22 }}
accessible={false}
>
Light Level
</Text>
<Slider accessible={false}/>
</View>