Nome della casella di controllo

Ogni elemento CheckBox dovrebbe avere un nome accessibile disponibile per tecnologie assistive come TalkBack e Voice Access.

Impatto

Le persone che utilizzano TalkBack sono quelle maggiormente colpite dai problemi di accessibilità individuati da questa regola.

Conferma

1. Attiva TalkBack
2. Tentare di focalizzare il controllo
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: TalkBack annuncia solo il valore e il ruolo.
   • Accessibile: sia il nome che il valore vengono letti da TalkBack.

Come risolvere

XML

Fornisci un nome esplicito per il CheckBox controllo utilizzando un TextView e associandolo al tuo CheckBox elemento.

CheckBox checkBox = .......; // Role: CheckBox
TextView label = .......; // Role: Label
label.setLabelFor(checkBox.getId()); // Associate the Checkbox with its Name

Compose

Inserire la casella di controllo e il componente di testo all'interno di un elemento con il Checkbox ruolo di accessibilità e assicurarsi che l'azione del controllo possa essere richiamata sul componente padre.

Row(modifier = Modifier
    .toggleable(
        value = checkedState,
        enabled = true,
        role = Role.Checkbox,
        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

Nota: il componente checkbox di React Native è stato deprecato, quindi questo sarà valido solo quando si utilizza un componente checkbox di terze parti o quando si crea un componente personalizzato.

Per combinare una casella di controllo e un'etichetta in React Native, puoi racchiudere entrambi i componenti all'interno di un componente: TouchableOpacity

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

Per garantire che funzioni correttamente e fornisca tutto il contesto necessario sia per gli utenti di tecnologie assistive che per quelli non assistive:

• Assicurarsi che TouchableOpacity la proprietà della accessible vista sia impostata su true, in modo che il gruppo sia concentrato insieme sugli utenti di tecnologie assistive.

• Assicurarsi che accessibilityLabel la proprietà del TouchableOpacity componente sia impostata esattamente sullo stesso valore dell'etichetta di testo.

• Impostare i TouchableOpacity componenti accessibilityRole a checkbox per fornire il contesto corretto agli utenti di tecnologie assistive.

• Impostare la proprietà CheckBox components importantForAccessibility a no-hide-descendants in modo che il componente non possa essere messo a fuoco individualmente.

• Aggiungere un'azione tramite onPress al componente TouchableOpacity per gestire il comportamento della casella di controllo quando viene attivata.