Texto Associado

O que Verificamos

Um elemento interativo deve obter seu nome acessível de um rótulo próximo disponível para tecnologias assistivas, como o VoiceOver e o Controle por Voz.

Exemplo de Falha ❌

O campo "Endereço de e-mail" está em foco, mas o texto disponível visualmente é not announced by VoiceOver

O VoiceOver anuncia "Text field, blank" - apenas a função e o valor, sem nome

Os usuários não conseguem saber que informação o campo espera

Exemplo de Sucesso ✅

O rótulo visível "Endereço de e-mail" corresponde ao que é anunciado pelo VoiceOver

O VoiceOver anuncia "Email address, text field, blank" - nome, função e valor presentes

Os usuários sabem exatamente que informação o campo espera

Resumo Rápido

• Esta regra tem um impacto de Sério a Crítico, dependendo de o rótulo visível ser focável
• Elementos interativos devem derivar seu nome acessível do rótulo visível que os descreve
• O VoiceOver apenas anuncia a função e o valor de um elemento se o nome acessível estiver ausente

Impacto para os Usuários

Pessoas que usam o VoiceOver são mais impactadas. Um elemento interativo que está visualmente ligado a um rótulo descritivo deve também transmitir essa relação por meio do texto para a tecnologia assistiva.

Quando um slider, botão de alternância ou outro controle possui um rótulo visível próximo, mas nenhum nome acessível configurado para corresponder a esse rótulo, os usuários do VoiceOver ouvem apenas a função e o valor do elemento, não seu propósito. Usuários do Controle por Voz também podem ser afetados quando o rótulo falado não corresponde ao nome acessível do controle.

Confirme o Problema de Texto Associado

1. Ative o VoiceOver
2. Concentre-se no elemento interativo
3. Uma das seguintes situações acontecerá:
   • Inacessível: o VoiceOver não anunciará o rótulo associado como o nome do elemento - apenas sua função e valor, se presentes
   • Acessível: o VoiceOver anunciará o rótulo associado como o nome do elemento

Resolva Problemas

Para resolver um problema de Texto Associado, atribua o texto do rótulo visível como o nome acessível do elemento interativo. Isso garante que o VoiceOver anuncie o nome correto e alinha a experiência da tecnologia assistiva com o que os usuários videntes podem perceber. Oculte o elemento de rótulo independente da árvore de acessibilidade para evitar que ele seja anunciado duas vezes.

UIKit

Defina o accessibilityLabel no elemento interativo para corresponder ao texto do rótulo próximo e, em seguida, oculte o rótulo da árvore de acessibilidade:

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

Use o modificador .accessibilityLabel() no elemento interativo, passando o texto do rótulo visível como o nome acessível:

@State private var payment: CGFloat = 0
private let sliderLabel = "Payment"
var body: some View {
    VStack {
        Text("\(Int(payment)) \(sliderLabel)")
        Slider(value: $payment, in: 0...20).accessibilityLabel(sliderLabel)
    }
}

React Native

Certifique-se de que o texto visível que acompanha um elemento interativo esteja incluído na prop accessibilityLabel do controle:

<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>

Quando texto visível e um elemento interativo estão agrupados dentro de um View focável, certifique-se de que o texto visível esteja incluído na prop accessibilityLabel do contêiner View:

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel='Light Level'
>
  <Text
    style={{ color: 'black', fontSize: 22 }}
    accessible={false}
  >
    Light Level
  </Text>
  <Slider accessible={false}/>
</View>

Flutter

Envolva o rótulo visível e o elemento interativo em um widget MergeSemantics para que ambos sejam expostos à tecnologia assistiva como um único nó focável. O VoiceOver anunciará o rótulo visível como parte do nome acessível do elemento:

  MergeSemantics(
    child: Row(
      children: [
        const Text('The Lights'),
        Switch(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  )

Posso Ignorar Esta Regra?

Texto Associado tem um impacto de Sério a Crítico para os usuários, e recomendamos fortemente corrigir este problema. Como os usuários do VoiceOver dependem inteiramente do nome acessível para entender o que um elemento interativo faz, uma associação ausente torna esses elementos funcionalmente inutilizáveis para a tecnologia assistiva. Saiba mais sobre ignorando regras.

Recursos

Páginas do Curso da Deque University

• Critério de Sucesso 4.1.2 - Nome, Função, Valor
• 4.1.2a Nome, Função, Valor

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

Outros Recursos

• Diretrizes de Acessibilidade de Conteúdo para a Web (WCAG) 2.0, Recomendação W3C
  • Critério de Sucesso 4.1.2 - Nome, Função, Valor
• Documentos de Compreensão do WCAG 2.0
  • Compreendendo 4.1.2 A - Nome, Função, Valor