Schalternamen

Was wir überprüfen

Jedes Switch-Element sollte einen zugänglichen Namen haben, der seinen Zweck für unterstützende Technologien wie TalkBack und Voice Access beschreibt.

Nicht zutreffendes Beispiel ❌

Schalter hat keinen zugänglichen Namen.

TalkBack liest "Off, Switch."

Voice Access — Nutzer hat kein sichtbares Label, um den Schalter zu aktivieren.

Zutreffendes Beispiel ✅

Schalter ist mit sichtbarem Text gekennzeichnet durch labelFor oder Gruppierung.

TalkBack liest "Dark Mode, Off, Switch."

Voice Access — Nutzer sagt „Dunkelmodus“, um den Schalter zu aktivieren.

Kurz und bündig

• Diese Regel hat kritische Auswirkungen für Benutzer
• Jeder Schalter benötigt einen zugänglichen Namen, der beschreibt, was er steuert
• Ein Name wie „Dunkelmodus“ ist weitaus nützlicher als kein Name
• Der Name sollte, wenn möglich, aus einem sichtbaren Label stammen, unter Verwendung von labelFor oder Gruppierungstechniken
• Vermeiden Sie es, eine Inhaltsbeschreibung direkt auf den Schalter zu setzen, es sei denn, der Zustand (z. B. ‚an‘/‚aus‘) wird beibehalten

Auswirkungen auf Benutzer

Menschen, die blind sind, eine Sehbehinderung haben oder Schalterzugriff nutzen, sind auf den zugänglichen Namen angewiesen, um zu verstehen, was ein Schalter bewirkt, bevor sie mit ihm interagieren. Ohne einen Namen gibt TalkBack nur ‚an‘ oder ‚aus‘ an — Benutzer erhalten keinen Kontext darüber, was sie steuern.

Schalternamenproblem bestätigen

1. Aktivieren Sie TalkBack
2. Versuchen Sie, sich auf ein Switch-Element zu konzentrieren
3. Eines der folgenden wird geschehen:
   • Nicht zugänglich: TalkBack gibt nur ‚an‘ oder ‚aus‘ an.
   • Zugänglich: TalkBack gibt den Namen des Schalters und ‚an‘ oder ‚aus‘ an.

Probleme beheben

Ein Schalter benötigt einen zugänglichen Namen, damit unterstützende Technologie ansagen kann, was der Schalter steuert. Der beste Ansatz ist, das Label und den Schalter zu gruppieren oder zu verknüpfen, damit sie als ein einziges zugängliches Element behandelt werden.

XML

Sie können ein Label im angrenzenden Element bereitstellen oder den Schalter mit seinem Label umwickeln. Sie können auch die contentDescription manipulieren, aber achten Sie darauf, den ‚an‘- und ‚aus‘-Zustand für TalkBack-Ankündigungen beizubehalten.

layouts/activity.xml
<TextView
     android:id="@+id/label"
     android:text="@string/label_text"
     android:labelFor="@+id/switch">
<Switch
     android:id="@+id/switch"/>

...

strings.values/
<string name="label_text">Dark Mode</string>

Compose

Gruppieren Sie ein Text und Switch in einem zusammengeführten Layout wie einer Row. Wenden Sie die Schalterrolle und den umschaltbaren Modifikator auf die Text an und löschen Sie die Semantik auf der Switch mithilfe von Modifier.clearAndSetSemantics { }. So fokussiert TalkBack auf das Label statt direkt auf das Schalterelement.

val (isSwitchChecked, setSwitchState) = remember { 
    mutableStateOf(true) 
}

Row(modifier = Modifier.semantics(mergeDescendants = true) { }) {
    Text(
        text = "Get Emails",
        modifier = Modifier
            .toggleable(
                value = isSwitchChecked,
                onValueChange = { 
                    setSwitchState(!isSwitchChecked) 
                },
                role = Role.Switch
            )
    )

    Switch(
        checked = isSwitchChecked,
        onCheckedChange = { 
            setSwitchState(!isSwitchChecked) 
        },
        modifier = Modifier
            .clearAndSetSemantics { }
    )
}

React Native

Um einen Schalter und ein Label in React Native zu kombinieren, umschließen Sie beide Komponenten in einer TouchableOpacity-Komponente:

<TouchableOpacity
   onPress={() => {
     setSwitchOn(!switchOn)
     Alert.alert("Switch on : " + !switchOn)}}
   style={styles.subContainer}
   accessible={true}
   accessibilityLabel={"Subscribe"}
   accessibilityRole='switch'>
      <Text style={{ fontSize: 22 }}>
         Subscribe
      </Text>
      <Switch
         importantForAccessibility='no-hide-descendants'
         onValueChange={() => {
            setSwitchOn(!switchOn)
            Alert.alert("Switch on : " + !switchOn)} }
        value={switchOn}
   />
</TouchableOpacity>

Um sicherzustellen, dass dies für alle Benutzer korrekt funktioniert:

• Setzen Sie accessible={true} auf die TouchableOpacity, damit die Gruppe zusammen fokussiert wird
• Stellen Sie sicher, dass die accessibilityLabel-Eigenschaft der TouchableOpacity genau dem sichtbaren Text-Label entspricht
• Stellen Sie accessibilityRole auf switch ein, um den richtigen Steuerungstyp zu kommunizieren
• Setzen Sie importantForAccessibility='no-hide-descendants' auf das Switch-Element, damit es nicht einzeln fokussiert werden kann
• Fügen Sie eine onPress-Aktion hinzu, um das Verhalten des Schalters bei Aktivierung zu verarbeiten

Kann ich diese Regel ignorieren?

Schalternamen haben eine kritische Auswirkungen für Benutzer. Ein Schalter ohne zugänglichen Namen kann von Bildschirmleser-Nutzern nicht verstanden oder verwendet werden. Wir empfehlen dringend, dieses Problem in allen Fällen zu beheben. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• Siehe Native Mobile Android unter 4.1.2 Name, Rolle, Wert (A)

Hinweis: Der vollständige Zugriff auf die Ressourcen der Deque University erfordert ein Abonnement.

Weitere Ressourcen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C-Empfehlung - Erfolgskriterium 4.1.2 - Name, Rolle, Wert
• WCAG 2.1 Verständnishilfen - Verständnis 4.1.2 A - Name, Rolle, Wert