Nome de Elementos Aninhados

O Que Verificamos

Um elemento focalizável deve ter todo o texto visível dentro de seu nome acessível disponível para tecnologias assistivas como VoiceOver e Controle por Voz.

Exemplo com Erro ❌

O cartão é focável, mas os elementos de texto infantil estão not included in the container's accessible name

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

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

Exemplo Correto ✅

Todo o texto visível dentro do cartão é included in the container's accessible name

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

Os usuários de leitores de tela recebem as mesmas informações que os 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 VoiceOver e Controle por Voz
• No UIKit, defina explicitamente accessibilityLabel no contêiner para incluir todo o texto aninhado
• No SwiftUI, use .accessibilityElement(children: .combine) para garantir que todo o texto infantil seja anunciado
• No React Native, evite definir accessibilityElementsHidden em true nos elementos de texto visíveis

Impacto nos Usuários

As pessoas que usam o VoiceOver são as mais impactadas por problemas de Nome de Elementos Aninhados. Quando vários elementos são agrupados em um contêiner, o VoiceOver pode não ler todo o texto dentro do contêiner - especialmente se os elementos de texto individuais estiverem ocultos da tecnologia assistiva. Isso significa que as pessoas que dependem do VoiceOver podem não estar cientes de conteúdo importante na tela que está disponível para os usuários videntes.

Confirmar Problema de Nome de Elementos Aninhados

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

Corrigir Problemas

Para resolver problemas de Nome de Elementos Aninhados, garanta que todo o texto visível dentro de um contêiner focalizável esteja disponível para a tecnologia assistiva. Evite ocultar explicitamente elementos de texto do VoiceOver ou Controle por Voz quando eles contêm conteúdo que usuários que enxergam podem perceber.

UIKit

Um problema encontrado por esta regra é causado pela utilização do valor padrão accessibilityLabel para um elemento de acessibilidade que contém vários elementos de texto.

Para corrigir, defina explicitamente o accessibilityLabel do contêiner para incluir todo o texto visível:

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

Um problema encontrado por esta regra no SwiftUI indica uso inadequado do modificador accessibilityElement em adição ao modificador accessibilityElement(children:..).

Use esses modificadores em uma visualização de agrupamento em vez de nos elementos individuais. Observe a ordem e o AccessibilityChildBehavior especificado abaixo.

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

Um problema encontrado por esta regra em aplicativos construídos com React Native indica uso inadequado da propriedade accessible e/ou propriedade accessibilityElementsHidden. Se você estiver definindo essas propriedades explicitamente, certifique-se de que elas NÃO estejam configuradas de uma maneira que esconda o texto visível da tecnologia assistiva.

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 os nós de texto infantil 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 Elementos Aninhados tem um Impacto Crítico para os usuários, e recomendamos fortemente que sejam tomadas 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 o padrão. Saiba mais sobre ignorar regras.

Recursos

Páginas de Cursos 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 W3C
  • Critério de Sucesso 1.3.2 - Sequência Significativa
• Documentos de Compreensão do WCAG 2.0
  • Compreendendo 1.3.2 A - Sequência Significativa