Texte associé

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.0 - 4.1.2 A Impact – Critique Impact – Grave

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.

info

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

  1. Activer VoiceOver
  2. Focalisez sur le contrôle
  3. 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>