Nombre de vista activa
Cualquier vista interactiva debe tener un nombre accesible disponible para tecnologías de asistencia como TalkBack y Voice Access.
Impacto
Las personas que utilizan TalkBack son las más afectadas. La imposibilidad de centrarse en una vista o de que se anuncie el nombre de la vista a través de TalkBack crea una experiencia inaccesible.
La versión de Android, el dispositivo y el fabricante pueden influir en la detección de problemas.
Confirmación
- Activar TalkBack
- Intente enfocar el control
- Ocurrirá uno de los siguientes casos:
- Inaccesible: No se puede enfocar el control.
- Inaccesible: enfocado pero no anunciado con TalkBack.
- Accesible: Enfocado y anunciado en TalkBack.
Cómo solucionarlo
XML
Utilice la propiedad de texto de un control o la descripción del contenido de una vista para garantizar que TalkBack tenga información precisa para compartir.
Button button = .......
button.setText("Button's Name");
ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");Compose
Empareje los botones de imagen con una descripción de contenido o texto para indicar su propósito.
@Composable
fun EmailIconButton() {
IconButton(
onClick = { … },
) {
Icon(
painter = painterResource(id = R.drawable.email_icon),
contentDescription = “Send an Email”
)
}
}Los botones que no sean imágenes deben proporcionar texto para TalkBack.
@Composable
fun EmailButton() {
Button(
modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
onClick = { … },
) {
Text(
text = “Email”
)
}
}React Native
Para solucionar un problema detectado por esta regla, agregue un accessibilityLabel al componente de control.
<TextInput
...
accessibilityLabel="First Name"
/>Cuando los elementos se agrupan dentro de una vista contenedora, agregue la propiedad accessible y la propiedad accessibilityLabel a la vista contenedora:
<View
importantForAccessibility='no-hide-descendants'
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel={"Dark Mode"}
accessibilityValue={{ text: "" + isEnabled }}
accessibilityRole='switch'
onPress={() => {
setIsEnabled(!isEnabled)
}}
>
<Switch
trackColor={{ false: 'lightgray', true: 'dimgray' }}
ios_backgroundColor={'lightgray'}
thumbColor={'white'}
onValueChange={ () => {
setIsEnabled(!isEnabled)
}}
value={isEnabled}
accessibilityElementsHidden={true}
/>
</View>