Caixa de Foco do Elemento A11y

O Que Verificamos

O caminho de acessibilidade de um elemento, ou a caixa de foco do VoiceOver, deve encapsular totalmente sua própria estrutura visual na tela.

Esta regra reforça uma Melhor Prática da Deque. Você pode desativar esta regra no Mobile Dashboard ou ignorar a regra em testes escritos para iOS.

Aprenda como desativar regras no Mobile Dashboard.

Visão Geral

• Esta regra tem um impacto moderado para usuários videntes que também usam o VoiceOver
• A caixa de foco do VoiceOver deve corresponder aos limites visuais na tela do elemento que está anunciando
• Evite usar accessibilityPath ou accessibilityFrame se possível - o VoiceOver calcula automaticamente o quadro correto
• Se precisar substituir o quadro, recalcule as coordenadas toda vez que o elemento se mover (como ao rolar a tela)

Impacto para os Usuários

Os usuários videntes que também utilizam o VoiceOver são os mais impactados. O VoiceOver anunciará os detalhes de um elemento na tela, mas a caixa de foco aparecerá parcial ou totalmente fora do elemento sendo anunciado. Esse descompasso entre o conteúdo falado e o destaque visível dificulta o acompanhamento e a compreensão do que está sendo focalizado.

Confirmar Problema de Caixa de Foco do Elemento A11y

1. Ative o VoiceOver
2. Focalize o elemento
3. Um dos seguintes ocorrerá:
   • Inacessível: a caixa de foco do VoiceOver conterá parcialmente o elemento
   • Inacessível: a caixa de foco do VoiceOver não conterá o elemento de forma alguma
   • Acessível: a caixa de foco do VoiceOver conterá totalmente o elemento

Corrigir Problemas

Problemas encontrados por esta regra são quase sempre causados pelo uso incorreto de accessibilityPath ou accessibilityFrame. A abordagem mais segura é removê-los e deixar que o VoiceOver calcule a caixa de foco automaticamente. Se um quadro personalizado for necessário, as coordenadas devem ser recalculadas em relação ao elemento raiz toda vez que sua posição for alterada.

UIKit

O uso incorreto de accessibilityPath ou accessibilityFrame em um elemento resultará na identificação de um problema por esta regra. Corrija de uma das duas maneiras:

• Remova accessibilityPath ou accessibilityFrame se não forem necessários. O VoiceOver calcula automaticamente as coordenadas na tela e desenha a caixa de foco correta.
• Se precisar substituir o quadro, converta o quadro do elemento para coordenadas da vista raiz e reatribua o caminho sempre que o elemento se mover (como em um UIScrollview):

// Assuming we are in a ViewController
let button = UIButton()

// If not within a ViewController, self.view should be replaced with the rootView of the screen
let rootview = self.view
let onScreenFrame = button.superview!.convert(button.frame, to: rootview)
button.accessibilityPath = UIBezierPath(rect: onScreenFrame)

SwiftUI

Este tipo de problema de acessibilidade não é esperado em visualizações SwiftUI.

React Native

Este tipo de problema de acessibilidade não é esperado com elementos Touchable ou Pressable padrões.

Ao adicionar foco a outro tipo de elemento, defina as propriedades accessible e accessibilityElementsHidden diretamente nesse elemento:

<Image
   source={DequeLogo}
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel="Deque Systems Logo"
   accessibilityRole="image"
   style={{ width: 100, height: 60 }}
   resizeMode='center'
/>

Quando elementos estão agrupados dentro de um contêiner View, defina as propriedades accessible e accessibilityElementsHidden na vista de contêiner:

<View
  style={styles.rowContainer}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel="Dark Mode"
  accessibilityValue={{ text: "" + secondSwitchIsEnabled }}
  accessibilityRole="switch"
  onTouchStart={() => {
    setSecondSwitchIsEnabled(!secondSwitchIsEnabled)
  }}>
    <Text style={{ fontSize: 18 }}>Dark Mode</Text>
    <Switch
        style={styles.standardSwitch}
        importantForAccessibility='no-hide-descendants'
        value={secondSwitchIsEnabled}
        onValueChange={() => {
          setSecondSwitchIsEnabled(!secondSwitchIsEnabled);
        }}
    />
</View>

Posso Ignorar Esta Regra?

O A11y Element Focus Box tem um impacto moderado para os usuários. Como esta é uma regra de Melhor Prática, ela pode ser desativada no Painel Móvel ou suprimida em testes individuais. No entanto, uma caixa de foco desalinhada cria uma experiência confusa para os usuários do VoiceOver com visão e vale a pena corrigir quando a causa for uma accessibilityPath ou accessibilityFramemal configurada. Saiba mais sobre ignorar regras.

Recursos

Páginas do Curso da Deque University

• Critério de Sucesso 2.4.7 - Foco Visível (AA)
• 2.4.7a - Foco Visível

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

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.1, Recomendação W3C
  • Critério de Sucesso 2.4.7 - Foco Visível
• Documentação do Desenvolvedor Apple
  • accessibilityFrame
  • accessibilityPath