Conceitos básicos do acesso ao teclado

Muitos usuários diferentes dependem do teclado para navegar em aplicativos, desde usuários com deficiências motoras temporárias e permanentes até usuários que usam atalhos de teclado para serem mais eficientes e produtivos. Ter uma boa estratégia de navegação pelo teclado no app cria uma experiência melhor para todos.

Em um determinado momento, o foco se refere a qual elemento do aplicativo (como um campo, caixa de seleção, botão ou link) recebe entrada do teclado. Além de receber eventos de teclado, o elemento em foco também recebe o conteúdo colado da área de transferência.

Para mover o foco em uma página, use TAB para navegar "para frente" e SHIFT + TAB para navegar "para trás". O elemento atualmente em foco geralmente é indicado por um anel de foco, e vários navegadores estilizam os anéis de foco de maneira diferente. A ordem em que o foco passa para a frente e para trás pelos elementos interativos é chamada de ordem de guias.

Elementos HTML interativos, como campos de texto, botões e listas de seleção, são implicitamente focalizáveis: eles são inseridos automaticamente na ordem de guia com base na posição deles no DOM. Esses elementos interativos também têm o manuseio integrado de eventos de teclado. Elementos como parágrafos e divs não são focalizáveis implicitamente porque os usuários geralmente não precisam interagir com eles.

Implementar uma ordem lógica de guias é uma parte importante para oferecer aos usuários uma experiência de navegação pelo teclado tranquila. Há duas ideias principais a serem consideradas ao avaliar e ajustar a ordem das guias:

  1. Organizar elementos no DOM para que estejam em ordem lógica
  2. A visibilidade do conteúdo fora da tela que não precisa receber foco foi definida corretamente.

Organizar elementos no DOM para que estejam em ordem lógica

Para verificar se a ordem das guias do seu aplicativo é lógica, tente navegar pela página. Em geral, o foco precisa seguir a ordem de leitura, movendo-se da esquerda para a direita, da parte de cima para a parte de baixo da página.

Se a ordem de foco parecer errada, reorganize os elementos no DOM para tornar a ordem das guias mais natural. Se você quiser que algo apareça visualmente mais cedo na tela, mova-o mais cedo no DOM.

Tente alternar entre os dois conjuntos de botões abaixo para conferir uma ordem de guias lógica em comparação com uma ordem de guias ilógica:

Ordem lógica das guias

Ordem das guias não lógica

O código desses dois exemplos é comparado abaixo:

Ordem lógica das guias

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

Ordem das guias não lógica

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

Tenha cuidado ao mudar a posição visual de elementos usando CSS para evitar criar uma ordem de guias ilógicas. Para corrigir a ordem de guias ilógicas acima, mova o botão "Kiwi" flutuante para que ele apareça depois do botão "Coconut" no DOM e remova o estilo inline.

Definir corretamente a visibilidade do conteúdo fora da tela

Às vezes, elementos interativos fora da tela precisam estar no DOM, mas não na ordem das guias. Por exemplo, se você tiver um menu lateral responsivo que é aberto quando você clica em um botão, o usuário não poderá focar no menu lateral quando ele estiver fechado.

Para impedir que um elemento interativo específico receba o foco, atribua a ele uma das seguintes propriedades CSS:

  • display: none
  • visibility: hidden

Para adicionar o elemento de volta à ordem de guias, por exemplo, quando a navegação lateral é aberta, substitua as propriedades CSS acima por:

  • display: block
  • visibility: visible

Próximas etapas

Para usuários que operam o computador quase que inteiramente com o teclado ou outro dispositivo de entrada, uma ordem lógica de guias é essencial para tornar seu aplicativo acessível e utilizável. Como um bom hábito para verificar a ordem das guias, tente navegar pelo aplicativo antes de cada publicação.