Muitos usuários dependem do teclado para navegar em apps, desde usuários com deficiência motora temporária e permanente até usuários que usam atalhos de teclado para serem mais eficientes e produtivos. Ter uma boa estratégia de navegação pelo teclado para o aplicativo cria uma experiência melhor para todos.
Foco e ordem de tabulação
Em um determinado momento, foco refere-se a qual elemento do aplicativo (como um campo, caixa de seleção, botão ou link) recebe entrada do teclado no momento. Além de receber eventos de teclado, o elemento em foco também recebe 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 em foco no momento é geralmente indicado por um anel de foco, e vários navegadores têm um estilo diferente. A
ordem em que o foco avança e retrocede pelos elementos interativos
é chamada de ordem de tabulação.
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 da tabulação 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 implicitamente focalizáveis porque os usuários normalmente não precisam interagir com eles.
A implementação de uma ordem lógica de tabulação é uma parte importante para oferecer aos usuários uma experiência tranquila de navegação pelo teclado. Há duas ideias principais a serem lembradas ao avaliar e ajustar a ordem de tabulação:
- Organizar os elementos no DOM para que fiquem em ordem lógica
- Definir corretamente a visibilidade do conteúdo fora da tela que não precisa receber foco
Organizar os elementos no DOM para que fiquem em ordem lógica
Para verificar se a ordem de tabulação do aplicativo é lógica, navegue pela página. Em geral, o foco precisa seguir a ordem de leitura, passando da esquerda para a direita, da parte de cima para a parte de baixo da página.
Se a ordem de foco estiver 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 para frente no DOM.
Navegue pelos dois conjuntos de botões abaixo para experimentar uma ordem de tabulação lógica em comparação com uma ordem de tabulação ilógica:
Ordem lógica da tabulação
Ordem lógica da tabulação
O código desses dois exemplos é comparado abaixo:
Ordem lógica da tabulação
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Ordem lógica da tabulação
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Tenha cuidado ao alterar a posição visual dos elementos usando CSS para evitar criar uma ordem de tabulação ilógica. Para corrigir a ordem ilógica da tabulação acima, mova o botão flutuante "Kiwi" para que ele fique depois do botão "Coco" no DOM e remova o estilo in-line.
Definição correta da visibilidade de conteúdo fora da tela
Às vezes, elementos interativos fora da tela precisam estar no DOM, mas não na ordem de tabulação. Por exemplo, se você tiver uma navegação lateral responsiva que é aberta quando você clica em um botão, o usuário não poderá se concentrar na navegação lateral quando ela estiver fechada.
Para evitar que um determinado elemento interativo receba foco, você precisa conceder a ele uma das seguintes propriedades CSS:
display: nonevisibility: hidden
Para adicionar o elemento de volta à ordem da tabulação, por exemplo, quando a navegação lateral estiver aberta, substitua, respectivamente, 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 de verificar a ordem das guias, tente navegar pelo aplicativo antes de cada publicação.