Nombre del Elemento Anidado
Asegúrese de que todo el texto visible en un contenedor sea accesible para los lectores de pantalla
Esta es una regla experimental, y por lo tanto sus resultados se consideran en fase de pruebas beta. Aprende más sobre reglas experimentales y cómo puedes ayudar a mejorarlas.
¡Descubre cómo estamos usando inteligencia artificial para esta regla!
Lo que Verificamos
Un elemento enfocable debe tener todo el texto visible dentro de su nombre accesible disponible para tecnologías de asistencia como TalkBack y Voice Access.
Ejemplo Fallido ❌
La tarjeta es enfocable, pero los elementos de texto secundarios son hidden from assistive technology
TalkBack solo anuncia "Group" - ninguno de los textos visibles (título, autores, fecha, etc.) es leído en voz alta
Los usuarios de lectores de pantalla no tienen acceso al contenido que los usuarios videntes pueden leer
Ejemplo Exitoso ✅
Todo el texto visible dentro de la tarjeta es available to assistive technology
TalkBack anuncia el contenido completo: título, autores, fecha de publicación, número de páginas, formato e ISBN
Los usuarios de lectores de pantalla reciben la misma información que los usuarios videntes
En Resumen
- Esta regla tiene un impacto crítico para los usuarios
- Todo el texto visible dentro de un contenedor enfocable debe estar disponible para TalkBack y Voice Access
- Evite establecer
importantForAccessibility="no"en elementos de texto que los usuarios videntes pueden percibir - En Compose, evite usar
invisibleToUser()en elementos de texto que son visibles en la pantalla - En React Native, evite establecer
importantForAccessibilityenno-hide-descendantsen texto visible
Impacto para los Usuarios
Las personas que usan TalkBack son las más afectadas por problemas de Nombre de Elemento Anidado. Cuando varios elementos están agrupados dentro de un contenedor, TalkBack puede no leer todo el texto dentro del contenedor, especialmente si los elementos de texto individuales están ocultos de la tecnología de asistencia. Esto significa que las personas que dependen de TalkBack pueden desconocer contenido importante en pantalla al que los usuarios videntes tienen acceso.
Confirmar Problema de Nombre de Elemento Anidado
- Active TalkBack
- Concéntrese en el elemento de accesibilidad que contiene el texto
- Ocurriará uno de los siguientes:
- Inaccesible: TalkBack no leerá todo el texto visible dentro del área de enfoque
- Accesible: TalkBack leerá todo el texto contenido dentro del área de enfoque
Solucionar Problemas
Para resolver los problemas de Nombre de Elemento Anidado, asegúrese de que todo el texto visible dentro de un contenedor enfocable esté disponible para la tecnología de asistencia. Evite ocultar explícitamente elementos de texto de TalkBack o Voice Access cuando contengan contenido que los usuarios videntes puedan percibir.
XML
Evite establecer la propiedad importantForAccessibility en vistas de texto a no. Todos los usuarios deben tener el mismo acceso al texto en la pantalla, independientemente de si están o no usando tecnología de asistencia.
Compose
Evite marcar los elementos de texto Compose como invisibleToUser. Todos los usuarios deben tener el mismo acceso al texto en la pantalla, independientemente de si están o no usando tecnología de asistencia.
En el ejemplo a continuación, elimine invisibleToUser para asegurar que las vistas estén disponibles para las personas que usan tecnología de asistencia.
Row {
Text("Welcome to Deque")
Text("I am a text element.", modifier = Modifier.semantics {
// Omit the API below to make your Text elements accessible
invisibleToUser()
})
}React Native
Un problema encontrado por esta regla en aplicaciones construidas con React Native indica un uso indebido de la propiedad importantForAccessibility. Si utiliza la propiedad, asegúrese de que NO esté configurada a no-hide-descendants.
Flutter
Cuando un contenedor agrupa múltiples piezas de texto, asegúrese de que todo el texto visible esté expuesto al lector de pantalla. Use MergeSemantics para combinar nodos de texto secundarios en un solo nombre accesible.
// Failing — ExcludeSemantics hides visible text from the screen reader
Semantics(
label: 'Item name: Widget',
child: Column(
children: [
const Text('Item name: Widget'),
ExcludeSemantics(child: const Text('Price: \$9.99')),
ExcludeSemantics(child: const Text('In stock')),
],
),
)
// Passing — MergeSemantics combines all child text into one node
// Screen reader announces "Item name: Widget, Price: $9.99, In stock"
MergeSemantics(
child: Column(
children: [
const Text('Item name: Widget'),
const Text('Price: \$9.99'),
const Text('In stock'),
],
),
)¿Puedo Ignorar Esta Regla?
Nombre de Elemento Anidado tiene un impacto crítico para los usuarios, y recomendamos encarecidamente tomar medidas para remediar este problema. En casos raros, algo de texto dentro de un contenedor puede ser intencionalmente decorativo o redundante — pero esto debería ser la excepción, no la regla. Aprende más sobre ignorando reglas.
Recursos
Páginas de Cursos de Deque University
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.0, Recomendación del W3C
- Documentos de Comprensión de WCAG 2.0