Quando um campo aceita formatos diferentes, diga o esperado antes de a pessoa preenchê-lo e mantenha o exemplo visível enquanto ela digita. Rótulo, instrução e validação devem concordar; um placeholder isolado desaparece e não substitui a instrução acessível.
Defina e explique os formatos
- Data brasileira digitada: rotule “Data de nascimento (DD/MM/AAAA)” e mostre
Exemplo: 05/11/1990. Diga se a data precisa ser passada/futura e se o campo permite barras ou outros separadores. - Data com seletor nativo: para
<input type="date">, explique que a pessoa pode escolher no calendário. O formato visual varia por navegador/localidade, enquanto o valor enviado pelo controle é normalizado pelo HTML; não prometa que aparecerá sempre comoDD/MM/AAAA. - Telefone do Brasil: informe se aceita celular e fixo, DDD e código do país. Exemplo explícito:
+55 (61) 91234-5678. Se o serviço também atende fora do Brasil, permita código internacional ou ofereça seletor de país. - Se uma máscara for necessária, permita colar o número e remover espaços/parênteses/hífens sem alterar dígitos. Valide no servidor e explique o erro em linguagem simples, com exemplo aceito.
Associe as instruções ao campo
<label for="data">Data do serviço (DD/MM/AAAA)</label>
<input id="data" name="data" type="text"
inputmode="numeric" autocomplete="off"
aria-describedby="data-ajuda">
<p id="data-ajuda">Exemplo: 05/11/2026. Informe dia, mês e ano.</p>
<label for="telefone">Telefone com DDD</label>
<input id="telefone" name="telefone" type="tel"
autocomplete="tel" aria-describedby="telefone-ajuda">
<p id="telefone-ajuda">Exemplo: +55 (61) 91234-5678. Aceitamos espaços e parênteses.</p>O exemplo mostra datas digitadas como texto para deixar o padrão explícito. Se optar por type="date", mantenha uma instrução compatível com o seletor e teste como o navegador informa a data. Para telefone, type="tel" abre um teclado apropriado em muitos celulares, mas não valida sozinho o número.
Valide a experiência
- Teste um dado válido, outro inválido e um colado com sinais/prefixo; confirme o que o servidor aceita e armazena.
- Use teclado e leitor de tela para conferir se o rótulo e a instrução são anunciados juntos; verifique que a ajuda não some após preencher.
- Teste em celular com diferentes localizações. Se aceitar vários padrões, informe os exemplos em vez de rejeitar números válidos por uma expressão regular estreita.
- Em erro, diga qual parte precisa de ajuste e preserve o valor digitado. Não limpe o campo sem necessidade.
Não use máscaras para esconder a regra e não mostre formatos internacionais misturados sem explicar qual código de país é obrigatório. Minimize a coleta de dados e limite seu uso à finalidade declarada.
Fonte: Instruções em formulários — W3C WAI. Consulte controles e formulários.