HTML moderno: estrutura, semântica e acessibilidade
Um formulário acessível começa no HTML nativo. Rótulos associados, tipos de entrada adequados e instruções claras melhoram a experiência para teclado, toque, preenchimento automático e tecnologias assistivas. JavaScript deve complementar, não substituir, essa base.
Todo campo precisa de nome acessível
Associe label e controle usando for e id, ou envolva o controle com o rótulo. Placeholder não substitui label: desaparece durante a digitação e pode ter baixo contraste.
<form action="/contato" method="post">n <label for="email">E-mail</label>n <input id="email" name="email" type="email" autocomplete="email" required>n <button type="submit">Enviar</button>n</form>Escolha tipos e autocomplete
Tipos como email, tel, date e number podem ativar teclados e validações adequadas. Nem todo valor numérico deve ser number: CEP, CPF e cartão são identificadores, não quantidades. Use tokens de autocomplete para ajudar o preenchimento.
Grupos, ajuda e erros
Agrupe radios ou checkboxes relacionados com fieldset e legend. Instruções e mensagens de erro devem identificar o problema e como corrigi-lo, estar associadas ao campo e não depender apenas de cor. Leve o foco ao resumo de erros quando o envio falhar.
Checklist de qualidade
- É possível concluir o formulário apenas com teclado?
- Cada campo tem label persistente e instruções suficientes?
- Erros são específicos, associados e anunciados?
Pratique agora
Crie um cadastro com nome, e-mail e preferência de contato. Teste Tab, preenchimento automático e envio com campos vazios.
