Testo associato

Un controllo dovrebbe ottenere il suo nome accessibile da un'etichetta vicina disponibile per tecnologie assistive come VoiceOver e Controllo vocale.

Impatto

Le persone più colpite sono quelle che utilizzano VoiceOver. Un controllo collegato visivamente a un elemento descrittivo deve anche comunicare tale relazione tramite testo per la tecnologia assistiva.

Conferma

1. Attiva VoiceOver
2. Mettere a fuoco il controllo
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: non annuncerà l'etichetta associata come nome del controllo, ma solo il suo ruolo e valore, se presenti.
   • Accessibile: annuncerà l'etichetta associata come nome del controllo con VoiceOver.

Come risolvere

UIKit

Per risolvere un problema rilevato da questa regola, aggiungere un accessibilityLabel al controllo con il descrittore adiacente.

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

Per risolvere un problema rilevato da questa regola, aggiungere un accessibilityLabel al controllo con il descrittore adiacente.

@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

Assicurati che il testo visibile che accompagna un controllo sia incluso nella accessibilityLabel prop del controllo:

<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>

Quando il testo visibile e un controllo sono raggruppati all'interno di una vista contenitore focalizzabile, assicurarsi che il testo visibile sia incluso nella accessibilityLabel prop della vista contenitore:

 <View
  accessible={true} 
  accessibilityElementsHidden={false} 
  accessibilityLabel='Light Level'
>
   <Text 
     style={{ color: 'black', fontSize: 22 }} 
     accessible={false}
   > 
     Light Level 
   </Text>
   <Slider accessible={false}/>
</View>