Avançar para o conteúdo
SilktideAjuda

Ao receber foco

A simples movimentação até um elemento, por exemplo, pressionando Tab, nunca deve acionar uma mudança significativa, como carregar uma nova página, enviar um formulário ou abrir um pop-up.

Esta é uma : a automação não consegue determinar com confiabilidade, a partir de JavaScript minificado ou de frameworks, se um manipulador de foco altera o contexto. Por isso, a Silktide exibe o prompt em cada página, e uma pessoa confirma isso navegando com a tecla Tab.

Por que isso é importante

Usuários de teclado movem o foco pela página para explorá-la, assim como usuários de mouse movem o ponteiro — alcançar um controle não é o mesmo que escolher usá-lo. Se simplesmente navegar até uma caixa de pesquisa recarregar a página, ou alcançar um botão abrir uma caixa de diálogo, usuários de teclado e de serão levados para algum lugar para onde não pediram para ir, muitas vezes perdendo seu ponto de leitura e seu trabalho. Pessoas com deficiências motoras que navegam lentamente, elemento por elemento, encontram essas armadilhas constantemente.

Este é o critério de sucesso 3.2.1 (Ao receber foco) das , um requisito de — parte do nível de conformidade mais básico.

O que verificar

  1. Navegue com a tecla Tab por todos os controles focalizáveis da página.
  2. Confirme que o foco, por si só, nunca navega, envia um formulário nem abre uma caixa de diálogo ou uma nova janela.
  3. Manipuladores de foco que apenas destacam um campo, exibem uma dica ou preparam dados em segundo plano são aceitáveis.

Se o foco nunca alterar o contexto, o resultado.

Como corrigir

  1. Remova a ação do manipulador de foco. A navegação, o envio e as caixas de diálogo devem ser acionados por uma ação explícita, como click, Enter ou uma alteração que o visitante confirme.
  2. Use manipuladores de foco somente para efeitos não disruptivos.
// Problema: alcançar o campo navega imediatamente
searchBox.addEventListener('focus', () => {
  window.location.href = '/search';
});

// Correção: navegar somente quando o usuário escolher agir
searchBox.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    window.location.href = '/search';
  }
});

Como a Silktide testa isso

A Silktide não consegue detectar com confiabilidade mudanças de contexto acionadas pelo foco inspecionando o código-fonte dos ouvintes — frameworks e minificação tornam essa abordagem frágil —, por isso esta verificação exibe um prompt de revisão por página, descrevendo o que deve ser verificado navegando com a tecla Tab.

Saiba mais

Última atualização

Esta página foi útil?