Muitos usuários diferentes dependem do teclado para navegar pelos aplicativos, desde aqueles com deficiências motoras temporárias e permanentes até aqueles que usam atalhos de teclado para serem mais eficientes e produtivos. Ter uma boa estratégia de navegação pelo teclado para seu 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 a 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 avança e retrocede pelos elementos interativos
é chamada de ordem de guias.
Elementos HTML interativos, como campos de texto, botões e listas de seleção, são focalizáveis implicitamente: eles são inseridos automaticamente na ordem de guias com base na posição deles no DOM. Esses elementos interativos também têm um processamento de eventos de teclado integrado. Elementos como parágrafos e divs não são focados 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:
- Organizar elementos no DOM para que estejam em ordem lógica
- A visibilidade de 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, de cima para baixo na 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 dos 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 evitar 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 que totalmente com o teclado ou outro dispositivo de entrada, uma ordem de guias lógica é 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.