Teclado

A principal forma de entrada de texto e, pra muita gente, a única forma de navegar uma interface inteira.

Hard

O que é

O teclado importa pra produto de dois jeitos. Como entrada de texto, ele molda os campos de formulário e a forma como a interface trata o que a pessoa digita. Como forma de navegação, ele é requisito de acessibilidade, porque tem gente que não usa ou não pode usar mouse.

A navegação por teclado é inegociável. O WCAG exige que tudo que funciona com mouse funcione também com teclado. Na prática, cada elemento interativo precisa ser alcançável com Tab, acionável com Enter ou espaço, e o foco visível precisa mostrar onde a pessoa está. Uma armadilha comum é a “caixa de foco” que prende dentro de um modal sem oferecer saída pelo teclado.

No celular, a coisa muda de figura, porque o teclado virtual ocupa metade da tela e pode esconder campo e mensagem de erro. Por isso vale usar o tipo certo de teclado por campo, como numérico pra CEP e e-mail pra e-mail, e ainda cuidar do autocorretor em campos sensíveis, como senha e código.

Em uma frase

Vamos percorrer o checkout só com Tab e Enter pra ver se algum botão fica inalcançável pelo teclado.

A pergunta que ele responde

Será que dá pra usar essa tela inteira sem mouse, só pelo teclado?

Quando usar

Ajuda ao desenhar formulário, navegação e qualquer elemento interativo, sempre conferindo se o caminho por teclado existe e funciona do começo ao fim.

Como não usar

O cuidado é não desenhar pensando só no mouse e no toque, esquecendo o foco visível, a ordem de tabulação e o tipo de teclado no mobile. Quando isso fica de fora, parte das pessoas simplesmente não consegue usar a interface.

Na prática

Pense num teste de acessibilidade em que a pessoa percorre todo o checkout usando só Tab e Enter. É exatamente nesse percurso que ela descobre um botão que o teclado não consegue alcançar.

Não confunda com

Vale separar teclado físico de teclado virtual. O virtual ocupa parte da tela, muda de layout conforme o contexto e cria problemas de espaço que o físico simplesmente não tem. São a mesma função de entrada, mas com restrições bem diferentes, e o desenho precisa levar isso em conta.

Em inglês

Keyboard

Pronúncia

n/a

Também chamado de

teclado físico, teclado virtual, navegação por teclado

Origem

n/a

Fonte

Saiba mais

W3C, WCAG quick reference sobre navegação por teclado