Nombre de la casilla de verificación

Cualquier elemento CheckBox debe tener un nombre accesible disponible para tecnologías de asistencia como TalkBack y Voice Access.

Impacto

Las personas que usan TalkBack son las más afectadas por los problemas de accesibilidad detectados por esta regla.

Confirmación

1. Activar TalkBack
2. Intente enfocar el control
3. Ocurrirá uno de los siguientes casos:
   • No accesible: TalkBack solo anuncia el valor y el rol.
   • Accesible: TalkBack lee tanto el nombre como el valor.

Cómo solucionarlo

XML

Proporcione un nombre explícito para el CheckBox control utilizando un TextView y asociándolo con su elemento CheckBox .

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

Compose

Envuelva la casilla de verificación y el componente de texto dentro de un elemento con el Checkbox rol de accesibilidad y asegúrese de que la acción del control pueda invocarse en el componente principal.

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: el componente de casilla de verificación de React Native ha quedado obsoleto, por lo que esto solo se aplicará cuando se use un componente de casilla de verificación de terceros o cuando se cree un componente personalizado.

Para combinar una casilla de verificación y una etiqueta en React Native, puedes envolver ambos componentes dentro de un TouchableOpacity componente:

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

Para garantizar que esto funcione bien y proporcione todo el contexto necesario tanto para los usuarios de tecnología de asistencia como para los usuarios de tecnología no asistencial:

• Asegúrese de que la TouchableOpacity vista tenga la accessible propiedad establecida en verdadera, de modo que el grupo esté enfocado en conjunto para los usuarios de tecnología de asistencia.

• Asegúrese de que la accessibilityLabel propiedad del TouchableOpacity componente esté establecida exactamente en el mismo valor de la etiqueta de texto.

• Configure los TouchableOpacity componentes accessibilityRole a checkbox para proporcionar a los usuarios de tecnología de asistencia el contexto correcto.

• Establezca la propiedad CheckBox componentes importantForAccessibility a no-hide-descendants para que el componente no pueda ser enfocado individualmente.

• Agregue una acción a través de onPress al componente TouchableOpacity para manejar el comportamiento de la casilla de verificación cuando se activa.