Input "search"

Métodos de Interação

O campo usa type="search" e apresenta um rótulo que explica o que será pesquisado.

Interação com mouse

1. Clicar no campo ou no rótulo associado coloca o foco no campo.
2. Selecionar, editar, copiar e colar segue o comportamento nativo do campo.

Interação com teclado

1. Tab move o foco para o campo; Shift + Tab retorna ao controle anterior.
2. Digitação insere texto; setas, Home, End e comandos de seleção e edição seguem a plataforma.
3. Enter segue a ação de envio definida para o formulário; o campo não cria uma nova linha.

Interação com gestos

1. Tocar no campo ou no rótulo permite editar com o teclado virtual.
2. A seleção e edição de texto seguem os gestos disponíveis na plataforma.

Interação com teclado (ou gestos) + leitor de telas

1. Ao navegar até o campo, o leitor apresenta seu rótulo e tipo, além de estados e instruções associados.
2. Erros são associados ao campo e explicam como corrigir a informação; o valor digitado é preservado.

Acionar e limpar a busca

1. Enter envia a pesquisa quando esse for o modo definido; o botão "Buscar", quando presente, também permite enviá-la.
2. O controle "Limpar busca", quando presente, esvazia o campo sem enviar o formulário e permite continuar a edição.
3. Comunicar a quantidade de resultados ou a ausência deles sem deslocar o foco inesperadamente.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)).

Cenário: Considerando que estou em uma página que contém Input "search"

Navegação por teclado

1. QUANDO uso a tecla Tab para mover o foco para o campo
2. O foco que VEJO é fortemente indicado visualmente
3. ENTÃO, quando digito, seleciono ou edito o conteúdo com os comandos nativos
4. VEJO que o valor do campo é atualizado
5. E, quando uso Tab ou Shift + Tab, VEJO que o foco segue a ordem da página, sem ficar preso no campo

Leitor de telas para desktop

1. QUANDO uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e uso a tecla Tab para mover o foco para o campo, acontece o seguinte:
   • OUÇO o rótulo e a finalidade do campo.
   • OUÇO que o componente é um campo de busca.
   • OUÇO a obrigatoriedade, as instruções e os erros associados, quando existirem.
2. ENTÃO, quando digito ou edito o conteúdo com os comandos nativos
3. OUÇO ou percebo que posso editar o campo e que seu valor foi atualizado.

Leitor de telas para dispositivos móveis

1. QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para focar no campo, acontece o seguinte:
   • OUÇO o rótulo e a finalidade do campo.
   • OUÇO que o componente é um campo de busca.
   • OUÇO a obrigatoriedade, as instruções e os erros associados, quando existirem.
2. ENTÃO, quando eu toco duas vezes ou uso o gesto adequado para ativar o campo e editar seu conteúdo
3. OUÇO ou percebo que posso editar o campo e que seu valor foi atualizado.

Validação da entrada

1. QUANDO uma entrada é rejeitada por uma regra de validação informada
2. VEJO uma mensagem associada ao campo que explica como corrigir a informação
3. E, quando navego até o campo com leitor de telas, OUÇO a indicação de erro e a orientação associada
4. ENTÃO, quando volto a editar, VEJO que o valor foi preservado para correção

Acionamento da busca

1. QUANDO informo um termo e aciono a busca conforme o modo definido
2. VEJO os resultados ou uma mensagem de ausência de resultados
3. E, quando uso leitor de telas, OUÇO ou percebo o retorno da busca sem deslocamento inesperado do foco

Pontos de atenção

1. Usar um rótulo persistente associado ao input. Placeholder é uma dica complementar e não substitui o rótulo.
2. Associar instruções e erros ao campo, por exemplo com aria-describedby, e marcar aria-invalid quando houver erro.
3. Informar a obrigatoriedade e usar required quando necessário. Não comunicar erros apenas por cor.
4. Manter foco visível e garantir contraste e área de interação adequados.
5. Definir se a busca ocorre ao enviar ou durante a digitação. Em busca dinâmica, preservar o foco e comunicar os resultados sem anunciar cada tecla; permitir limpar e tratar resultados vazios.

Referências

Documentação do campo

• MDN — input type="search" (link externo, abre em uma nova aba)

Design System

• Carbon — Search open_in_new (link externo, abre em uma nova aba) — Componente específico para entrada de termos de busca.
• USWDS — Search open_in_new (link externo, abre em uma nova aba) — Campo e botão para acionar uma busca.