Nome do Controle Ativo

Qualquer visão interativa deve ter um nome acessível disponível para tecnologias assistivas, como VoiceOver e Controle por Voz.

Impacto

Pessoas que usam o VoiceOver são as mais impactadas. Um elemento de controle sem nome não transmitirá o contexto completo ou o propósito à pessoa que interage com o controle.

Confirmação

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

Como Corrigir

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 controle seja significativo ou forneça um accessibilityLabel se for necessário mais contexto.

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

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

Alternativamente, combine o controle e suas subvisualizações para formar um único elemento. Se um texto significativo não estiver disponível, defina um accessibilityLabel em toda a vista como 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)
}

React Native

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

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

Quando os elementos estão agrupados juntos dentro de uma vista contenedora, adicione a prop accessible prop, e a accessibilityLabel prop à vista contenedora:

<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>