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.

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 possam 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 usando ou não tecnologias assistivas.

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 usando ou não tecnologias assistivas.

No exemplo abaixo, remova invisibleToUser para garantir que as visualizações estejam disponíveis para pessoas usando tecnologias assistivas.

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 . Caso utilize a propriedade, certifique-se de que NÃO está definida para no-hide-descendants.

Flutter

Quando um contêiner agrupa várias peças de texto, certifique-se de que todo o texto visível está 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?

O Nome do Elemento Aninhado tem um impacto Crítico para os 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 e 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
  • Compreendendo 1.3.2 A - Sequência Significativa