Teste para agentes de IA: botões, links e campos legíveis

O que o teste confere

Três regras da análise completa, as que decidem se um agente consegue operar a página:

• Botões, links e campos com nome: cada elemento em que dá para clicar ou digitar precisa dizer o que faz, seja pelo texto visível, por um aria-label ou pelo alt da imagem. Campo de formulário precisa de um <label> ligado a ele.
• Conteúdo sem JavaScript: quanto texto a página entrega no HTML. Nem toda leitura feita por IA abre um navegador completo.
• HTML semântico: <main>, <nav>, <header> e <footer> separam o conteúdo do menu e do rodapé.

Como ler o resultado

Cada problema vem com o elemento como ele aparece no código, com a classe e o endereço, para quem desenvolve achar rápido. Os tipos são estes:

• Botão sem nome: quase sempre um ícone sozinho, como a lupa, o menu de três linhas ou o X de fechar.
• Link sem nome: o caso mais comum é a imagem com alt vazio dentro do link, que deixa o link mudo.
• Campo sem rótulo ou identificado só pelo placeholder: o texto de exemplo dentro da caixa some quando a pessoa digita e não substitui o <label>.
• Link que só funciona com JavaScript e clique em elemento que não é link nem botão: href="javascript:..." ou uma <div> com onclick. Para quem lê a estrutura, aquilo não parece clicável.

Alguns elementos sem nome numa página grande deixam a regra em alerta; quando passam de 10% dos botões, links e campos, ela falha. Elementos escondidos com hidden ou aria-hidden="true" ficam de fora, porque ninguém interage com eles.

Um exemplo de correção

A busca do topo de muitas lojas é uma caixa com texto de exemplo e um botão que só mostra a lupa:

<input type="search" placeholder="O que você procura?">
<button><svg>...</svg></button>

Para um agente, são uma caixa sem nome e um botão mudo. Com um rótulo (que pode ficar visível só para leitores de tela) e um nome no botão, os dois passam a dizer o que fazem:

<label for="busca" class="sr-only">Buscar na loja</label>
<input id="busca" type="search" placeholder="O que você procura?">
<button aria-label="Buscar"><svg aria-hidden="true">...</svg></button>

O que o teste não vê

A ferramenta lê o HTML que o servidor entrega. Botão ou campo criado depois, por JavaScript, não entra na conta, e uma camada por cima do formulário, como o aviso de cupom, só aparece com o navegador aberto. Também não dá para saber, pelo código, se o firewall deixa os agentes entrarem.

Por isso, depois de corrigir, faça o teste de verdade: peça a um agente que preencha o seu formulário com dados de teste e observe onde ele erra o campo ou pede ajuda. Para ver o texto que chega a um robô sem navegador, use Como a IA vê sua página.

Perguntas frequentes

O que é um agente de IA navegando no site?

É um programa que usa um navegador no lugar da pessoa para cumprir um pedido: abre a página, lê, clica e preenche o formulário. O Claude in Chrome e o Comet, da Perplexity, são exemplos de agentes que trabalham dentro do navegador de quem pediu a tarefa.

Como o agente enxerga a página?

Pelo guia do Google no web.dev, de três formas que ele combina: a captura de tela, o HTML e a árvore de acessibilidade, o resumo que o navegador monta com o papel, o nome e o estado de cada elemento. A captura é lenta e cara, então a árvore e o HTML pesam muito.

Por que o placeholder não basta como rótulo?

Porque ele some quando a pessoa começa a digitar, e o W3C trata placeholder e title como nomes de baixa qualidade. O recomendado é um <label> ligado ao campo pelo atributo for, apontando para o id do campo. Se o visual não comporta o texto, o rótulo pode ficar visível só para leitores de tela.

A ferramenta testa com um agente de verdade?

Não. Ela lê o HTML que o servidor entrega, sem executar JavaScript, e confere os nomes e rótulos que estão ali. Campo ou botão criado só por script não aparece no resultado. Para o teste final, peça a um agente que preencha o seu formulário com dados de teste e veja onde ele hesita.

Isso ajuda a aparecer no Google?

Não há sinal disso. O guia de IA do Google diz que não é preciso arquivo nem marcação especial para aparecer na Pesquisa. Nomes e rótulos são acessibilidade: ajudam quem usa leitor de tela e o agente que o seu cliente mandou fazer a tarefa por ele.

Fontes

As regras desta ferramenta seguem a documentação oficial:

• Build agent-friendly websites (web.dev)
• Labeling Controls (W3C WAI)
• Providing Accessible Names and Descriptions (W3C WAI)

Outras ferramentas grátis

• Testador de robots.txt: Teste grátis se uma página está liberada no robots.txt para Googlebot, Bingbot e robôs de IA, veja a linha que decidiu e teste rascunhos.
• Como a IA vê sua página: Veja o texto, os títulos e os dados estruturados que um robô de IA recebe da sua página sem executar JavaScript, e se o robots.txt deixa ele entrar.
• Teste de AEO: Cole um texto ou informe uma página e veja se ele responde logo no começo, usa perguntas nos subtítulos, é fácil de ler e traz dados que a IA cita.
• Verificador de robots.txt para IA: Veja na hora quais robôs de IA o robots.txt do seu site libera ou bloqueia: OAI-SearchBot, GPTBot, ClaudeBot, PerplexityBot, Google-Extended e outros.
• Validador de llms.txt: Confira se o seu site publica um llms.txt e se ele segue o formato proposto: título, resumo, seções e links em Markdown.
• Teste de dados estruturados: Teste grátis dos dados estruturados de uma página: JSON-LD válido, tipos do Schema.org, propriedades obrigatórias, Organization, WebSite, breadcrumb e FAQ.
• Gerador de llms.txt: Gere grátis o llms.txt do seu site a partir da página inicial e do sitemap, no formato de llmstxt.org, pronto para revisar, copiar e publicar.
• Verificador de meta tags: Confira grátis as meta tags de uma página: título, meta description, H1, canonical, indexação, idioma, Open Graph e Twitter Card.

Para ver tudo de uma vez, faça a análise completa, com as 83 regras descritas na metodologia.