Mostre posição e etapa em texto
Um indicador percentual sozinho não informa o que a etapa pede nem se os dados foram preservados. Apresente “Etapa 2 de 4 — Entrega”, marque a etapa atual programaticamente e atualize a informação quando a pessoa avançar ou voltar.
<ol aria-label="Etapas do formulário">
<li>Contato</li>
<li aria-current="step">Entrega</li>
<li>Pagamento</li>
<li>Revisão</li>
</ol>
<p id="progresso" role="status" aria-live="polite" aria-atomic="true">
Etapa 2 de 4: Entrega
</p>A lista informa o percurso completo; o texto de status anuncia a mudança uma vez. Se não for apropriado anunciar de imediato, a etapa nova ainda deve ter um título claro e receber foco após a navegação.
Atualize o fluxo sem perder dados
- Agrupe campos por uma tarefa, dê a cada etapa um título e preserve os valores ao voltar.
- Ao selecionar “Continuar”, valide somente o conjunto visível. Se houver erro, não avance: mostre o resumo, mova o foco ao resumo ou ao primeiro campo inválido e associe mensagens aos controles.
- Se a etapa estiver válida, mostre o próximo
fieldset, atualizearia-current="step", o texto “Etapa n de total” e a barra visual, se existir. - Mova o foco para o título da etapa nova (
tabindex="-1") para comunicar a mudança e permitir começar a leitura daquele contexto. - Em “Voltar”, preserve valores e atualize indicador/foco da mesma forma. Não marque o formulário como concluído até o servidor confirmar o envio.
- Se houver salvamento automático, explique quais dados são guardados, em qual dispositivo/conta e por quanto tempo; permita retomar ou limpar.
Teste o percurso inteiro
Use apenas teclado e depois leitor de tela: avanço válido, campo inválido, volta, correção, retorno, recarga, falha do servidor e sucesso. Verifique se a pessoa ouve a nova etapa sem anúncio duplicado, se o indicador visual também tem texto, se os dados permanecem e se erros não ficam em etapas ocultas. Repita em viewport pequeno e zoom aumentado.
Uma barra visual complementar deve ter valor coerente, por exemplo <progress value="2" max="4">2 de 4</progress>, mas ainda mantenha a indicação escrita e o nome acessível.