Nome do Interruptor

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.0 - 4.1.2 A Impact - Critical

O que verificamos

Qualquer elemento Switch deve ter um nome acessível que descreva seu propósito para tecnologias assistivas, como TalkBack e Voice Access.

Exemplo de Falha ❌

Android phone screen showing a settings-style list with a toggle switch. A TalkBack focus ring is around the switch. A speech bubble reads 'Off, Switch.'

O interruptor não tem um nome acessível.

TalkBack lê "Off, Switch."

Voice Access — o usuário não tem um rótulo visível para falar e ativar o interruptor.

Exemplo de Sucesso ✅

Android phone screen showing a settings-style list with a toggle switch labeled 'Dark Mode'. A TalkBack focus ring is around the switch and visible label. A speech bubble reads 'Dark Mode, Off, Switch.'

O interruptor está etiquetado com texto visível via labelFor ou agrupamento.

TalkBack lê "Dark Mode, Off, Switch."

Voice Access — o usuário diz "Modo Escuro" para ativar o interruptor.

Visão Geral

  • Esta regra tem um impacto crítico para os usuários
  • Cada interruptor precisa de um nome acessível que descreva o que ele controla
  • Um nome como "Modo Escuro" é muito mais útil do que nenhum nome
  • O nome deve vir de um rótulo visível sempre que possível, usando labelFor ou técnicas de agrupamento
  • Evite definir uma descrição de conteúdo diretamente no interruptor, a menos que o estado (por exemplo, 'ligado'/'desligado') seja preservado

Impacto nos Usuários

Pessoas que são cegas, têm baixa visão ou usam acesso por interruptor dependem do nome acessível para entender o que um interruptor faz antes de interagir com ele. Sem um nome, o TalkBack só anuncia 'ligado' ou 'desligado' — não dando aos usuários contexto sobre o que estão controlando.

note

Quando um interruptor e seu rótulo visível são elementos separados, a ordem de foco importa. Se o TalkBack chegar ao interruptor antes do rótulo, ele pode anunciar apenas o estado e não o nome. Use labelFor ou agrupe os elementos para garantir que o nome e o interruptor sejam anunciados como um só.

Confirmar Problema de Nome do Interruptor

  1. Ative o TalkBack
  2. Tente focar em um elemento Switch
  3. Uma das seguintes situações ocorrerá:
    • Inacessível: o TalkBack anuncia apenas 'ligado' ou 'desligado'.
    • Acessível: o TalkBack anuncia o nome do interruptor e 'ligado' ou 'desligado'.

Corrigir Problemas

Um interruptor precisa de um nome acessível para que a tecnologia assistiva possa anunciar o que ele controla. A melhor abordagem é agrupar ou vincular o rótulo e o interruptor para que sejam tratados como um único elemento acessível.

XML

Você pode fornecer um rótulo no elemento vizinho ou envolver o interruptor com seu rótulo. Você também pode manipular o contentDescription, mas certifique-se de manter o estado 'ligado' e 'desligado' para os anúncios do TalkBack.

layouts/activity.xml
<TextView
     android:id="@+id/label"
     android:text="@string/label_text"
     android:labelFor="@+id/switch">
<Switch
     android:id="@+id/switch"/>

...

strings.values/
<string name="label_text">Dark Mode</string>

Compose

Agrupe um Text e Switch em um layout mesclado, como uma Linha. Aplique a função do interruptor e o modificador de alternância ao Text, e apague a semântica do Switch usando Modifier.clearAndSetSemantics { }. Dessa forma, o TalkBack focará no rótulo, em vez de no elemento de interruptor diretamente.

val (isSwitchChecked, setSwitchState) = remember { 
    mutableStateOf(true) 
}

Row(modifier = Modifier.semantics(mergeDescendants = true) { }) {
    Text(
        text = "Get Emails",
        modifier = Modifier
            .toggleable(
                value = isSwitchChecked,
                onValueChange = { 
                    setSwitchState(!isSwitchChecked) 
                },
                role = Role.Switch
            )
    )

    Switch(
        checked = isSwitchChecked,
        onCheckedChange = { 
            setSwitchState(!isSwitchChecked) 
        },
        modifier = Modifier
            .clearAndSetSemantics { }
    )
}

React Native

Para combinar um interruptor e um rótulo no React Native, envolva ambos os componentes dentro de um componente TouchableOpacity:

<TouchableOpacity
   onPress={() => {
     setSwitchOn(!switchOn)
     Alert.alert("Switch on : " + !switchOn)}}
   style={styles.subContainer}
   accessible={true}
   accessibilityLabel={"Subscribe"}
   accessibilityRole='switch'>
      <Text style={{ fontSize: 22 }}>
         Subscribe
      </Text>
      <Switch
         importantForAccessibility='no-hide-descendants'
         onValueChange={() => {
            setSwitchOn(!switchOn)
            Alert.alert("Switch on : " + !switchOn)} }
        value={switchOn}
   />
</TouchableOpacity>

Para garantir que isso funcione corretamente para todos os usuários:

  • Defina accessible={true} no TouchableOpacity para que o grupo tenha foco junto
  • Certifique-se de que a propriedade accessibilityLabel do TouchableOpacity corresponda exatamente ao rótulo de texto visível
  • Defina o accessibilityRole para switch para comunicar o tipo de controle correto
  • Defina importantForAccessibility='no-hide-descendants' no elemento Switch para que ele não possa ser focado individualmente
  • Adicione uma ação onPress para lidar com o comportamento do interruptor quando ativado

Posso Ignorar Esta Regra?

O Nome do Interruptor tem um Impacto crítico para os usuários. Um interruptor sem um nome acessível não pode ser entendido ou usado por usuários de leitores de tela. Recomendamos fortemente corrigir esse problema em todos os casos. Saiba mais sobre ignorando regras.

Recursos

Páginas de Cursos da Deque University

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

Outros Recursos

Is this page helpful?

Help us improve this page

Still need help?