Estado de foco sexy e acessível na navegação por teclado

Descomplicando Acessibilidade, Design & Front-end

A capa do artigo mostra uma arte sobre fundo escuro que mostra uma tecla TAB do teclado em amarelo.

Mas que diabos é navegação por teclado?

O teclado serve como um método de navegação alternativa ao mouse e pode ser benéfico e até essencial para alguns grupos de pessoas. Existem dois principais grupos de pessoas que precisam ser levados em consideração:

  1. Pessoas com algum nível e tipo de redução de mobilidade nas mãos, seja por tremores, paralisias, dificuldade de movimentação e outros, derivados de doenças ou deficiências, acham mais fácil navegar por teclado do que usar o mouse, que requer uma precisão de movimentos.

Como funciona

A navegação com teclado é feita por meio da tecla TAB, que irá navegar pulando de elemento em elemento funcional, e as setas direcionais ajudarão a ir e voltar, assim como entrar em opções dentro de um dropdown. Você pode testar esse tipo de navegação a qualquer momento enquanto estiver acessando um site no computador.

Padrão de foco do navegador

Pessoas que dependem do teclado para navegar e o utilizam com o auxílio da visão — isso é, desconsiderando os usos com leitor de tela — dependem de pistas visuais para saber por onde está navegando.

Um link, "saiba mais", está recebendo foco via teclado, sem customização, mostrando o outline azul e branco que se forma em volta.
Um link, "saiba mais", está recebendo foco via teclado, sem customização, mostrando o outline azul e branco que se forma em volta.
Foco de teclado em um link sem customização

Mas então eu preciso usar o famigerado outline azul?

A borda azul padrão pode muitas vezes não combinar com a marca e, por isso, pode destoar muito dos padrões do guia de estilo. A boa notícia, porém, é que existe jeitinho pra tudo.

Como tornar funcionalidades navegáveis pelo teclado

Antes de tudo, precisamos garantir que todos os elementos funcionais sejam navegáveis. Para isso, precisamos incluir o tabindex, que garantirá o foco. Alguns elementos são naturalmente navegáveis, como os de formulário: <button>, <input> etc. Veja um exemplo aplicado a um link.

Código HTML de um link com o atributo tabindex

Tudo pode ficar lindo com CSS

O outline não é tão flexível pra ser customizado, mas é possível escondê-lo com outline: none; e usar pseudo elementos para simular esse estado.

Exemplo

Primeiro, criamos o botão com todas as suas definições de tamanho e cores e removemos o outline no estado de foco. Não esqueça de aplicar o position: relative; para que o pseudo-elemento tenha onde se ancorar.

Exemplo de customização em código
3 exemplos de botões "saiba mais" em amarelo são mostrados em diferentes estados: padrão, hover e foco.
3 exemplos de botões "saiba mais" em amarelo são mostrados em diferentes estados: padrão, hover e foco.

Et voilà!

Esse é apenas um exemplo feito para ilustrar a explicação, mas você pode brincar a vontade com animações e efeitos de transição — só não esqueça de permitir que os usuários desliguem esses efeitos caso queiram, pois pode causar tonteiras se a pessoa tiver pré-disposição a isso.

Product Designer, Web Accessibility Owner at Descomplica and Writer hobbyist.

Product Designer, Web Accessibility Owner at Descomplica and Writer hobbyist.