Verifique o suporte ao teclado usando as teclas Tab e Enter

É importante que a interface do usuário de uma página da Web funcione ao usar apenas um teclado, pois nem todos os usuários têm um ponteiro ou dispositivo sensível ao toque, e nem todos os usuários podem ver as páginas da Web. Certifique-se de que você pode usar a tecla Tab para mover o foco para cada controle de formulário em uma página da Web e certifique-se de que você pode usar a tecla Enter para enviar formulários.

Maneiras de testar o suporte ao teclado

Você pode testar a usabilidade de uma página da Web para usuários de teclado de várias maneiras:

Verificando uma página da Web em busca de problemas de acessibilidade do teclado

Para marcar a página da Web de demonstração de teste de acessibilidade para problemas de acessibilidade usando um teclado em vez de um mouse:

  1. Abra a página da Web de demonstração do teste de acessibilidade em uma nova janela ou guia.

  2. Use um teclado para navegar pelo documento de demonstração, usando as teclas Tab ou Shift+Tab para pular de elemento para elemento. Na página da Web de demonstração, a tecla Tab primeiro move o foco para o formulário de pesquisa na header seção.

  3. Pressione Tab para colocar o foco em um botão e pressione Enter para clicar no botão focado. Por exemplo, na página de demonstração, pressione Tab para colocar o foco no campo de pesquisa e pressione Enter para enviar a pesquisa. Essa abordagem produz o mesmo resultado que selecionar o botão ir . Selecionar Enter para enviar o formulário de pesquisa funciona corretamente.

  4. Pressione Tab novamente. O próximo elemento em que você coloca o foco é o primeiro link Mais na content seção da página da Web, conforme indicado por um esboço:

    Navegar no documento usando o teclado e a tecla Tab. O foco é mostrado em um link no documento

  5. Pressione Tab várias vezes até passar o último link Mais . A página rola para cima e você parece estar em um elemento da página, mas não há como saber qual elemento é.

  6. Observe a URL no canto inferior esquerdo. Se você olhar para o canto inferior esquerdo da tela (ou se usar um leitor de tela), perceberá que está no menu de navegação da barra lateral com links azuis, porque o navegador mostra a URL para a qual o link Cats aponta (#cats).

    A falta de estilo de foco torna impossível saber onde você está atualmente no documento. A única dica é a exibição do destino do link no canto inferior esquerdo da tela

  7. Pressione Tab novamente para acessar o campo de entrada no formulário de doação. No entanto, você não pode acessar os botões acima da caixa de texto selecionando Tab. Você não pode usar o teclado para colocar o foco nos botões 50, 100 ou 200 e selecioná-los. Além disso, selecionar Enter não envia o formulário de doação.

    O único elemento acessível pelo teclado no formulário de doação é o campo de entrada de texto

  8. Selecionar Guia novamente coloca o foco na barra de navegação superior da página, com botões de menu para Página inicial, Adote um animal de estimação, Doar, Empregos e Sobre nós. Pressione Tab ou Shift+Tab para colocar o foco em um botão do menu, conforme indicado por um contorno do foco. Em seguida, pressione Enter para acessar essa seção da página da web.

    O menu principal tem um realce e um contorno de foco e, portanto, é acessível pelo teclado

Problemas encontrados que precisam ser corrigidos

Com base no passo a passo acima, encontramos os seguintes problemas que precisam ser corrigidos:

  • Ao usar um teclado, os links azuis do menu de navegação da barra lateral não indicam visualmente qual link está em foco. Consulte Analisar a falta de indicação do foco do teclado.

  • No formulário de doação, os botões de valor e o botão Doar não funcionam com o teclado. Consulte Analisar a falta de suporte ao teclado em um formulário.

  • A ordem do acesso ao teclado por seções da página não está correta. Você navega por todos os links Mais no documento antes de chegar ao menu de navegação da barra lateral. No momento em que a tecla Tab coloca o foco no menu de navegação da barra lateral, você já percorreu todo o conteúdo da página. O menu de navegação da barra lateral destinava-se a fornecer acesso fácil ao conteúdo da página.

    Para obter mais informações sobre como resolver esse problema, consulte Testar o suporte ao teclado usando o Visualizador de Ordem de Origem.

  • Last updated on