Bijbehorende Tekst

Een bedieningselement moet zijn toegankelijke naam verkrijgen van een nabijgelegen label dat beschikbaar is voor hulpmiddelen zoals VoiceOver en Spraakbesturing.

Invloed

Mensen die VoiceOver gebruiken worden het meest beïnvloed. Een bedieningselement dat visueel is gekoppeld aan een beschrijvend element moet die relatie ook via tekst doorgeven voor hulpmiddelen.

Bevestiging

1. Schakel VoiceOver in
2. Richt je op het bedieningselement
3. Eén van de volgende dingen zal gebeuren:
   • Niet toegankelijk: Het zal het bijbehorende label niet aankondigen als de naam van het bedieningselement, alleen zijn rol en waarde indien aanwezig.
   • Toegankelijk: Het zal het bijbehorende label aankondigen als de naam van het bedieningselement met VoiceOver.

Hoe te Repareren

UIKit

Om een probleem dat door deze regel is gevonden te verhelpen, voeg een accessibilityLabel toe aan het bedieningselement met de aangrenzende beschrijver.

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

SwiftUI

Om een probleem dat door deze regel is gevonden te verhelpen, voeg een accessibilityLabel toe aan het bedieningselement met de aangrenzende beschrijver.

@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

Zorg ervoor dat zichtbare tekst die een bedieningselement begeleidt wordt opgenomen in de accessibilityLabel eigenschap van het bedieningselement:

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

Wanneer zichtbare tekst en een bedieningselement zijn gegroepeerd binnen een focusbare containerweergave, zorg ervoor dat de zichtbare tekst is opgenomen in de accessibilityLabel eigenschap van de containerweergave:

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