CheckBox-Name

Was wir überprüfen

Jedes CheckBox-Element sollte einen zugänglichen Namen haben, der für unterstützende Technologien wie TalkBack und Voice Access verfügbar ist.

Beispiel eines Fehlers ❌

name = {none}

TalkBack kündigt nur den Wert und die Rolle an
„Checked, CheckBox“

Voice Access - Der Benutzer spricht „Abonnieren Sie den Newsletter“
Dies wird die Checkbox nicht aktivieren, da sie keinen Namen hat

Gültiges Beispiel ✅

name = „Abonnieren Sie den Newsletter“

TalkBack kündigt an the name, value, and role
„Abonnieren Sie den Newsletter, Checked, CheckBox“

Voice Access - Der Benutzer spricht „Abonnieren Sie den Newsletter“
Dies aktiviert die Checkbox, weil der Name übereinstimmt

Auf einen Blick

• Diese Regel hat erhebliche Auswirkungen auf die Benutzer
• Jede Checkbox benötigt einen Namen: Benutzer, die auf TalkBack oder Voice Access angewiesen sind, müssen in der Lage sein, Checkboxes zu identifizieren und mit ihnen zu interagieren
• Weisen Sie ein sichtbares Label zu: Verwenden Sie ein TextView (XML) oder eine Text-Komponente (Compose), die mit der Checkbox verbunden ist
• Vermeiden Sie die gleichzeitige Verwendung von Text und ContentDescription Eigenschaften — sie stehen miteinander in Konflikt

Auswirkungen auf die Benutzer

Menschen, die unterstützende Technologien wie TalkBack und/oder Voice Access verwenden, sind am stärksten von den durch diese Regel erkannten Problemen betroffen.

Wenn ein CheckBox keinen zugänglichen Namen hat, kündigt TalkBack nur dessen Wert und Rolle an — zum Beispiel „Checked, CheckBox“ — und lässt den Benutzer ohne Kontext darüber, was er auswählt. Dies macht es unmöglich, den Zweck des Steuerelements ohne zusätzliche Erkundung zu verstehen, und verhindert, dass Voice Access-Nutzer die Checkbox durch Aussprechen des Labels aktivieren.

CheckBox-Name-Problem bestätigen

1. Aktivieren Sie TalkBack
2. Versuchen Sie, das Steuerelement zu fokussieren
3. Eines der folgenden Dinge wird geschehen:
   • Nicht zugänglich: TalkBack gibt nur den Wert und die Rolle an.
   • Zugänglich: Sowohl der Name als auch der Wert werden von TalkBack gelesen.

Probleme beheben

Um ein Problem mit dem CheckBox-Namen zu lösen, stellen Sie sicher, dass jede Checkbox einen zugänglichen Namen hat, indem Sie sie mit einem sichtbaren Textetikett verknüpfen. So wird TalkBack einen bedeutungsvollen Namen zusammen mit dem Wert und der Rolle der Checkbox ankündigen. Voice Access-Nutzer können die Checkbox durch Aussprechen des Labels aktivieren.

XML

Weisen Sie mithilfe des labelFor-Attributs ein TextView dem CheckBox zu. Dadurch wird das sichtbare Label mit der Checkbox verknüpft, sodass TalkBack den Text des Labels als zugänglichen Namen der Checkbox ankündigt.

  <LinearLayout
      android:layout_width="wrap_content"                                       
      android:layout_height="wrap_content"
      android:orientation="horizontal">                                         
                                                                              
      <CheckBox                                                               
          android:id="@+id/subscribe_checkbox"
          android:layout_width="wrap_content"                                   
          android:layout_height="wrap_content" />
                                                                                
      <TextView                                                               
          android:layout_width="wrap_content"                                 
          android:layout_height="wrap_content"
          android:text="Subscribe to newsletter"                                
          android:labelFor="@id/subscribe_checkbox" />
                                                                                
  </LinearLayout>  

Wenn die Ansichten programmgesteuert erstellt werden oder die Zuordnung in XML nicht vorgenommen werden kann, verwenden Sie setLabelFor, um das Label mit der Checkbox im Code zu verknüpfen.

TextView label = findViewById(R.id.checkbox_label);
CheckBox checkBox = findViewById(R.id.subscribe_checkbox);
label.setLabelFor(checkBox.getId());

Compose

Wickeln Sie das Checkbox- und ein Textelement in ein übergeordnetes Element mit der Checkbox-Zugänglichkeitsrolle, und stellen Sie sicher, dass die Aktion der Checkbox durch Auswahl des übergeordneten Elements ausgelöst werden kann.

Row(modifier = Modifier
    .toggleable(
        value = checkedState,
        enabled = true,
        role = Role.Checkbox, // Parent element has the accessibility role
        onValueChange = { setCheckBoxState(!checkedState) } // 
    )
    .semantics(mergeDescendants = true) { }
    .constrainAs(labeledTextField) {
        setConstraints(top = parent.top, start = parent.start, end = parent.end)
    }
) {
    Checkbox(
        checked = checkedState,
        modifier = Modifier.padding(16.dp),
        onCheckedChange = null
    )

    Text(text = "Get Marketing emails", modifier = Modifier.padding(16.dp))
}

React Native

Hinweis: Die React Native Checkbox-Komponente ist veraltet, daher gilt dies nur bei Verwendung eines Drittanbieter-Checkbox-Elements oder beim Erstellen eines benutzerdefinierten Elements.

Um eine Checkbox und ein Label in React Native zu kombinieren, können Sie beide Elemente innerhalb eines TouchableOpacity umschließen:

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => {
     setSelection(!isSelected)
     }
   }
   accessible={true}
   accessibilityLabel={"Do you like React Native?"}
   accessibilityRole='checkbox'>
     <CheckBox
       importantForAccessibility='no-hide-descendants'
       value={isSelected}
       onValueChange={setSelection}
       style={styles.checkbox}
      />
     <Text>Do you like React Native?</Text>
</TouchableOpacity>

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

• Setzen Sie accessible={true} auf den TouchableOpacity, damit unterstützende Technologien die Gruppe als ein einzelnes Element fokussieren
• Setzen Sie accessibilityLabel so, dass es genau mit dem sichtbaren Textetikett übereinstimmt
• Setzen Sie accessibilityRole auf checkbox, um den Benutzern unterstützender Technologien den richtigen Kontext zu bieten
• Setzen Sie importantForAccessibility='no-hide-descendants' auf den CheckBox, damit er nicht einzeln fokussiert werden kann
• Fügen Sie der TouchableOpacity eine onPress-Aktion hinzu, um den Umschaltvorgang der Checkbox zu steuern

Kann ich diese Regel ignorieren?

CheckBox Name has a Erhebliche Auswirkungen for users, and we recommend remediating this issue in nearly all cases. A checkbox with no accessible name provides no context to assistive technology users and prevents Voice Access interaction entirely. Learn more about Regeln ignorieren.

Ressourcen

Deque University Kursseiten

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

  Hinweis: Der volle Zugriff auf die Ressourcen der Deque University erfordert ein Abonnement.

Andere Ressourcen

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