Nome da Vista Ativa

O que Verificamos

Um elemento interativo deve ter um nome acessível disponível para tecnologias assistivas como o TalkBack e o Voice Access.

Exemplo de Falha ❌

Nenhum nome definido no elemento interativo

TalkBack lê "Button"

Voice Access — usuário fala "Busca"
Elemento não responde pois não tem nome

Exemplo de Sucesso ✅

`contentDescription="Search"`

TalkBack lê "Search, button"

Voice Access — usuário fala "Busca"
Elemento é ativado porque seu nome coincide

Visão Geral

• Esta regra tem um impacto crítico para os usuários
• Todo elemento interativo precisa de um nome: botões, links, controles personalizados, etc. exigem um nome acessível que o TalkBack possa anunciar
• Se um elemento interativo não tiver texto visível, forneça um explicitamente usando propriedades contentDescription ou accessibilityLabel
• Não deixe o TalkBack sem nada para anunciar: um elemento que anuncia apenas seu papel ou valor — sem nome — não dá aos usuários contexto algum sobre sua função

Impacto para os Usuários

As pessoas que usam o TalkBack são as mais impactadas. Um elemento interativo sem nome não transmitirá todo o contexto ou propósito para a pessoa que está interagindo com ele.

Quando um elemento interativo — como um botão, botão de imagem ou controle personalizado — não tem um nome acessível, o TalkBack não tem nada a anunciar quando este elemento é focalizado. Por exemplo, você pode ter um botão com uma imagem de uma seta sublinhada indicando que o usuário pode baixar. Sem um nome acessível, o TalkBack apenas anunciará "Botão, toque duas vezes para ativar."

Esta regra também impacta pessoas que usam o Voice Access. Usuários do Voice Access que tentam ativar o elemento falando seu rótulo visível perceberão que ele não responde.

Confirmar Problema de Nome de Vista Ativa

1. Ative o TalkBack
2. Focalize o elemento interativo
3. Um dos seguintes acontecerá:
   • Inacessível: Não anunciará seu nome, apenas seu papel e valor se presentes.
   • Acessível: Anunciará seu nome no TalkBack.

Corrigir Problemas

Para resolver problemas de Nome de Vista Ativa, adicione um rótulo de texto ou descrição de conteúdo a cada elemento interativo para que o TalkBack tenha um nome significativo para anunciar.

Certifique-se de que o nome que você selecionar:

• Contém o rótulo visível do elemento.
• Descreve a ação, não a aparência. Por exemplo, um ícone de uma lupa deve ser rotulado como “Busca”, não “ícone de lupa”.

Se o propósito de um elemento mudar com base no estado (por exemplo, um botão de Reproduzir/Pausar), atualize o nome sempre que o estado mudar.

XML

Utilize a propriedade de texto de um elemento ou descrição de conteúdo para garantir que o TalkBack tenha informações precisas para compartilhar.

Button button = .......
button.setText("Button's Name");

ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");

Compose

Emparelhe botões de imagem com uma descrição de conteúdo ou texto para indicar o propósito do elemento.

@Composable
fun EmailIconButton() {
    IconButton(
        onClick = { … },
    ) { 
        Icon(
            painter = painterResource(id = R.drawable.email_icon),
            contentDescription = “Send an Email”
        )
    }
}

Botões que não sejam de imagem devem fornecer texto para o TalkBack.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Email”
        )
    }
}

React Native

Para corrigir um problema encontrado por esta regra, adicione um accessibilityLabel ao elemento interativo.

<TextInput
  ...
  accessibilityLabel="First Name"
/>

Quando elementos estão agrupados dentro de um View contêiner, adicione as propriedades accessible e accessibilityLabel a ele:

<View
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel={"Dark Mode"}
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
      setIsEnabled(!isEnabled) 
    }}
 >            
    <Switch
      trackColor={{ false: 'lightgray', true: 'dimgray' }}
      ios_backgroundColor={'lightgray'}
      thumbColor={'white'}
      onValueChange={ () => {
         setIsEnabled(!isEnabled)
      }}
      value={isEnabled}
      accessibilityElementsHidden={true}
     />
</View>

Flutter

Use a propriedade tooltip em IconButton para fornecer um nome acessível. Isso define o nome anunciado pelo TalkBack e também mostra uma dica visual ao pressionar longamente.

  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Para elementos interativos com filhos apenas de ícones, defina semanticLabel diretamente no Icon:

  ElevatedButton(                                                                                                                                            
    onPressed: () {},
    child: const Icon(Icons.add, semanticLabel: 'Add item'),
  )

Ao agrupar um rótulo visível com um elemento interativo, envolva-os em MergeSemantics para que o TalkBack os combine em um único elemento focalizável:

  MergeSemantics(
    child: Row(
      children: [                                                                                                                                              
        const Text("Dark mode"),
        Switch(                                                                                                                                                
          value: _darkMode,                                                                                                                                  
          onChanged: (value) => setState(() => _darkMode = value),
        ),
      ],
    ),
  )

Posso Ignorar Esta Regra?

Esta regra tem um impacto crítico para os usuários e não deve ser ignorada. Um elemento interativo sem nome é uma das falhas de acessibilidade mais fundamentais. Usuários do TalkBack e Voice Access ficam efetivamente impedidos de usar um elemento sem um nome acessível. Tome medidas para remediar todos os casos deste problema antes de abordar questões de menor prioridade.

Perguntas Frequentes

Ao usar o TalkBack, ouço o conteúdo sendo lido em voz alta após focar no elemento. Por que esta regra ainda falha? Se um elemento não tiver um nome definido, o leitor de tela muitas vezes anunciará seu valor. No entanto, o valor não é um substituto para o nome acessível ausente.

Recursos

Páginas de Cursos da Deque University

• Veja Android Móvel Nativo sob 4.1.2a Nome, Papel, Valor (A)

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

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1
  • Entendendo SC 4.1.2, Nome, Função, Valor (Nível A)