Control Activo Anidado
Evita incrustar múltiples controles activos dentro de un solo elemento de accesibilidad
Esta es una regla experimental, y por lo tanto su(s) resultado(s) se consideran en fase beta. Aprende más sobre reglas experimentales y cómo puedes ayudar a mejorarlas.
¡Aprende cómo estamos usando inteligencia artificial para esta regla!
Qué Verificamos
Un elemento de accesibilidad no debe tener múltiples controles activos incrustados dentro de él. TalkBack no puede activar más de un control dentro de un solo elemento de accesibilidad, por lo que el usuario debe poder enfocar e interactuar individualmente con cada control activo.
Ejemplo Fallido ❌
TalkBack focuses each entire card as a single unit
Los botones "Agregar al carrito", lista de deseos y compartir anidados dentro de cada tarjeta son inaccesibles
Los usuarios de TalkBack no pueden activar los controles individuales dentro de la tarjeta
Ejemplo Exitoso ✅
Cada control dentro de una tarjeta es individually focusable por TalkBack
TalkBack navega hacia la imagen, el nombre del producto, el botón "Agregar al carrito", la lista de deseos y el botón de compartir como elementos separados
Los usuarios pueden activar cada acción de manera independiente
A Simple Vista
- Esta regla tiene un impacto crítico para los usuarios
- Un elemento de accesibilidad no debe contener múltiples controles interactivos que sean individualmente clicables pero estén ocultos para la tecnología asistiva
- TalkBack solo puede activar una acción por elemento enfocado; si hay múltiples controles anidados y ocultos, los usuarios no pueden acceder a ellos de forma independiente
Impacto para los Usuarios
Las personas que utilizan TalkBack son las más afectadas. Cuando múltiples controles activos están anidados dentro de un solo elemento de accesibilidad, TalkBack solo puede activar uno de ellos o puede activar el incorrecto por completo. Esto significa que los usuarios pueden desencadenar una acción no deseada, no obtener ninguna respuesta o ser completamente incapaces de acceder a ciertos controles.
Confirmar Problema de Control Activo Anidado
- Activa TalkBack
- Intenta enfocar el control
- Intenta activar el control
- Ocurrirá una de las siguientes cosas:
- Inaccesible: No pasa nada
- Inaccesible: El control se activa, pero su cuadro de enfoque contiene otro control
- Inaccesible: Se activa un control diferente
- Accesible: El control se activa y es el único control en su cuadro de enfoque
Corregir Problemas
Evita elementos clicables anidados. Asegúrate de que cada elemento clicable pueda ser enfocado individualmente por la tecnología asistiva. Si un elemento padre debe manejar una acción general, los controles secundarios deben estar ocultos para la tecnología asistiva para que los usuarios no se enfrenten a interacciones conflictivas o inalcanzables.
XML
Do not set the importantForAccessibility property to "no" on clickable elements nested inside a layout. If child controls should not be individually accessible, ensure the parent handles the action and is the only focusable element.
Componga
Evita el siguiente patrón, donde un padre clicable contiene hijos ocultos con invisibleToUser() — los usuarios de TalkBack no podrán alcanzar los controles secundarios ocultos:
Row(modifier = Modifier.clickable { ... }) {
Text("Settings",
modifier = Modifier.clickable { ... }
.semantics {
invisibleToUser()
})
Text("Information",
modifier = Modifier.clickable { ... }
.semantics {
invisibleToUser()
})
}Si los hijos tienen acciones individuales, asegúrate de que el padre no sea también clicable. El ejemplo exitoso a continuación muestra cada hijo como clicable independientemente, con un padre no clicable:
Row {
Text("Settings",
modifier = Modifier.clickable { ... })
Text("Information",
modifier = Modifier.clickable { ... })
}React Native
Si un control hijo no debe ser enfocado individualmente, asegura que el elemento padre sea accesible y maneje la acción. Establece importantForAccessibility='no-hide-descendants' en el hijo para que esté oculto para la tecnología asistiva:
<TouchableOpacity
style={{flexDirection:'row', alignItems: 'center',}}
onPress={() => props.navigation.navigate('FocusableTextExample')}
accessible={true}
accessibilityLabel={"Purchase items in your shopping cart"}>
<Button title="Buy"
importantForAccessibility='no-hide-descendants'
accessibilityElementsHidden='true'
adjustsFontSizeToFit={true}
marginBottom={20}
titleStyle={{
color: "white",
fontSize: 20,
}}
buttonStyle={{
height: 50,
width: 200
}}
/>
</TouchableOpacity>¿Puedo Ignorar Esta Regla?
Control Activo Anidado tiene un impacto crítico para los usuarios, y recomendamos enfáticamente solucionar estos problemas. Debido a que esta es una regla experimental, debes verificar los resultados manualmente. Si has confirmado que todos los controles activos dentro del elemento son individualmente accesibles y activables por TalkBack, puede ser aceptable ignorar el hallazgo. Aprende más sobre ignorando reglas.
Recursos
Páginas del Curso de Deque University
Nota: El acceso completo a los recursos de Deque University requiere una suscripción.
Otros Recursos
- Pautas de Accesibilidad del Contenido Web (WCAG) 2.1, Recomendación del W3C
- Documentos de comprensión de WCAG 2.1