Etiqueta en el nombre

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>