Nome do Elemento Aninhado

Saiba como estamos usando inteligência artificial para esta regra!

O Que Verificamos

Um elemento focalizável deve ter todo o texto visível dentro do seu nome acessível disponível para tecnologias assistivas, como o TalkBack e o Voice Access.

Exemplo de Falha ❌

O cartão é focalizável, mas os elementos de texto filhos são hidden from assistive technology

O TalkBack anuncia apenas "Group" - nenhum dos textos visíveis (título, autores, data, etc.) é lido em voz alta

Usuários de leitores de tela não têm acesso ao conteúdo que usuários videntes podem ler

Exemplo de Sucesso ✅

Todo o texto visível no cartão é available to assistive technology

O TalkBack anuncia o conteúdo completo: título, autores, data de publicação, número de páginas, formato e ISBN

Usuários de leitores de tela recebem as mesmas informações que usuários videntes

Visão Geral

• Esta regra tem um impacto crítico para os usuários
• Todo o texto visível dentro de um contêiner focalizável deve estar disponível para o TalkBack e o Voice Access
• Evite definir importantForAccessibility="no" em elementos de texto que usuários videntes podem perceber
• No Compose, evite usar invisibleToUser() em elementos de Texto que estão visíveis na tela
• No React Native, evite definir importantForAccessibility para no-hide-descendants em texto visível

Impacto para os Usuários

As pessoas que usam o TalkBack são as mais afetadas por problemas de Nome do Elemento Aninhado. Quando vários elementos estão agrupados dentro de um contêiner, o TalkBack pode não ler todo o texto dentro do contêiner - especialmente se elementos de texto individuais forem ocultos de tecnologias assistivas. Isso significa que as pessoas que dependem do TalkBack podem ficar sem saber de conteúdo importante na tela que está disponível para os usuários videntes.

Confirmar Problema de Nome do Elemento Aninhado

1. Ative o TalkBack
2. Foque no elemento de acessibilidade que contém o texto
3. Um dos seguintes irá acontecer:
   • Inacessível: o TalkBack não irá ler todo o texto visível dentro da área de foco
   • Acessível: o TalkBack irá ler todo o texto contido dentro da área de foco

Corrigir Problemas

Para resolver questões de Nome do Elemento Aninhado, certifique-se de que todo texto visível dentro de um contêiner focalizável esteja disponível para tecnologias assistivas. Evite ocultar explicitamente elementos de texto do TalkBack ou Voice Access quando eles contêm conteúdo que os usuários videntes possam perceber.

XML

Evite definir a propriedade importantForAccessibility em visualizações de texto para no. Todos os usuários devem ter o mesmo acesso ao texto na tela, independentemente de estarem ou não usando tecnologia assistiva.

Compose

Evite marcar elementos de Texto do Compose como invisibleToUser. Todos os usuários devem ter o mesmo acesso ao texto na tela, independentemente de estarem ou não usando tecnologia assistiva.

No exemplo abaixo, remova invisibleToUser para garantir que as visualizações estejam disponíveis para pessoas que usam tecnologia assistiva.

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

Um problema encontrado por esta regra em aplicativos construídos com React Native indica um uso inadequado da propriedade importantForAccessibility. Se for usar a propriedade, certifique-se de que NÃO está definida como no-hide-descendants.

Flutter

Quando um contêiner agrupa várias partes de texto, certifique-se de que todo o texto visível esteja exposto ao leitor de tela. Use MergeSemantics para combinar nós de texto filhos em um único nome acessível.

// 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'),
    ],
  ),
)

Posso Ignorar Esta Regra?

Nome de Elemento Aninhado tem um Crítico para usuários, e recomendamos fortemente tomar medidas para remediar este problema. Em casos raros, algum texto dentro de um contêiner pode ser intencionalmente decorativo ou redundante — mas isso deve ser a exceção, não a regra. Saiba mais sobre como ignorar regras.

Recursos

Páginas de Curso da Deque University

• Critério de Sucesso 1.3.2 - Sequência Significativa (A)

Nota: O acesso completo aos recursos da Deque University requer uma assinatura.

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0, Recomendação do W3C
  • Critério de Sucesso 1.3.2 - Sequência Significativa
• Documentos de Compreensão WCAG 2.0
  • Entendendo 1.3.2 A - Sequência Significativa