Muitos usuários diferentes dependem do teclado para navegar pelos 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. Uma boa estratégia de navegação pelo teclado para seu aplicativo cria uma experiência melhor para todos.
Foco e ordem da tabulação
Em um determinado momento, foco se refere 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 que foi colado da área de transferência.
Se quiser mover o foco para uma página, use TAB para avançar e SHIFT + TAB
para navegar para "voltar". O elemento em foco no momento é geralmente indicado por um
anel de foco, e vários navegadores definem o estilo deles de maneira diferente. A
ordem em que o foco avança para frente e para trás nos elementos interativos
é chamada de ordem da 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 (link em inglês). Esses elementos interativos também têm gerenciamento integrado de eventos de teclado. Elementos como parágrafos e divs não são implicitamente focalizáveis porque os usuários normalmente não precisam interagir com eles.
Implementar uma ordem lógica de tabulação é uma parte importante para fornecer aos usuários uma experiência de navegação tranquila pelo teclado. Há duas ideias principais que você precisa ter em mente ao avaliar e ajustar a ordem das guias:
- Organizar os elementos do DOM em ordem lógica
- Definir corretamente a visibilidade do conteúdo fora da tela que não pode receber foco
Organizar os elementos do DOM em ordem lógica
Para verificar se a ordem de tabulação do seu aplicativo é lógica, tente percorrer a 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 de tabulação mais natural. Se você quiser que algo apareça visualmente no início da tela, mova-o mais cedo no DOM.
Tente percorrer os dois conjuntos de botões abaixo para experimentar uma ordem lógica em comparação com uma ordem ilógica:
Ordem lógica da tabulação
Ordem ilógica de 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 ilógica de 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 a criação de uma ordem de tabulação ilógica. Para corrigir a ordem ilógica da tabulação acima, mova o botão "Kiwi" flutuante para que fique após o botão "Coconut" no DOM e remova o estilo in-line.
Definir corretamente a visibilidade do conteúdo fora da tela
Às vezes, os elementos interativos fora da tela precisam estar no DOM, mas não na ordem da tabulação. Por exemplo, se você tiver uma navegação lateral responsiva que é aberta ao clicar em um botão, o usuário não poderá se concentrar na navegação lateral quando ela estiver fechada.
Para impedir que um elemento interativo específico receba foco, forneça a ele uma das seguintes propriedades CSS:
display: nonevisibility: hidden
Para adicionar o elemento novamente à ordem de tabulação, por exemplo, quando a navegação lateral for 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.