Zugehöriger Text

Ein Steuerelement sollte seinen barrierefreien Namen von einer nahegelegenen Bezeichnung erhalten, die für unterstützende Technologien wie VoiceOver und Sprachsteuerung verfügbar ist.

Auswirkung

Am stärksten betroffen sind Benutzer von VoiceOver. Ein Bedienelement, das visuell mit einem beschreibenden Element verknüpft ist, muss diese Beziehung für unterstützende Technologien auch durch Text vermitteln.

Bestätigung

1. VoiceOver aktivieren
2. Fokussieren Sie das Bedienelement
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: Als Name des Steuerelements wird nicht die zugehörige Bezeichnung angesagt, sondern nur dessen Rolle und Wert, falls vorhanden.
   • Zugänglich: Es wird die zugehörige Bezeichnung als Name des Steuerelements mit VoiceOver angesagt.

So beheben Sie das Problem

UIKit

Um ein von dieser Regel gefundenes Problem zu beheben, fügen Sie dem Steuerelement mit dem benachbarten Descriptor ein accessibilityLabel hinzu.

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

SwiftUI

Um ein von dieser Regel gefundenes Problem zu beheben, fügen Sie dem Steuerelement mit dem benachbarten Descriptor ein accessibilityLabel hinzu.

@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

Stellen Sie sicher, dass sichtbarer Text, der ein Steuerelement begleitet, in der accessibilityLabel Eigenschaft des Steuerelements enthalten ist:

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

Wenn sichtbarer Text und ein Steuerelement in einer fokussierbaren enthaltenen Ansicht gruppiert sind, stellen Sie sicher, dass der sichtbare Text in der accessibilityLabel Eigenschaft der enthaltenen Ansicht enthalten ist:

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