A navegação por teclado, para além do uso com o leitor de tela

Joanna Voloski
5 min readJan 17, 2023

Quando falamos sobre acessibilidade e teclado, por vezes atrelamos esse modo de navegação ao uso do leitor de tela. Sim, pessoas com deficiência visual geralmente utilizam só o teclado para navegar pelo seu site, mas não só elas. Pessoas com deficiência motora, idosos, usuários sem muita familiaridade com a tecnologia ou mesmo uma limitação situacional, como um mouse sem pilhas, fazem com que qualquer um de nós possa depender do teclado para acessar informações.

E como essa navegação acontece?

Fotografia com vista superior do tampo de uma mesa de madeira, onde aparecem: o canto superior de um caderno aberto com folhas pautadas, na parte superior da fotografia há fones de ouvido branco e um teclado de computador com teclas claras entre branco e cinza, proximo ao caderno há uma xicara de café.

Primeiro vamos conhecer algumas teclas de atalho do teclado (no sistema windows) e para onde elas nos levam:

  • A tecla “tab” navega por todos os elementos acionáveis da tela, como botões, links, checkbox e outros, essa navegação acontece pela sequência dos elementos na página. Para voltar para o elemento anterior, aperte junto as teclas “shift” e “tab”;
  • Já a barra de espaço rola a página para o próximo conteúdo na página, juntos “shift” e barra de espaço, voltam para o conteúdo anterior. As teclas “PageUp” e “PageDown” têm a mesma função;
  • Está no meio ou fim da página e quer voltar para o começo? Use a tecla “home”. Se estiver no início da página e quiser ir direto para o fim, use a tecla “end”.
  • Para acionar um botão ou link, use o “enter”;
  • Já em um checkbox ou radio button, também use a barra de espaço, para selecionar ou limpar a seleção.
  • Dropdowns são abertos com o “enter” e fechados com o “esc”.

Foco visível

Agora que já conhecemos algumas teclas de atalho, não podemos esquecer de algo muito importante quando falamos sobre navegação por teclado: o foco visível. Navegando com o mouse, sabemos onde está o nosso foco pela seta de movimento, mas e na navegação por teclado, como é? Como saber qual item do menu estou clicando?

Para isso temos o foco visível, que nada mais é do que um feedback visual para que você se localize na página, sabendo onde está o foco da sua navegação. Ele aparece sempre nos elementos acionáveis, quando você navega utilizando as teclas “tab” e “shift tab”. Para exemplificar, trouxemos o foco visível da Amazon, em laranja, contrastando com o fundo do elemento e tornando visível onde o usuário está.

Recorte da tela inicial do site da Amazon Brasil, onde está destacado o foco visível que aparece quando navegamos por teclado, ele é um retangulo laranja e está sobre o link “Venda na Amazon”

Lembre-se, se a interface possui mais de uma cor de background, personalize para que o foco se adapte a cada uma delas ou o faça em duas cores, com um contorno interno e outro externo, como o exemplo do site das Americanas.

Recorte da tela inicial do site das Americanas, com destaque para o foco visível que aparece durante a navegação por teclado, este foco é um retangulo com contorno interno em preto e externo em branco, ele está situado sobre o link “informe seu cep”

Atalhos

Você já deve ter percebido que alguns elementos só podem ser acessados depois de muitos toques na tecla “tab”, o que pode ser chato e até cansativo para o usuário. Para melhorar essa experiência, podemos adicionar alguns atalhos que só serão visíveis na navegação por teclado.

Imagine-se realizando uma compra e tendo que navegar por todo cabeçalho do site, a cada página que você passar, são muitos “tabs”, né? A possibilidade de “Ir para o conteúdo principal” evita essa navegação repetitiva e permite agilidade na hora de visitar várias páginas no mesmo site, aqui representada pelo exemplo da Shoppe.

Recorte da tela inicial do site da Shopee, com destaque para o atalho de navegação por teclado “Ir para o menu principal”

Mas não se apegue a um único atalho, principalmente se suas páginas são repletas de assuntos diversos e conteúdo relevante, adicione âncoras a estas áreas e possibilite que o usuário navegue até onde lhe chame mais atenção.

Recorte da tela inicial do site do banco Barclays, com destaque para o atalho de navegação por teclado que está sobre o item “home” — site em inglês

Outros atalhos interessantes são aqueles que nos permitem pular conteúdos extensos, como este usado no site das Casas Bahia, neste exemplo há um botão que informa ao usuário que existem outros conteúdos em um submenu e lhe dá a possibilidade de abri-lo ou não, possibilitando que ele escolha por onde quer navegar.

Recorte da tela inicial do site das Casas Bahia, em destaque está o atalho de navegação por teclado “Abrir menu Compre por toda a loja”

A navegação por teclado deve ser pensada em todos os elementos da interface. Imagine o quão frustrante pode ser para o usuário conseguir entrar na sua conta bancária (a partir do uso do teclado) mas não conseguir ver o saldo da conta ou não finalizar uma compra após conseguir passar por toda a jornada porque um elemento, mesmo que pequeno, simplesmente não é acessível pelo teclado.

Encontre sempre alternativas para que essa navegação exista e que o usuário a perceba e entenda, como a barra de navegação destes slides, que permite que a navegação slide a slide através do uso da barra de espaço, possibilitando que o usuário escolha avançar ou voltar as imagens.

Recorte da tela inicial do site do Walmart, com destaque para o foco de navegação por teclado do elemento “slide”

WCAG e mais…

Para finalizar este texto, trazemos alguns critérios de sucesso que fazem parte da WCAG e que falam sobre o uso da navegação por teclado, mas não é só isso, ao projetar e realizar testes de usabilidade, adicione o teclado às tarefas realizadas.

Agora é a sua vez, projete para a navegação por teclado, mas também visite seus sites preferidos e verifique como está a navegação neles.

--

--