Nombre del CheckBox

Lo que Comprobamos

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

Ejemplo Fallido ❌

name = {ninguno}

TalkBack anuncia solo el valor y el rol
„Seleccionado, CheckBox“

Voice Access - El usuario dice „Suscribirse al boletín“
Esto no activará la casilla ya que no tiene nombre

Ejemplo Exitoso ✅

name = „Suscribirse al boletín“

TalkBack anuncia the name, value, and role
„Suscribirse al boletín, Seleccionado, CheckBox“

Voice Access - El usuario dice „Suscribirse al boletín“
Esto activa la casilla porque el nombre coincide

De un Vistazo

• Esta regla tiene un impacto serio para los usuarios
• Cada casilla necesita un nombre: los usuarios que dependen de TalkBack o Voice Access deben poder identificar e interactuar con las casillas
• Asocie una etiqueta visible: use un TextView (XML) o un componente Text (Compose) vinculado a la casilla
• Evite usar ambas propiedades Text y ContentDescription juntas — se contradicen entre sí

Impacto en los Usuarios

Las personas que utilizan tecnología de asistencia como TalkBack y/o Voice Access son las más afectadas por los problemas detectados por esta regla.

Cuando un CheckBox no tiene un nombre accesible, TalkBack anuncia solo su valor y rol — por ejemplo, „Seleccionado, CheckBox“ — dejando al usuario sin contexto sobre lo que están seleccionando. Esto hace imposible entender el propósito del control sin exploración adicional, e impide a los usuarios de Voice Access activar la casilla diciendo su etiqueta.

Confirmar Problema de Nombre del CheckBox

1. Activa TalkBack
2. Intenta enfocar el control
3. Ocurrirá una de las siguientes situaciones:
   • Inaccesible: TalkBack solo anuncia el valor y el rol.
   • Accesible: Tanto el nombre como el valor son leídos por TalkBack.

Resolver Problemas

Para resolver un problema de nombre de CheckBox, asegúrese de que cada casilla tenga un nombre accesible asociándola con una etiqueta de texto visible. De esta manera, TalkBack anunciará un nombre significativo junto al valor y rol de la casilla. Los usuarios de Voice Access podrán activar la casilla diciendo su etiqueta.

XML

Asocie un TextView con el CheckBox usando el atributo labelFor. Esto vincula la etiqueta visible a la casilla para que TalkBack anuncie el texto de la etiqueta como el nombre accesible de la casilla.

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

Si las vistas se crean programáticamente, o la asociación no se puede hacer en XML, use setLabelFor para vincular la etiqueta a la casilla en el código.

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

Compose

Envuelva la Checkbox y un elemento de texto dentro de un elemento padre con el rol de accesibilidad Checkbox, y asegúrese de que la acción de la casilla se pueda invocar seleccionando el elemento padre.

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

Nota: El componente de casilla de React Native ha sido desaprobado, por lo que esto solo se aplicará al usar un elemento de casilla de terceros, o cuando se cree un elemento personalizado.

Para combinar una casilla y una etiqueta en React Native, puede envolver ambos elementos dentro de un 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>

Para asegurar que esto funcione correctamente para todos los usuarios:

• Establezca accessible={true} en el TouchableOpacity para que la tecnología de asistencia enfoque el grupo como un único elemento
• Establezca accessibilityLabel para que coincida exactamente con la etiqueta de texto visible
• Establezca accessibilityRole en checkbox para proporcionar el contexto correcto a los usuarios de tecnología de asistencia
• Establezca importantForAccessibility='no-hide-descendants' en el CheckBox para que no se pueda enfocar individualmente
• Agregue una acción onPress al TouchableOpacity para manejar el cambio de la casilla

¿Puedo Ignorar Esta Regla?

El nombre del CheckBox tiene un impacto serio para los usuarios, y recomendamos remediar este problema en casi todos los casos. Una casilla sin nombre accesible no proporciona contexto a los usuarios de tecnología de asistencia e impide completamente la interacción de Voice Access. Obtenga más información sobre ignorando reglas.

Recursos

Páginas de cursos de Deque University

• Vea Native Mobile Android en 4.1.2 Nombre, Función, Valor (A)

  Nota: El acceso completo a los recursos de Deque University requiere una suscripción.

Otros recursos

• Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1, Recomendación de W3C
  • Criterio de Éxito 4.1.2 – Nombre, Función, Valor (A)
  • Comprensión 4.1.2 – Nombre, Función, Valor