Um formulário gerado por IA precisa de revisão no navegador antes de receber clientes. Confira se cada campo tem um nome compreensível, se as instruções continuam disponíveis depois da digitação e se os erros explicam como corrigir a informação. A aparência da tela, sozinha, não mostra o que uma pessoa que usa leitor de tela vai encontrar.
Use a IA para preparar uma primeira versão e localizar problemas no código. Depois percorra o formulário pelo teclado, escute a apresentação dos campos e provoque erros com dados fictícios. Este roteiro trata da acessibilidade de formulários web, especialmente rótulos, grupos e mensagens. Ele não é uma auditoria completa de conformidade.
Resumo rápido
- Rótulo identifica o campo; instrução explica o preenchimento; erro informa a correção.
- Texto de exemplo dentro do campo não substitui um rótulo persistente.
- Associe o texto ao controle no HTML, além de aproximá-los visualmente.
- Teste também grupos de opções, envio inválido e confirmação de sucesso.
- Peça correções pequenas à IA e repita o mesmo percurso após cada mudança.
1. Separe rótulo, exemplo e mensagem de erro
Imagine um campo com o texto cinza “Seu telefone”. Depois que alguém digita, essa pista desaparece. Se há outros campos parecidos, a pessoa pode perder a referência. O rótulo deve continuar dizendo o que o campo recebe; um exemplo pode complementar a explicação.
O tutorial de rótulos da W3C recomenda associar controles e textos identificadores. Em HTML, um caminho comum usa label com for correspondente ao id do campo. Essa relação não nasce apenas porque duas caixas estão próximas na tela.
| Elemento | Pergunta que responde | Exemplo |
|---|---|---|
| Rótulo | O que devo informar? | Telefone para retorno |
| Instrução | Como devo preencher? | Inclua o DDD |
| Exemplo | Como se parece um valor possível? | Exemplo fictício: 11 90000-0000 |
| Erro | O que preciso corrigir? | Informe o DDD com dois dígitos |
| Confirmação | A ação terminou? | Solicitação recebida |
Ao revisar uma tela, escreva essas cinco funções em uma folha. Se o mesmo texto tenta cumprir todas, divida a informação. “Inválido”, por exemplo, informa que existe um problema, mas deixa a correção em aberto. “Obrigatório” isolado não revela qual dado faltou.
Também diferencie o nome do campo do nome interno usado pelo sistema. Um identificador como lead_phone_02 pode servir ao banco de dados; a pessoa precisa ouvir “Telefone para retorno”. Peça à IA que preserve os identificadores técnicos necessários à integração enquanto melhora o texto apresentado.
2. Peça à IA uma revisão com evidências no código
Forneça uma cópia reduzida do formulário, usando dados fictícios e sem credenciais. Inclua o trecho que cria os campos, as mensagens e os botões. Quando a aplicação monta partes da tela por script, o HTML inicial pode não representar o resultado final; explique isso no pedido.
Revise este formulário para rótulos, instruções e mensagens.
Para cada problema, indique:
1. campo ou grupo afetado;
2. trecho de código que sustenta o diagnóstico;
3. dificuldade possível para quem usa leitor de tela;
4. correção mínima proposta;
5. teste manual para confirmar.
Não declare conformidade completa. Não altere nomes enviados à API.Esse formato produz uma lista que o responsável consegue conferir. Se a IA disser que “falta acessibilidade” sem mostrar o elemento, peça o trecho. Uma correção precisa preservar regras do negócio, como quais campos são opcionais e quais formatos são aceitos.
Separe a revisão em etapas: primeiro nomes, depois instruções, depois feedback. Um pedido para “refazer tudo” pode trocar a biblioteca de componentes, quebrar validações ou inventar campos. O guia de engenharia de prompts ajuda a formular restrições e exemplos; aqui, o resultado esperado deve ser observável na interface.
Quando o fornecedor do formulário controla o código, reúna evidências para um chamado: campo afetado, navegador, percurso e mensagem ouvida. A IA pode organizar o relato, mas a solução depende das possibilidades da plataforma. Evite inserir código improvisado em produção para contornar uma limitação ainda não compreendida.
3. Confira associações e grupos de opções
Comece pelos campos simples. Clique no rótulo e observe o comportamento; depois navegue com Tab e escute o nome anunciado. O primeiro teste ajuda a encontrar associações ausentes, mas não substitui o segundo. Verifique se o texto ouvido corresponde à função visível.
<label for="telefone">Telefone para retorno</label>
<p id="ajuda-telefone">Inclua o DDD.</p>
<input id="telefone" name="telefone"
type="tel" aria-describedby="ajuda-telefone">O exemplo ilustra a separação entre nome e ajuda. Ele não implementa máscara, validação ou o tratamento completo de erros. A equipe deve conferir como esses recursos funcionam no componente real, inclusive depois que o usuário altera uma resposta.
Grupos exigem atenção própria. As opções “Manhã” e “Tarde” ficam ambíguas quando a pergunta “Qual período prefere?” não acompanha o conjunto. A orientação da W3C sobre agrupamento apresenta recursos como fieldset e legend. O objetivo é manter a pergunta e suas opções relacionadas na apresentação assistiva.
Faça uma pequena tabela de conferência com nome do grupo, opções e possibilidade de escolha. Em um grupo de seleção única, deve ficar claro qual resposta está marcada. Em múltipla escolha, explique quando várias opções são permitidas. Não peça à IA que deduza a regra apenas pelo formato dos botões.
Confira ainda campos repetidos. “Nome” em dois blocos pode significar participante e responsável. A organização visual por cartões precisa ter equivalente compreensível na navegação. Registre o contexto que falta antes de renomear todos os campos, para não criar rótulos longos e repetitivos sem necessidade.
4. Teste instruções, erros e confirmação
Instruções devem aparecer antes de a pessoa precisar delas. O tutorial da W3C sobre instruções aborda explicações gerais e orientações ligadas aos campos. Use esse princípio para revisar palavras como “opcional”, formato esperado e condições especiais.
Monte três percursos com informações fictícias: envio vazio, envio com formato incorreto e envio válido. No primeiro, observe se a interface identifica o que falta. No segundo, confira se a orientação resolve o problema real. No terceiro, confirme se há um aviso perceptível de conclusão.
As orientações de notificações da W3C ajudam a organizar feedback claro. Uma borda vermelha isolada deixa a explicação dependente da cor. Uma mensagem genérica no topo pode obrigar a procurar o campo problemático. Avalie a combinação de texto, relação com o campo e percurso de correção.
Durante o teste, mantenha o leitor de tela ligado e anote exatamente o que acontece após Enviar. O foco muda? A pessoa recebe alguma indicação de erro? É possível voltar ao campo certo? A informação digitada permanece disponível? Essas observações valem mais que uma promessa da IA de que o código “está acessível”.
Confira erros depois de corrigidos. A mensagem antiga não deve continuar sugerindo uma falha já resolvida. Teste também uma resposta inválida do servidor, usando ambiente de testes, para que uma falha de conexão não pareça confirmação de cadastro. O texto precisa refletir o estado que o sistema realmente conhece.
Exemplo: oficina cultural em Recife
Considere uma associação fictícia que abre inscrições para uma oficina de fotografia em Recife. A equipe usa IA para montar a página e recebe um formulário com nome, contato, faixa de horário e um campo opcional sobre necessidades de participação. Nenhuma inscrição real é usada neste exemplo.
Na revisão, a pergunta do horário aparece como título visual separado das opções. O campo de contato tem apenas um exemplo dentro da caixa. Ao enviar sem preencher, a tela mostra “Confira os dados” e destaca duas bordas. A equipe registra cada ocorrência e pede correções individuais.
- Mantém “Contato para retorno” como rótulo e acrescenta uma instrução indicando o tipo de contato aceito.
- Associa “Horário de preferência” ao conjunto de opções.
- Explica por escrito quais campos são obrigatórios.
- Troca a mensagem genérica por indicação específica do dado ausente.
- Faz novo envio fictício pelo teclado e escuta o retorno do leitor de tela.
O campo sobre necessidades de participação recebe uma explicação curta de finalidade e caráter opcional. A equipe evita solicitar detalhes desnecessários. Decisões sobre dados pessoais exigem avaliação própria; o guia de cuidados com dados na implantação de IA oferece um ponto de partida para essa discussão.
O responsável guarda o formulário anterior, a alteração e o resultado do teste. Isso permite verificar se uma atualização futura removeu o rótulo ou alterou o feedback. O exemplo descreve um procedimento editorial e técnico, sem prometer aumento de inscrições ou um percentual de acessibilidade.
Erros comuns
- Aprovar pela captura de tela. A imagem mostra aparência, mas não confirma associações no código nem anúncios do leitor.
- Tratar placeholder como rótulo. A referência pode desaparecer quando o campo recebe conteúdo.
- Acrescentar ARIA em todos os elementos. Atributos sem objetivo claro podem criar nomes duplicados ou contraditórios; prefira entender o componente e sua semântica.
- Testar apenas o envio válido. As barreiras podem surgir na recuperação de erros.
- Corrigir o texto e esquecer a ligação. Uma instrução clara precisa estar disponível no contexto de preenchimento.
- Declarar conformidade após uma revisão curta. Rótulos e mensagens são parte de uma avaliação mais ampla.
Após mudanças no tema, no construtor ou na biblioteca do formulário, repita os percursos registrados. Para uma equipe pequena, um roteiro estável facilita comparar versões. Acrescente testes quando encontrar falhas novas, preservando os casos anteriores que continuam relevantes.
Perguntas frequentes
A IA consegue certificar a acessibilidade do formulário?
Uma resposta automática não substitui uma avaliação. Ela pode apontar problemas e sugerir código, mas a equipe precisa verificar o funcionamento real. Uma auditoria completa considera critérios e percursos além deste roteiro.
Preciso usar uma ferramenta específica de leitor de tela?
Escolha uma combinação disponível de leitor, navegador e sistema, registre qual usou e aprenda os comandos básicos. Para ampliar cobertura, inclua outras combinações e pessoas que usam tecnologia assistiva regularmente.
Um formulário curto também precisa de rótulos?
Sim. Mesmo um único campo deve ter propósito identificável. A simplicidade reduz o trabalho de revisão, mas não cria automaticamente uma relação entre a caixa de entrada e seu nome.
Posso enviar respostas de clientes para a IA revisar?
Para esse trabalho, normalmente bastam código e dados fictícios. Use-os para reproduzir erros sem expor inscrições. Se um problema depender de informação real, defina antes o acesso e o tratamento adequados.
Como saber que a correção funcionou?
Repita o caso que falhou e registre nome anunciado, instrução disponível e forma de corrigir. Confira também um envio válido. A correção deve resolver a dificuldade observada sem quebrar a conclusão da tarefa.
