CheckBox Naam

Waar We Op Controleren

Elk CheckBox-element moet een toegankelijke naam hebben die beschikbaar is voor hulpmiddelen zoals TalkBack en Voice Access.

Foutief Voorbeeld ❌

name = {none}

TalkBack kondigt alleen de waarde en rol aan
"Aangevinkt, CheckBox"

Voice Access - Gebruiker zegt "Abonneren op nieuwsbrief"
Dit zal het selectievakje niet activeren omdat het geen naam heeft

Correct Voorbeeld ✅

name = "Abonneren op nieuwsbrief"

TalkBack kondigt aan the name, value, and role
"Abonneren op nieuwsbrief, Aangevinkt, CheckBox"

Voice Access - Gebruiker zegt "Abonneren op nieuwsbrief"
Dit activeert het selectievakje omdat de naam overeenkomt

In Een Oogopslag

• Deze regel heeft een ernstige impact voor gebruikers
• Elke checkbox heeft een naam nodig: gebruikers die afhankelijk zijn van TalkBack of Voice Access moeten checkboxen kunnen identificeren en ermee kunnen werken
• Koppel een zichtbaar label: gebruik een TextView (XML) of een Text component (Compose) gekoppeld aan de checkbox
• Vermijd het gelijktijdig gebruiken van Text en ContentDescription eigenschappen — ze conflicteren met elkaar

Impact op Gebruikers

Mensen die gebruik maken van assistieve technologie zoals TalkBack en/of Voice Access worden het meest getroffen door problemen die door deze regel worden gedetecteerd.

Wanneer een CheckBox geen toegankelijke naam heeft, kondigt TalkBack alleen de waarde en rol aan — bijvoorbeeld, "Aangevinkt, CheckBox" — waardoor de gebruiker geen context heeft over wat ze selecteren. Dit maakt het onmogelijk om het doel van de bediening te begrijpen zonder verdere verkenning en voorkomt dat Voice Access-gebruikers het selectievakje activeren door de labelnaam uit te spreken.

Bevestig CheckBox Naam Probleem

1. Zet TalkBack aan
2. Probeer de controle te focussen
3. Een van de volgende dingen zal gebeuren:
   • Niet toegankelijk: TalkBack kondigt alleen de waarde en rol aan.
   • Toegankelijk: Zowel de naam als de waarde worden door TalkBack voorgelezen.

Los Problemen Op

Om een CheckBox Naam probleem op te lossen, zorg ervoor dat elke checkbox een toegankelijke naam heeft door deze met een zichtbaar tekstlabel te associëren. Hierdoor zal TalkBack een betekenisvolle naam aankondigen samen met de waarde en rol van de checkbox. Voice Access-gebruikers kunnen het selectievakje activeren door de labelnaam uit te spreken.

XML

Koppel een TextView aan de CheckBox met behulp van het labelFor attribuut. Dit koppelt het zichtbare label aan de checkbox zodat TalkBack de tekst van het label aankondigt als de toegankelijke naam van de checkbox.

  <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>  

Als de weergaven programmatisch worden gemaakt of de koppeling niet in XML kan worden gemaakt, gebruik dan setLabelFor om het label in de code aan de checkbox te koppelen.

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

Compose

Omhul de Checkbox en een tekstelement binnen een parent element met de Checkbox toegankelijkheidsrol en zorg ervoor dat de actie van de checkbox kan worden uitgevoerd door het parent element te selecteren.

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

Opmerking: De React Native checkbox component is uitgefaseerd, dus dit geldt alleen bij gebruik van een checkbox component van derden of bij het maken van een aangepast element.

Om een checkbox en label in React Native te combineren, kun je beide elementen binnen een TouchableOpacity omhullen:

<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>

Om ervoor te zorgen dat dit correct werkt voor alle gebruikers:

• Stel accessible={true} in op de TouchableOpacity zodat assistieve technologie zich richt op de groep als één enkel element
• Stel accessibilityLabel in om exact overeen te komen met het zichtbare tekstlabel
• Stel accessibilityRole in op checkbox om de juiste context aan gebruikers van assistieve technologie te bieden
• Stel importantForAccessibility='no-hide-descendants' in op de CheckBox zodat deze niet individueel kan worden gefocust
• Voeg een onPress actie toe aan de TouchableOpacity voor het beheren van het omzetten van de checkbox

Kan Ik Deze Regel Negeren?

CheckBox Naam heeft een Ernstige impact voor gebruikers, en we raden aan om dit probleem in bijna alle gevallen te verhelpen. Een checkbox zonder toegankelijke naam biedt geen context aan gebruikers van assistieve technologie en voorkomt volledig interactie via Voice Access. Leer meer over negeren van regels.

Hulpmiddelen

Deque University Cursus Pagina's

• Bekijk Native Mobile Android onder 4.1.2 Naam, Rol, Waarde (A)

  Opmerking: Volledige toegang tot Deque University resources vereist een abonnement.

Andere Bronnen

• Web Content Accessibility Guidelines (WCAG) 2.1, W3C Aanbeveling
  • Succescriterium 4.1.2 – Naam, Rol, Waarde (A)
  • Begrijpen van 4.1.2 – Naam, Rol, Waarde