Partilhar via

Verifique se há suporte ao teclado usando as teclas Tab e Enter

  • Artigo

É 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 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 chave 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 para 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 de 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 saltar de elemento em 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 Pesquisa e pressione Enter para enviar a pesquisa. Essa abordagem produz o mesmo resultado que selecionar o botão ir . Selecionar Inserir 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 tópico:

    Navegando 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 dizer qual elemento ele é.

  6. Observe a URL no canto inferior esquerdo. Se você olhar para a parte inferior esquerda da tela (ou se usar um leitor de tela), perceberá que está no menu de navegação da barra lateral com links azuis, pois o navegador mostra a URL à 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 alcançar 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 ao teclado no formulário de doação é o campo de entrada de texto

  8. Selecionar a Guia novamente coloca o foco na barra de navegação superior da página, com botões de menu para Casa, Adotar um Animal de Estimação, Doar, Trabalhos e Sobre Nós. Pressione Tab ou Shift+Tab para colocar o foco em um botão de menu, conforme indicado por um contorno de foco. Em seguida, pressione Enter para acessar essa seção da página da Web.

    O menu main tem um destaque e um contorno de foco e, portanto, é acessível ao 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 tem foco. Consulte Analisar a falta de indicação do foco do teclado.

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

  • A ordem do acesso ao teclado por meio de 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 fácil acesso 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.