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.
Foco e ordem das guias
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.
Se quiser mover o foco de uma página, use TAB para "avançar" e SHIFT + TAB para "voltar". 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 lembradas ao avaliar e ajustar a ordem de tabulação:
- Organizar elementos no DOM para que estejam em ordem lógica
- Definir corretamente a visibilidade do conteúdo fora da tela que não precisa receber foco
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 da tabulação
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: nonevisibility: 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: blockvisibility: visible
Próximas etapas
Para usuários que operam o computador quase totalmente com o teclado ou outro dispositivo de entrada, uma ordem lógica de tabulação é essencial para tornar o 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.