Nombre de Elementos Anidados
Asegúrese de que todo el texto visible dentro de los elementos hijos anidados esté incluido en el nombre accesible del padre
Qué Verificamos
El texto visible dentro de los elementos hijos anidados debe incluirse en el nombre accesible del padre cuando ese texto transmita información o relaciones significativas.
Ejemplo Fallido ❌
La tarjeta se puede enfocar, pero los elementos de texto hijo están not included in the container's accessible name
VoiceOver solo anuncia "Group" — ninguno de los textos visibles (título, autores, fecha, etc.) se lee en voz alta
Los usuarios de lectores de pantalla no tienen acceso al contenido que los usuarios videntes pueden leer
Ejemplo Aprobado ✅
Todo el texto visible dentro de la tarjeta está included in the container's accessible name
VoiceOver 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
De Un Vistazo
- Esta regla tiene un impacto crítico para los usuarios
- Todo el texto visible dentro de un contenedor enfocable debe estar disponible para VoiceOver y Control por Voz
- En UIKit, configure explícitamente
accessibilityLabelen el contenedor para incluir todo el texto anidado - En SwiftUI, use
.accessibilityElement(children: .combine)para asegurar que todo el texto hijo sea anunciado - En React Native, evite configurar
accessibilityElementsHiddenatrueen elementos de texto visibles
Impacto para los Usuarios
Las personas que utilizan VoiceOver son las más afectadas por los problemas de Nombre de Elementos Anidados. Cuando varios elementos se agrupan dentro de un contenedor, VoiceOver puede no leer todo el texto dentro del contenedor, especialmente si los elementos de texto individuales están ocultos para la tecnología de asistencia. Esto significa que las personas que dependen de VoiceOver pueden no ser conscientes de contenido importante en pantalla que está disponible para los usuarios videntes.
Confirmar el Problema de Nombre de Elementos Anidados
- Activar VoiceOver
- Enfocarse en el elemento de accesibilidad que contiene el texto
- Ocurrirá una de las siguientes situaciones:
- Inaccesible: VoiceOver no leerá todo el texto visible dentro del área de enfoque
- Accesible: VoiceOver leerá todo el texto contenido dentro del área de enfoque
Corregir Problemas
Para resolver los problemas de Nombre de Elementos Anidados, asegúrese de que todo el texto visible dentro de un contenedor enfocable esté disponible para tecnología de asistencia. Evite ocultar explícitamente elementos de texto de VoiceOver o Control por Voz cuando contengan contenido que los usuarios videntes puedan percibir.
UIKit
Un problema encontrado por esta regla es causado por el uso del accessibilityLabel predeterminado para un elemento de accesibilidad que contiene múltiples elementos de texto.
Para solucionar, configure explícitamente el accessibilityLabel del contenedor para incluir todo el texto visible:
let paragraphOne = UILabel()
let paragraphTwo = UILabel()
let accessibilityElement = UIView()
paragraphOne.text = "One paragraph of text about something."
paragraphTwo.text = "A second paragraph of text about something."
accessibilityElement.addSubviews([paragraphOne, paragraphTwo])
// Update the accessibility element's accessibilityLabel, so both paragraphs are read by VoiceOver.
view.accessibilityLabel = "\(paragraphOne.text) \(paragraphTwo.text)"SwiftUI
Un problema encontrado por esta regla dentro de SwiftUI indica el uso indebido del modificador accessibilityElement además del modificador accessibilityElement(children:..).
Use estos modificadores en una vista de agrupación en lugar de en elementos individuales. Tenga en cuenta el orden y AccessibilityChildBehavior especificado a continuación.
VStack(alignment: .leading) {
HStack {
Text("Title:")
book.title.map({ title in
Text(title)
})
}
HStack {
Text("Author:")
book.author.map({ author in
Text(author)
})
}
HStack {
Text("Genre:")
book.genre.map({ genre in
Text(genre)
})
}
}
.accessibilityElement()
.accessibilityElement(children: .combine)React Native
Un problema encontrado por esta regla en aplicaciones construidas con React Native indica un uso indebido de la propiedad accessible y/o la propiedad accessibilityElementsHidden. Si está configurando explícitamente estas propiedades, asegúrese de que NO estén configuradas de una manera que oculte el texto visible de la tecnología de asistencia.
Flutter
Cuando un contenedor agrupa varios fragmentos de texto, asegúrese de que todo el texto visible esté expuesto al lector de pantalla. Use MergeSemantics para combinar nodos de texto hijo en un único 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 Elementos Anidados tiene un Impacto crítico para los usuarios, y recomendamos encarecidamente tomar medidas para remediar este problema. En casos raros, algún texto dentro de un contenedor puede ser intencionalmente decorativo o redundante, pero esto debe ser la excepción, no la norma. Obtenga más información 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 para el Contenido Web (WCAG) 2.0, Recomendación del W3C
- Documentos de comprensión de WCAG 2.0