Muitos usuários dependem do teclado para navegar pelos aplicativos, desde usuários com deficiências motoras temporárias e permanentes em usuários do teclado e os atalhos para aumentar a eficiência e a produtividade. Uma boa navegação pelo teclado para seu aplicativo cria uma experiência melhor para todos.
Foco e ordem de tabulação
Em um determinado momento, focus se refere a qual elemento em seu 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 colada da área de transferência.
Para mover o foco de uma página, use TAB para navegar "para frente" e SHIFT + TAB
navegar "para trás". O elemento em foco no momento é frequentemente indicado por uma
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 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 DOM. Esses elementos interativos também têm um processamento de eventos de teclado integrado. Elements 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 é importante para oferecer aos usuários com uma experiência de navegação tranquila pelo teclado. Existem duas ideias principais a serem em mente 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 deve receber foco
Organizar os elementos no DOM para que fiquem em ordem lógica
Para verificar se a ordem de tabulação de seu aplicativo é lógica, tente percorrer as guias página. Em geral, o foco deve seguir a ordem de leitura, movendo-se da esquerda para a direita, da parte superior para a parte inferior da página.
Se a ordem de foco parecer errada, você deve reorganizar os elementos no DOM para tornar a ordem da tabulação mais natural. Se você quer que algo apareça visualmente mais cedo na tela, mova-o para cima no DOM.
Navegue pelos dois conjuntos de botões abaixo para acessar uma guia lógica em comparação a 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 de elementos usando CSS para evitar criar uma ordem de tabulação ilógica. Para corrigir a ordem incorreta da tabulação acima, mova o "Kiwi" flutuante para que fique depois de "Coco" no DOM, e remova o estilo inline.
Definição correta da visibilidade de conteúdo fora da tela
Algumas vezes, elementos interativos fora da tela precisam estar no DOM, mas não devem ser na ordem de tabulação. Por exemplo, se você tiver uma navegação lateral responsiva que abre ao clicar em um botão, o usuário não poderá se concentrar na navegação lateral quando estiver fechado.
Para evitar que um determinado elemento interativo receba foco, você deve forneça ao elemento uma das seguintes propriedades CSS:
display: nonevisibility: hidden
Para adicionar o elemento de volta à ordem de tabulação, por exemplo, quando a navegação lateral é aberto, substitua, respectivamente, as propriedades CSS acima por:
display: blockvisibility: visible
Próximas etapas
Para usuários que operam seus computadores quase totalmente com o teclado ou outro dispositivo de entrada, uma ordem lógica de tabulação é essencial para tornar os aplicativos ficam acessíveis e usáveis. Como um bom hábito ao verificar a ordem da guia, tente navegar pelo aplicativo antes de cada publicação.