Ajuda a inserir corretamente e corrigir erros diretamente no campo de informações.
Progresso da revisão
Compare as informações e a apresentação no contexto de uso.
Experimente a operação, altere o status e continue trabalhando.
Testar situações específicas ao iniciar, alterar e concluir uma tarefa.
O progresso é salvo automaticamente neste navegador.
ORIENTAÇÕES
Envie o formulário com uma célula ausente e edite-o usando o teclado. Mantenha o rótulo visível, descreva a solicitação antes de inseri-la e coloque o erro próximo o suficiente para saber exatamente quais campos precisam ser corrigidos.
EXEMPLOS
A caixa denominada “E-mail” e o erro “Digite o e-mail como nome@vidu.com”; O conteúdo recém-inserido é mantido para o usuário editar um caractere.
Distinguir a área de preenchimento do fundo e manter o texto e o cursor visíveis nos dois temas.
Testar foco, preenchimento automático e ampliação do texto: o contorno não deve cobrir o texto nem mudar bruscamente de tamanho.
Exemplo A borda do campo de e-mail fica mais forte com foco, sem alterar a altura da linha.
O rótulo permanece após a digitação; a orientação acrescenta formato e condições necessárias.
Preencher e reler o nome com leitor de tela: o rótulo e a orientação devem continuar corretamente associados.
Exemplo O rótulo Código do pedido tem abaixo a orientação Exemplo: DZ-2048.
Distinguir ícones ilustrativos de ações como mostrar a senha ou limpar a busca.
Usar Tab no campo e no botão auxiliar: a ação tem nome claro e não apaga dados sem intenção.
Exemplo A lupa é decorativa; Limpar busca recebe foco e tem rótulo.
Definir regras consistentes para vazio, preenchido, com foco, somente leitura, desativado e com erro.
Corrigir após um erro: a mensagem deve mudar no momento certo, sem perder os dados.
Exemplo Um código de verificação somente leitura continua copiável; o campo em envio mostra um estado de espera.
Adaptar o campo à densidade do contexto, mantendo texto e área de toque fáceis de usar.
Testar campos compactos em tabelas e maiores no celular: o texto não deve ser cortado verticalmente.
Exemplo A tabela administrativa usa filtros compactos; a tela de acesso usa campos mais altos.
Usar várias linhas quando o conteúdo precisar delas e deixar claros a rolagem e os limites.
Colar um texto longo e abrir o teclado: a posição de edição e o botão Enviar devem continuar visíveis.
Exemplo O campo de feedback cresce com o conteúdo até um limite e depois permite rolagem interna.
