Mudança de contexto previsível na entrada
O que a norma pede
Preencher um campo ou escolher uma opção não muda o contexto automaticamente, a menos que a pessoa seja avisada antes.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: inserir ou selecionar informações não provoca mudança de contexto.
- Outra forma: a pessoa é avisada desse comportamento antes de usar o componente.
- 3.2.2 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Use um botão para confirmar escolhas que mudam de página ou enviam dados. Se a mudança automática for inevitável, preveja um aviso antes do campo.
Seletor de idioma
Uma lista permite trocar o idioma do site.
Errado: Muda ao escolher
Na especificação
“Ao mudar a opção, recarregar o site no idioma.”
Com setas, a pessoa troca de idioma a cada opção.
Certo: Muda ao confirmar
Na especificação
Lista de idiomas + botão “Mudar idioma”.
A mudança acontece quando a pessoa decide.
Não navegue nem envie formulários no evento change dos campos, que em alguns navegadores dispara a cada seta pressionada numa lista. Confirme com um botão de envio.
Filtro por estado
Um select filtra a lista de unidades.
Errado: Navega no change
estado.addEventListener("change", () => { location.href = "/unidades?uf=" + estado.value; });Cada seta recarrega a página.
Certo: Confirma com botão
<form action="/unidades"> <label for="uf">Estado</label> <select id="uf" name="uf">…</select> <button>Filtrar</button> </form>A página só muda ao confirmar.
Prefira confirmação explícita no padrão de design e revise filtros e seletores que recarregam a página. Envios automáticos causam erros como mandar um formulário incompleto.
Formulário de inscrição
O formulário envia automaticamente ao preencher o último campo.
Errado: Envio automático
Situação
Preencher o CEP envia a inscrição.
Pessoas enviam sem revisar.
Certo: Envio explícito
Situação
Botão “Enviar inscrição” após revisão.
Menos erros e retrabalho.
Percorra as opções das listas com as setas e preencha os campos observando a página. Se ela mudar ou o formulário for enviado sem aviso prévio, registre o defeito.
Seletor de estado
Teste com setas no select.
Errado: Recarrega a cada opção
Seta ↓ → página recarrega com “Acre”
Foco volta ao início da página
Não dá para chegar ao estado desejado.
Certo: Muda só ao confirmar
Seta ↓ → “Acre”
Seta ↓ → “Alagoas”
Tab + Enter em “Filtrar” → lista atualizada
A pessoa escolhe com calma.
Quando a mudança automática for inevitável, escreva o aviso antes do campo e diga o que vai acontecer, como “A página muda ao escolher”. Sempre que puder, sugira ao time um botão de confirmação.
Seletor de ano do relatório
A escolha do ano recarrega o relatório.
Errado: Sem aviso
Na tela
Ano: [2025 ▾]
A pessoa é surpreendida.
Certo: Aviso antes
Na tela
“O relatório é atualizado assim que você escolhe o ano.” Ano: [2025 ▾]
A pessoa sabe o que esperar.