Zugehöriger Text

Was wir überprüfen

Ein interaktives Element sollte seinen zugänglichen Namen von einem nahen Label erhalten, das für unterstützende Technologien wie VoiceOver und Sprachsteuerung verfügbar ist.

Fehlerhaftes Beispiel ❌

Das Feld „E-Mail-Adresse“ ist fokussiert, aber der Text, der visuell verfügbar ist, not announced by VoiceOver

VoiceOver kündigt an "Text field, blank" - nur die Rolle und der Wert, ohne Namen

Benutzer können nicht erkennen, welche Informationen das Feld erwartet

Richtiges Beispiel ✅

Das sichtbare Label „E-Mail-Adresse“ stimmt mit dem überein, was VoiceOver ankündigt

VoiceOver kündigt an "Email address, text field, blank" - Name, Rolle und Wert sind alle vorhanden

Benutzer wissen genau, welche Informationen das Feld erwartet

Auf einen Blick

• Diese Regel hat eine schwere bis kritische Auswirkung, je nachdem, ob das sichtbare Label fokussierbar ist
• Interaktive Elemente müssen ihren zugänglichen Namen aus dem sichtbaren Label ableiten, das sie beschreibt
• VoiceOver kündigt nur die Rolle und den Wert eines Elements an, wenn sein zugänglicher Name fehlt

Auswirkung auf Benutzer

Personen, die VoiceOver verwenden, sind am meisten betroffen. Ein interaktives Element, das visuell mit einem beschreibenden Label verbunden ist, muss diese Beziehung auch über Text für unterstützende Technologien vermitteln.

Wenn ein Schieberegler, Schalter oder ein anderes Steuerelement ein nahes sichtbares Label hat, aber keinen zugänglichen Namen, der diesem Label entspricht, hören VoiceOver-Nutzer nur die Rolle und den Wert des Elements, nicht dessen Zweck. Auch Benutzer der Sprachsteuerung können betroffen sein, wenn das gesprochene Label nicht mit dem zugänglichen Namen des Steuerelements übereinstimmt.

Zugehörige Textproblematik bestätigen

1. VoiceOver aktivieren
2. Auf das interaktive Element fokussieren
3. Eines der folgenden Ereignisse tritt ein:
   • Nicht zugänglich: VoiceOver kündigt das zugehörige Label nicht als den Namen des Elements an - nur dessen Rolle und Wert, falls vorhanden
   • Zugänglich: VoiceOver kündigt das zugehörige Label als den Namen des Elements an

Probleme beheben

Um ein Problem mit zugehörigem Text zu lösen, weisen Sie den Text des sichtbaren Labels als zugänglichen Namen des interaktiven Elements zu. Dies stellt sicher, dass VoiceOver den korrekten Namen ankündigt und das Erlebnis der unterstützenden Technologie mit dem visuellen Erlebnis der sehenden Benutzer übereinstimmt. Verstecken Sie das eigenständige Label-Element im Zugänglichkeitsbaum, um zu verhindern, dass es doppelt angekündigt wird.

UIKit

Setzen Sie die accessibilityLabel des interaktiven Elements so, dass sie mit dem Text des nahen Labels übereinstimmt, und verstecken Sie das Label im Zugänglichkeitsbaum:

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

SwiftUI

Verwenden Sie den .accessibilityLabel()-Modifikator am interaktiven Element und übergeben Sie den Text des sichtbaren Labels als zugänglichen Namen:

@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).accessibilityLabel(sliderLabel)
    }
}

React Native

Stellen Sie sicher, dass der sichtbare Text, der ein interaktives Element begleitet, in die accessibilityLabel-Eigenschaft der Steuerung aufgenommen wird:

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

Wenn sichtbarer Text und ein interaktives Element innerhalb eines fokussierbaren Containers View gruppiert sind, stellen Sie sicher, dass der sichtbare Text in die accessibilityLabel-Eigenschaft des beinhaltenden View aufgenommen wird:

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

Flutter

Wickeln Sie das sichtbare Label und das interaktive Element in ein MergeSemantics-Widget, so dass beide für unterstützende Technologien als einziger fokussierbarer Knoten bereitgestellt werden. VoiceOver wird das sichtbare Label als Teil des zugänglichen Namens des Elements ankündigen:

  MergeSemantics(
    child: Row(
      children: [
        const Text('The Lights'),
        Switch(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  )

Kann ich diese Regel ignorieren?

Zugehöriger Text hat eine Schwere bis kritische Auswirkung für Benutzer, und wir empfehlen dringend, dieses Problem zu beheben. Da VoiceOver-Nutzer vollständig auf den zugänglichen Namen angewiesen sind, um zu verstehen, was ein interaktives Element macht, macht eine fehlende Zuordnung diese Elemente für unterstützende Technologien funktional unbrauchbar. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• Erfolgskriterium 4.1.2 - Name, Rolle, Wert
• 4.1.2a Name, Rolle, Wert

Hinweis: Voller Zugang zu den Ressourcen der Deque University erfordert ein Abonnement.

Weitere Ressourcen

• Richtlinien für barrierefreie Webinhalte (WCAG) 2.0, W3C-Empfehlung
  • Erfolgskriterium 4.1.2 - Name, Rolle, Wert
• Verständnisdokumente zu WCAG 2.0
  • Verständnis 4.1.2 A - Name, Rolle, Wert