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.

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, utilize .accessibilityElement(children: .combine) para garantir que todo o texto filho seja anunciado
• No React Native, evite definir accessibilityElementsHidden para true em 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 estão agrupados dentro de um contêiner, o VoiceOver pode não ler todo o texto dentro do contêiner — especialmente se elementos de texto individuais estiverem ocultos da tecnologia assistiva. Isso significa que pessoas que dependem do VoiceOver podem não estar cientes de conteúdo importante na tela que está disponível para usuários que enxergam.

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 pelo uso do padrão accessibilityLabel para um elemento de acessibilidade contendo múltiplos 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 além do modificador accessibilityElement(children:..) .

Use esses modificadores em uma visualização de agrupamento ao invés de elementos individuais. Note a ordem e AccessibilityChildBehavior especificada 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 um uso inadequado da propriedade accessible e/ou da propriedade accessibilityElementsHidden . Se você estiver definindo essas propriedades explicitamente, certifique-se de que NÃO estão configuradas de forma a ocultar texto visível da tecnologia assistiva.

Flutter

Quando um contêiner agrupa várias partes de texto, garanta que todo o texto visível seja 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 Elementos Aninhados 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, 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