Ao enviar formulário com vários erros, mostre um resumo antes dos campos, conte os problemas e ofereça link para cada controle. Repita a mensagem junto ao campo, mantenha respostas válidas e mova foco de forma previsível.
Exemplo HTML
<div id="resumo-erros" tabindex="-1" aria-labelledby="titulo-erros">
<h2 id="titulo-erros">Revise 2 campos</h2>
<ul>
<li><a href="#email">Informe um email válido</a></li>
<li><a href="#cep">Informe um CEP com 8 dígitos</a></li>
</ul>
</div>
<label for="email">Email</label>
<input id="email" name="email" type="email" aria-invalid="true"
aria-describedby="erro-email">
<p id="erro-email">Informe um email válido.</p>
<label for="cep">CEP</label>
<input id="cep" name="cep" inputmode="numeric" aria-invalid="true"
aria-describedby="erro-cep">
<p id="erro-cep">Informe um CEP com 8 dígitos.</p>Após envio inválido, direcione foco ao resumo (ou, se não for focável, ao primeiro campo com erro). Não faça os dois em sequência. Cada link deve levar ao id real do campo. Ao corrigir, remova aria-invalid e a mensagem daquele campo, atualize o resumo e preserve respostas corretas. O servidor também precisa validar; validação apenas no navegador não protege dados.
Aviso e teste
Se o resumo for inserido sem recarregar a página, anuncie a atualização uma vez com região de status, se necessário. Não use leitura agressiva que repita todos os erros a cada tecla. Teste formulário vazio e com dois erros, foco, link, leitura de rótulo/erro, preservação de campos, teclado, zoom e celular. Confirme que erros antigos somem e erros do servidor são associados ao campo certo.
Consulte notificações de validação de formulário e validação de formulários da W3C WAI. Acesse landing pages.