Agentes de IA e acessibilidade na geração de UI: projetando para todos

O elefante na sala da geração de UI por IA

Pede pro Claude gerar um formulário. Ele vai entregar inputs sem label associada, botão sem texto acessível, e imagens sem alt. Não por maldade — por omissão. No treinamento, a maioria dos exemplos de código ignora acessibilidade. A IA reproduz o que viu.

Isso me incomoda especialmente porque acessibilidade é exatamente o tipo de coisa que IA deveria ser boa. São regras claras: contraste mínimo 4.5:1, labels associadas a inputs, hierarquia de headings sem pular níveis, landmarks no HTML. Regras mecânicas. Perfeitas pra automação. E mesmo assim a maioria dos outputs de IA falha nisso.

Como resolver (de verdade)

Colocar nos prompts não basta. Eu já testei. “Garanta acessibilidade WCAG AA” no prompt ajuda — mas a IA esquece nos detalhes. O alt fica genérico (“imagem decorativa” pra tudo), o foco fica fora de ordem, a navegação por teclado quebra.

O que funciona é constraint no design system. Se o agente só tem acesso a componentes que já são acessíveis — botões com estados de foco visíveis, inputs com labels obrigatórias, cores que já passam contraste — a UI gerada herda a acessibilidade. É o approach do Impeccable com o /audit: verificar conformidade depois da geração.

HTML semântico resolve metade dos problemas sozinho. <nav>, <main>, <article>, <button> em vez de <div onClick>. Se a IA gera HTML semântico por default, leitores de tela já entendem a estrutura sem ARIA extra. O problema é que a maioria dos modelos foi treinada com código que usa <div> pra tudo.

O que ainda depende de humano

Ordem lógica de foco em fluxos complexos. Alt text que descreva a imagem de verdade (não “imagem de um gráfico” mas “gráfico mostrando crescimento de 40% no Q3”). Decisões sobre quando algo é decorativo vs. informativo.

A IA gera a estrutura acessível. O humano verifica se faz sentido no contexto.

Por que me importo com isso

Porque se a geração de UI por IA escalar sem acessibilidade embutida, vamos ter uma web mais inacessível — não menos. Cada componente gerado sem label, sem contraste, sem foco visível multiplica a dívida de acessibilidade. E consertar depois é sempre mais caro.

Fontes: CopilotKit — Generative UI | Figma AI