Usando uma página pelo teclado

Desconecte o mouse e aperte Tab: cada link, botão e campo deve se destacar por vez, na ordem em que você lê a página.

Quem usa o teclado

Muita gente nunca encosta num mouse. Algumas pessoas não conseguem segurá-lo com firmeza; outras usam um acionador, uma ponteira de boca ou um reconhecimento de voz que envia teclas; quem usa leitor de tela também se move quase sempre pelo teclado. O critério de sucesso 2.1.1 Teclado da WCAG 2.2, de nível A, diz que tudo na página precisa funcionar pelo teclado. O critério 2.1.2 Sem Bloqueio do Teclado acrescenta que, se o foco pode entrar numa parte da página, ele precisa poder sair de novo pelo teclado.

Use elementos que já funcionam

Links com href, button, input, select e textarea já recebem foco de fábrica e respondem às teclas certas. Uma div com um tratador de clique não: não dá para chegar a ela com Tab, Enter não faz nada e um leitor de tela não a anuncia como botão. O conselho do MDN é direto. Não use tabindex para fazer uma div agir como botão; use o elemento button, que já vem com a função e o comportamento de teclado embutidos.

Ordem do foco e tabindex

A ordem do Tab segue a ordem dos elementos no código-fonte HTML. O critério 2.4.3 Ordem do Foco pede que essa ordem preserve o sentido e o uso da página, então a correção mais simples para uma ordem estranha é reorganizar o HTML. O MDN lista três tipos de valor de tabindex. Zero põe o elemento na ordem normal. Um valor negativo, em geral -1, tira o elemento da ordem do Tab, mas ainda deixa um script chamar focus() nele, o que é útil para uma caixa de diálogo ou uma mensagem de erro. Um valor positivo força o elemento à frente de todos os outros, e o MDN recomenda usar só 0 e -1, porque valores positivos deixam a ordem difícil de acompanhar.

Vendo onde você está

Quem usa teclado precisa ver qual elemento tem o foco. O critério 2.4.7 Foco Visível, de nível AA, pede um indicador de foco visível, então uma regra de folha de estilo como outline: none sem nada no lugar é uma falha. A WCAG 2.2 acrescentou dois critérios relacionados. O 2.4.11 Foco Não Obscurecido (Mínimo), de nível AA, diz que o item com foco não pode ficar completamente escondido atrás de algo que o autor acrescentou, como um rodapé fixo ou um aviso de cookies. O 2.5.8 Tamanho do Alvo (Mínimo), também AA, pede que aquilo em que se clica ou toca tenha pelo menos 24 por 24 pixels CSS, ou espaço suficiente em volta.

Mais um padrão ajuda muito: o link para pular (skip link). Um site com um menu comprido obriga quem usa teclado a apertar Tab por todos os itens do menu em todas as páginas. Um link posto em primeiro lugar na página, apontando para o conteúdo principal, deixa a pessoa pular tudo isso com uma tecla. Ele pode ficar visualmente escondido até receber o foco.

Testar leva dois minutos. Clique na barra de endereço e depois aperte Tab várias vezes pela página inteira. Confira se dá para chegar a todos os controles, se a ordem combina com a ordem de leitura, se você sempre enxerga onde está o foco e se Enter e Espaço fazem o que um clique do mouse faria. Depois aperte Shift+Tab para voltar. Qualquer controle a que você não consegue chegar, ou qualquer lugar em que o foco some, é um bug.