Um formulário acessível deixa claro o que cada campo pede, quais dados são obrigatórios e como concluir a tarefa. Isso ajuda pessoas que navegam por teclado, usam leitores de tela ou precisam de instruções mais diretas — e reduz dúvidas para qualquer visitante. Se estiver desenvolvendo uma página estática, veja também o guia de estrutura inicial e publicação de um site em HTML.
Dê um rótulo visível para cada campo
Use um elemento <label> associado ao identificador do controle. O texto do rótulo deve indicar a informação esperada; um placeholder que desaparece quando a pessoa começa a digitar não substitui esse rótulo.
<label for="email">Email para receber o retorno</label>
<input id="email" name="email" type="email" autocomplete="email" required>Prefira rótulos próximos e persistentes. Use type="email", type="tel" ou outro tipo apropriado quando isso oferecer teclado e validação úteis no aparelho. O tutorial de formulários da W3C WAI recomenda associar cada controle à sua identificação programática, geralmente com <label>.
Agrupe opções relacionadas
Quando a pessoa precisa escolher uma opção entre várias, agrupe o conjunto com <fieldset> e dê um título com <legend>. Não dependa somente de um título visual sem ligação semântica.
<fieldset>
<legend>Como prefere receber o retorno?</legend>
<label><input type="radio" name="retorno" value="email"> Email</label>
<label><input type="radio" name="retorno" value="telefone"> Telefone</label>
</fieldset>Peça apenas os dados necessários para responder ou concluir a tarefa. Para um pedido de orçamento, consulte também o guia sobre quais informações pedir e como receber a solicitação.
Escreva instruções e exigências antes do envio
Explique formatos esperados perto do campo — por exemplo, se um telefone deve incluir DDD. Indique os campos obrigatórios com texto, não apenas com cor ou asterisco sem explicação. Se usar uma nota geral, associe-a ao formulário e mantenha a legenda visível.
Faça a sequência com a tecla Tab e confira se o foco aparece, se os rótulos são anunciados e se todas as opções podem ser escolhidas sem mouse. A ordem deve acompanhar o fluxo visual e lógico do formulário.
Teste o envio e a resposta
Envie um cenário válido e outro inválido. Confira se o sistema mostra confirmação de recebimento e se a pessoa consegue corrigir um campo sem perder as demais respostas. Mensagens de erro e sucesso precisam ser explícitas e acessíveis; o guia como mostrar erros e confirmar envios detalha esse estado.
Revisão rápida
- Cada campo tem rótulo persistente e associado ao controle.
- Grupos de opções têm um título comum programático.
- Instruções explicam formato, obrigatoriedade e consequências.
- A navegação por teclado alcança controles e botão de envio.
- O teste confirma tanto recebimento quanto correção de erros.
Este roteiro se baseia nos tutoriais e critérios da W3C WAI para formulários. Ele não certifica conformidade integral; a revisão deve considerar a implementação, o conteúdo e as tecnologias assistivas usadas pelos visitantes.