Analisar o suporte de teclado nos formulários

Este artigo usa a ferramenta Inspecionar e a guia Ouvintes de Eventos para analisar a falta de suporte ao teclado em uma página de demonstração que tem botões que usam o <div> elemento.

Na página da Web de demonstração de teste de acessibilidade, no formulário Doar , os botões de valor e o botão Doar não podem ser acessados com um teclado. Para testar isso:

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

2. Na seção Ajude-nos com uma doação , clique na caixa de texto Outros para colocar o foco nela.

3. Tente pressionar Tab ou Shift-Tab para mover o foco para os botões Doar, 50, 100 ou 200 . Os botões não são acessíveis pelo teclado.

A depuração do formulário de doação requer entender por que a falta de estilo de foco não é sinalizada como um problema com ferramentas de teste automáticas, como a ferramenta Problemas . Neste exemplo, os botões são implementados usando <div> elementos HTML, que não são reconhecidos por essas ferramentas como controles de formulário.

Analise a falta de suporte ao teclado usando a ferramenta Inspecionar

Para usar a ferramenta Inspecionar para analisar a falta de suporte ao teclado na página de demonstração:

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

2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar.

3. Clique no botão Inspecionar () no canto superior esquerdo do DevTools para que o botão seja realçado (azul).

4. Passe o mouse sobre o botão de doação de 50, 100 e 200 . A ferramenta Inspecionar aparece na página da Web, como uma sobreposição. A linha focalizável no teclado da sobreposição Inspecionar mostra que nenhum dos botões do valor da doação pode ser acessado pelo teclado, conforme indicado por um círculo cinza riscado:

   

   Os botões não têm nome e têm uma função de generic porque são <div> elementos, o que significa que os botões não são acessíveis à tecnologia adaptativa.

5. Quando a ferramenta Inspecionar estiver ativa, na página da Web, selecione a caixa de texto Outra entrada, acima do botão Doar . A ferramenta Elementos é aberta, mostrando a árvore DOM da página da Web. O elemento <input id="freedonation" class="smallinput"> é selecionado.

   <div class="donationrow">
       <div class="donationbutton">50</div>
       <div class="donationbutton">100</div>
       <div class="donationbutton">200</div>
   </div>
   <div class="donationrow">
       <label for="freedonation">Other</label>
       <input id="freedonation" class="smallinput">
   </div>
   <div class="donationrow">
       <div class="submitbutton">Donate</div>
   </div>
   

   O uso dos <label> elementos e <input> na caixa de texto Outro é válido, o que significa que o rótulo Outro está corretamente vinculado à caixa de texto de entrada. A <input> caixa de texto também é acessível pelo teclado. O restante da marcação do formulário usa <div> elementos que são fáceis de estilizar com CSS, mas não têm significado para tecnologia assistiva e não são acessíveis ao teclado.

Analise a falta de suporte ao teclado usando a guia Ouvintes de Eventos

A funcionalidade do formulário é criada usando JavaScript e você pode testá-la verificando a guia Ouvintes de Eventos , da seguinte maneira:

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

2. Clique com o botão direito do mouse na caixa de texto Outro na página da Web e selecione Inspecionar. A ferramenta Elementos é aberta e o <input id="freedonation" class="smallinput"> elemento é selecionado.

3. Com o elemento <input id="freedonation" class="smallinput"> ainda selecionado na árvore DOM, selecione a guia Ouvintes de eventos à direita da guia Estilos e expanda o click ouvinte de eventos.

   

4. Clique no buttons.js:18 link. A ferramenta Fontes é aberta, mostrando o JavaScript aplicado:

   

   Aqui está uma listagem de código do JavaScript aplicado:

   donations.addEventListener('click', e => {
     let t = e.target;
     if (t.classList.contains('donationbutton')) {
       if (currentbutton) { currentbutton.classList.remove('current'); }
       t.classList.add('current');
       currentbutton = t;
       e.preventDefault();
     }
     if (t.classList.contains('submitbutton')) {
       alert('Thanks for your donation!')
     }
   })
   

Usar um click ouvinte de eventos para executar o código quando um botão é usado é uma boa prática, pois um click evento é acionado no ponteiro do mouse e na interação do teclado. No entanto, o botão Doar é implementado usando um <div> elemento HTML, que não pode ser focado com o teclado. O click evento só é executado quando você usa um mouse ou outra fonte de um click evento, como um botão especial que está disponível em alguns teclados.

Este é um exemplo clássico em que o JavaScript foi adicionado para recriar a funcionalidade que <button> os elementos fornecem nativamente. Simular a funcionalidade dos botões usando <div> elementos acabou produzindo uma experiência inacessível.