Nombre de Elementos Anidados

Qué Verificamos

Un elemento enfocable debe tener todo el texto visible dentro de su nombre accesible disponible para tecnologías de asistencia, como VoiceOver y Control por Voz.

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 accessibilityLabel en 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 accessibilityElementsHidden a true en 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

1. Activar VoiceOver
2. Enfocarse en el elemento de accesibilidad que contiene el texto
3. 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

• Criterio de Éxito 1.3.2 - Secuencia Significativa (A)

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
  • Criterio de Éxito 1.3.2 - Secuencia Significativa
• Documentos de comprensión de WCAG 2.0
  • Comprensión 1.3.2 A - Secuencia Significativa