Nome do Controle Ativo

O Que Verificamos

Um elemento interativo deve ter um nome acessível disponível para tecnologias assistivas, como VoiceOver e Controle por Voz.

Exemplo de Falha ❌

Sem nome (accessibilityLabel) definido.

VoiceOver lê "Button"

Voice Control — o usuário diz "Notificações"
O elemento não responde, pois não tem nome

Exemplo de Aprovação ✅

accessibilityLabel=
'Notifications'

VoiceOver lê "Notifications, button"

Voice Control — o usuário diz "Notificações"
O elemento é ativado porque seu nome corresponde

Em Resumo

• Esta regra tem um impacto crítico para os usuários
• Todo elemento interativo precisa de um nome: botões, links e campos de entrada exigem um nome acessível que o VoiceOver possa anunciar
• Se um elemento interativo não tiver texto visível, forneça um explicitamente usando accessibilityLabel para dar um nome significativo
• Não deixe o VoiceOver sem nada para dizer: um elemento que anuncia apenas seu papel ou valor - sem nome - não oferece aos usuários um contexto preciso do que faz
• O VoiceOver tentará anunciar algo (como o texto do botão ou nome da imagem), então é melhor fornecer um nome preciso e intencional

Impacto para os Usuários

As pessoas que usam o VoiceOver são as mais impactadas. Um elemento interativo sem nome não transmitirá o contexto ou propósito completo para a pessoa que o utiliza.

Quando um elemento interativo - como um botão, elemento de formulário ou controle personalizado - não tem um nome acessível, o VoiceOver não tem nada para anunciar quando esse elemento está em foco. 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 VoiceOver apenas anunciará "Botão, toque duplo para ativar."

Esta regra também impacta pessoas que estão usando o Controle por Voz. Usuários do Controle por Voz que tentam ativar o elemento falando seu rótulo visível descobrirão que ele não responde.

Confirmar Problema de Nome de Controle Ativo

1. Ative o VoiceOver
2. Foque o elemento interativo
3. Uma das seguintes coisas acontecerá:
   • Inacessível: Não anunciará seu nome, apenas seu papel e valor se presentes.
   • Acessível: Ele anunciará seu nome no VoiceOver.

Corrigir Problemas

Para resolver problemas de Controle Ativo, adicione um rótulo de acessibilidade a cada elemento interativo para que o VoiceOver tenha um nome significativo para anunciar. Certifique-se de que o nome selecionado contenha o rótulo visível do elemento.

Certifique-se de que o nome que você escolher descreva a ação, não a aparência. Um ícone de uma lupa deve ser rotulado como “Buscar”, não “ícone de lupa”.

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

UIKit

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

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Certifique-se de que o texto do elemento seja significativo ou forneça um accessibilityLabel se for necessário mais contexto.

Caso de uso: Botão com uma imagem como seu rótulo

Certifique-se de que a imagem tenha um nome significativo. Saiba que isso não será uma opção ao dar suporte a vários idiomas. Se o nome não for viável, defina um accessibilityLabel na imagem.

Alternativamente, combine um elemento pai (ex: contêiner genérico) e seus filhos (ex: texto e um botão) para criar um elemento único. Se o texto significativo não estiver disponível, defina um accessibilityLabel em toda a visualização, conforme mostrado abaixo.

var body: some View {
    HStack(alignment: .center, spacing: 10,
           content: {
        Text("axe DevTools for iOS")
        Spacer()
        Button(action: { openLink() },
               label: {
            Image(systemName: "arrow.up.forward.app")
                .accessibilityHidden(true)
                .frame(minWidth: 50, minHeight: 50)
        })
        .accessibility(removeTraits: .isStaticText)
        .accessibility(removeTraits: .isButton)
        .accessibility(addTraits: .isLink)
    }).padding(16)
        .accessibilityElement(children: .combine)
        // .accessibilityLabel("Axe DevTools for iOS") <-- Add when `Text` is missing to ensure a name is present
}

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 contido, 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 VoiceOver.

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

Ao agrupar um rótulo visível com um elemento interativo, envolva-os em MergeSemantics para que o VoiceOver 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 VoiceOver e do Controle por Voz terão dificuldades em usar um elemento sem um nome acessível. Tome medidas para remediar todas as instâncias deste problema antes de abordar questões de menor prioridade.

Perguntas Frequentes

Ao usar o VoiceOver, eu ouço o conteúdo 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 frequentemente anunciará seu valor. No entanto, o valor não é um substituto para o nome acessível ausente. Para imagens em botões, especificamente, o VoiceOver pode anunciar o nome do arquivo da imagem. Mesmo que o nome do arquivo seja descritivo, isso não é um substituto para o atributo de nome acessível ausente.

Recursos

Páginas do Curso da Deque University

• Veja Native Mobile iOS em 4.1.2a Nome, Função, 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
  • Compreendendo SC 4.1.2, Nome, Função, Valor (Nível A)