Etiqueta en el nombre

Aprenda cómo estamos utilizando la inteligencia artificial para esta regla.

Una vista enfocable en accesibilidad debe garantizar que su nombre incluya su etiqueta visible.

Impacto

Las personas que utilizan TalkBack o tienen baja visión son las más afectadas por los problemas detectados. Los problemas pueden contribuir a una experiencia confusa o conflictiva entre el anuncio de TalkBack y el contenido en la pantalla.

Confirmación

1. Activar TalkBack
2. Intente enfocar el control
3. Ocurrirá uno de los siguientes casos:
   • Inaccesible: el texto anunciado por TalkBack es diferente del nombre del widget mostrado.
   • Accesible: el texto anunciado por TalkBack es el mismo o incluye el nombre del widget mostrado.

Cómo solucionarlo

XML

Establezca una descripción de contenido que coincida o contenga el texto visible. Si el control es un Button o un control clickeable TextView:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");

Si el control es un CheckBox, consulte Nombre de la casilla de verificación.

Compose

Asegúrese de que los widgets contentDescription contengan el nombre de la vista.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Email”
        )
    }
}

React Native

La propiedad accessibilityLabel debe coincidir o contener el texto visible del componente.

De forma predeterminada, un botón utilizará su título como su accessibilityLabel y, por lo tanto, pasará esta regla.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Para los elementos interactivos sin título, utilice una vista táctil que contenga los componentes de control y texto. De esta manera, el componente de texto se convierte en la etiqueta visible para el control. Establezca el elemento contenedor accessibilityLabel para que coincida o contenga el texto visible.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>