Muitos usuários diferentes dependem do teclado para navegar em aplicativos, desde pessoas 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 por teclado para seu aplicativo cria uma experiência melhor para todos.
Foco e ordem das guias
Em um determinado momento, o foco se refere a qual elemento do seu aplicativo está recebendo ativamente entradas de um teclado, como um campo, uma caixa de seleção, um botão ou um link. Além dos eventos de teclado, o elemento em foco também recebe 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 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 volta 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 focáveis: eles são inseridos automaticamente na ordem de tabulação com base na posição deles no DOM. Esses elementos interativos também têm processamento de eventos de teclado integrado. Elementos como parágrafos e divs não são implicitamente focáveis porque os usuários geralmente não precisam interagir com eles.
Implementar uma ordem de tabulação lógica é uma parte importante para oferecer aos usuários uma experiência de navegação por teclado tranquila. Há duas ideias principais a serem consideradas ao avaliar e ajustar a ordem das guias:
- Organizar elementos no DOM em ordem lógica
- Definir corretamente a visibilidade do conteúdo fora da tela que não deve receber foco
Organizar elementos no DOM em ordem lógica
Para verificar se a ordem de tabulação do aplicativo é lógica, tente usar a tecla Tab na página. Em geral, o foco precisa seguir a ordem de leitura, movendo-se da esquerda para a direita e 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. Para mudar a disposição visual no seu site, mova o elemento para antes no DOM em vez de usar CSS para que ele apareça antes.
Exemplo:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
Tenha cuidado ao mudar a posição visual dos elementos usando CSS para evitar criar uma ordem de tabulação ilógica. Para corrigir a ordem ilógica das guias, movemos o botão flutuante "Kiwi" para depois de "Coconut" e removemos 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 devem estar na ordem de tabulação. Por exemplo, se você tiver uma navegação responsiva que abre em uma barra lateral ao clicar em um botão, o usuário não poderá focar na navegação enquanto ela estiver fechada.
Para evitar que um elemento interativo específico receba foco, atribua a ele uma das seguintes propriedades CSS:
display: nonevisibility: hidden
Para adicionar o elemento de volta à ordem de tabulação, por exemplo, quando a navegação está aberta, substitua essas propriedades CSS respectivamente 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 de tabulação lógica é essencial para tornar seu aplicativo acessível e utilizável. Como um bom hábito para verificar a ordem das guias, tente usar a tecla Tab no aplicativo antes de cada publicação.