Uma pessoa chega ao checkout do seu site, tenta avançar entre os campos usando apenas a tecla Tab e, em algum ponto, perde o rastro de onde está na página. Sem indicação visual de foco e sem opção de sair de um menu que prendeu o teclado, ela fecha a aba. Essa cena se repete todos os dias em sites sem navegação por teclado, o recurso que permite usar um site inteiro sem depender do mouse, indispensável para pessoas cegas, com deficiência motora, baixa visão ou impedimentos temporários.
Sem esse suporte, parte do público simplesmente não consegue concluir a compra ou preencher o formulário, e o resultado direto é risco para a conversão. Há também prejuízo para a imagem da marca e menor chance de o site ser indicado a terceiros.
Um plugin de acessibilidade bem implementado resolve boa parte desses pontos de fricção, mas antes de chegar lá vale entender onde e por que a navegação por teclado costuma falhar.
A seguir, você confere os critérios técnicos que tornam um site navegável por teclado, os erros mais comuns que travam essa navegação e como testar tudo isso no seu site, sem depender de nenhuma ferramenta paga.
Continue a leitura!
A navegação por teclado é um recurso de acessibilidade web. Como o próprio nome já diz, a pessoa usuária pode utilizar apenas o teclado e a tecla Tab para avançar entre elementos interativos. A tecla Enter serve para selecionar esses elementos.
Há uma diversidade de pessoas que necessitam da navegação por teclado. Afinal, em função do contexto, o uso do teclado pode ser mais produtivo do que o mouse. Uma boa experiência digital se adequa às preferências e necessidades do público.
Pessoas com deficiência visual ou motora dependem dessa solução em acessibilidade para interagir elementos dos sites. A Pesquisa Nacional de Saúde (PNS) de 2019, do IBGE, apresentou que há 6,978 milhões de pessoas com deficiência visual em terras brasileiras com 2 ou mais anos de idade.
Além disso, o estudo apontou um número de 5,5 milhões de pessoas com mais de 2 anos de idade que tinham deficiência nos membros superiores.
Imagine seu negócio fornecendo todos os recursos necessários para esse público todo comprar suas soluções. Isso significa bem mais do que conversão: envolve um respeito estratégico com os clientes.
Pessoas com braços ou dedos quebrados são exemplos de perfis que também demandam dessa ferramenta. São perfis de clientes com impedimentos temporários. Há, ainda, impedimentos situacionais em que o contexto exige essa navegação como um mouse quebrado.
Vale sempre lembrar: um site navegável deve obedecer aos princípios da WCAG (Web Content Accessibility Guidelines ou Diretrizes de Acessibilidade para Conteúdo da Web).
O princípio operável, por exemplo, exige que os elementos de navegação e interface sejam operáveis por diferentes meios, como o teclado. Acompanhe os principais critérios abaixo.
A pessoa usuária precisa saber se localizar na página enquanto navega na página com a tecla Tab. Portanto, uma alternativa visual forte deve ser criada cada vez que o contorno de foco padrão for removido.
O CSS (Cascading Style Sheets, ou Folhas de Estilo em Cascata) pode ser usado para destacar o elemento focado com cores de alto contraste ou bordas espessas.
Já a ordem de tabulação lógica (tab order) diz respeito a sequência dos elementos interativos navegados pela pessoa usuária com a tecla Tab. Podem ser links, botões e campos de formulários.
Essa ordem deve seguir o fluxo visual e de leitura de tela para que o público usuário sempre tenha uma boa experiência.
O skip link (link de salto) é um recurso que permite a pessoa usuária pular blocos repetitivos de conteúdo. Isso acontece quando a pessoa usuária, por exemplo, quer acessar diretamente o conteúdo principal da página pulando o menu de navegação e o cabeçalho.
É um aspecto importante da acessibilidade digital porque evita a necessidade de pressionar Tab várias vezes em todas as páginas para acessar o menu global. O skip link atende ao critério de sucesso 2.4.1 (Bypass Blocks) da WCAG.
Os erros na navegação são provocados por sites mal estruturados. O resultado disso é um mau funcionamento. Alguns erros mais comuns são:
Componentes customizados sem foco programático são elementos de interface construídos do zero, geralmente com <div> ou <span>, sem os atributos que avisam ao navegador que ali existe algo interativo.
O resultado é que quem navega só com o teclado nunca chega até eles: ao pressionar Tab, o navegador simplesmente pula o componente, como se ele não existisse.
Isso penaliza diretamente pessoas com deficiência visual ou motora e qualquer pessoa que dependa de leitor de tela, já que quem usa leitor de tela não enxerga o mouse e depende do teclado para se mover pelos sites.
A correção passa por adicionar o atributo tabindex com valor “0”, o papel semântico (role) correto e os eventos de teclado equivalentes ao clique do mouse, algo que a seção sobre como testar o site ajuda a identificar.
A armadilha de teclado em modais e menus ocorre quando o foco fica preso dentro de uma janela modal ou de um menu suspenso sem que a pessoa usuária consiga sair usando apenas o teclado.
Isso costuma acontecer quando o componente foi programado para capturar o foco, mas não recebeu uma rota de saída, como a tecla Esc ou o retorno automático de foco ao elemento que abriu o menu.
O critério WCAG 2.1.2 (Sem Armadilha de Teclado) exige justamente o oposto disso: se o foco pode entrar em um componente, ele também precisa poder sair usando apenas comandos padrão de teclado, ou a pessoa usuária precisa ser avisada de como fazer isso.
Um modal ou menu bem implementado contém o foco de propósito, mas sempre com saída garantida:
Quando qualquer um desses pontos falha, como em um iframe mal configurado ou em um menu que não responde ao Esc, o que era uma técnica de contenção de foco vira uma armadilha de teclado de verdade, e a pessoa usuária fica presa na página.
O teste para verificar se a navegação por teclado está acessível exige que a pessoa usuária deixe o mouse de lado. Após isso, ela deve navegar usando teclas de atalho como Tab, Shift + Tab, Enter e a barra de espaço. Em maiores detalhes, o teste obedece a essas etapas:
Um plugin de acessibilidade torna a navegação mais fluida para quem depende do teclado, com a adição de teclados dedicados, realce do foco visual dos elementos interativos e criação de saltos diretos para o conteúdo do site. As principais melhorias são assim citadas:
Esses três ajustes (contorno de foco, atalhos de teclado e skip links) são exatamente o que um plugin de acessibilidade resolve de forma automática, sem que sua equipe precise reescrever o código do site inteiro.
O Plugin Perto entrega isso pronto: teste gratuitamente e descubra em poucos minutos como ele se comporta na navegação por teclado do seu próprio site.
A seguir, o FAQ detalha todos os conceitos principais do texto.
Navegação por teclado é a possibilidade de usar um site sem mouse, utilizando teclas como Tab, Shift + Tab, Enter, Espaço e setas para navegar e interagir com elementos da página.
Sim. A navegação por teclado é um requisito importante de acessibilidade, pois permite que pessoas que não usam mouse naveguem e interajam com sites e aplicações.
Sim. A Lei Brasileira de Inclusão (LBI) estabelece requisitos de acessibilidade em sites mantidos por empresas e órgãos públicos, e a acessibilidade por teclado faz parte das boas práticas e critérios técnicos das WCAG.
Entenda o que é navegação por teclado, por que ela importa e como testar seu site.
Ler artigo
Um site acessível para pessoas com daltonismo utiliza contraste adequado, elementos visuais que...
Ler artigo
Uma informação que chega a todos é imprescindível para a cidadania digital.
Ler artigo