Criar sites compatíveis com agentes

Kasper Kulikowski

Omkar More

Seu site tem um novo tipo de visitante. Alguns usuários humanos estão deixando de usar a navegação manual para delegar jornadas orientadas a metas a agentes de IA. Esses sistemas autônomos podem interpretar entradas, planejar e executar ações em nome de um usuário.

No entanto, muitos dos nossos sites são projetados para serem bonitos para humanos, com estados de passar o cursor complexos, layouts variáveis e movimento fluido. Isso é funcionalmente quebrado para agentes.

Como os agentes veem seu site

Os agentes não acessam seu site em um monitor. Eles operam em uma representação legível por máquina do seu site. A qualidade dessa representação determina a performance deles.

Os agentes podem visualizar seu site de três maneiras principais: capturas de tela, HTML bruto e a árvore de acessibilidade.

Capturas de tela

O agente faz um snapshot da página renderizada e usa um modelo de visão para identificar elementos. Com base na captura de tela, o agente pode reconhecer que uma barra de pesquisa no canto superior direito é uma pesquisa global, enquanto uma caixa no meio provavelmente é um campo de formulário. As pistas visuais podem ser úteis, já que os agentes podem usar cor, tamanho e proximidade para determinar a importância. Um botão grande Excluir provavelmente será interpretado com mais cautela do que um pequeno link "Ajuda". No entanto, analisar capturas de tela pode ser lento e caro (em termos de tokens usados), o que torna essa opção melhor como um backup quando a estrutura é confusa.

HTML

O agente analisa o DOM e lê o HTML. Ele entende como os elementos são aninhados, a hierarquia lógica da árvore do DOM, atributos como IDs e classes que definem a estrutura e strings de dados brutos que formam a espinha dorsal informativa do site. Isso ajuda o agente a entender a relação entre os elementos. Se um botão "Comprar agora" estiver dentro de um contêiner de produto, o agente vai presumir que ele pertence a esse produto específico.

Árvore de acessibilidade

A árvore de acessibilidade é uma API nativa do navegador que destila o DOM no que é mais importante: funções, nomes e estados de elementos interativos. É o resumo semântico da página, usado pela tecnologia adaptativa. Para um agente de IA, ele funciona como um mapa de alta fidelidade que ignora o "ruído" visual do CSS para se concentrar na utilidade pura. Ao interpretar essa árvore, um agente pode aprender a intenção funcional de cada botão de alternância, controle deslizante e campo de entrada.

Modalidades combinadas

Confiar em uma única entrada cria uma lacuna semântica. Por exemplo, no DOM, um agente pode ver um <div> sem saber que você o configurou como um botão funcional com CSS e JavaScript. Com capturas de tela, é possível que um agente identifique onde esse botão está na tela, mas ele ainda não sabe o destino ou a ação pretendida que o botão foi projetado para acionar.

Portanto, os agentes modernos combinam várias modalidades. Eles usam o DOM e a árvore de acessibilidade para ter uma lista limpa e estruturada de elementos interativos. Depois, comparam isso com uma renderização visual para entender o layout, o agrupamento e as dicas visuais.

Nosso trabalho é fornecer indicadores limpos em todos esses canais.

Criar sites compatíveis com agentes

Para ajudar os agentes a navegar no seu site, considere o seguinte:

• Todas as ações necessárias, realizadas por um humano ou agente, precisam ser claramente refletidas na interface.
• Garantir um layout estável. Os agentes que fazem capturas de tela provavelmente vão ficar confusos se o layout do seu site mudar constantemente. Por exemplo, quando um botão Adicionar ao carrinho na página do produto está em um local diferente para cada categoria de produto.
• Evite elementos "fantasma" ou sobreposições transparentes que possam ocultar elementos interativos. A análise visual feita pelo agente pode descartar nós cobertos, mesmo que eles pareçam transparentes.
• Projete elementos úteis com HTML semântico. Prefira as tags <button> e <a> em vez dos elementos modificados <div> e <span>. Os agentes reconhecem esses elementos como interativos.
  • Se não for possível usar HTML semântico, sempre forneça ao elemento o role e o tabindex adequados. Por exemplo, <div role="button">.
• Defina cursor: pointer em CSS, que é um indicador forte de capacidade de ação.
• Adicione o atributo for às tags <label> para vinculá-las às entradas. Isso ajuda o agente de IA a entender a finalidade de um campo indicando o texto do rótulo que está diretamente anexado à string de ação.
• Verifique se os elementos interativos necessários para continuar a jornada do usuário têm uma área visível maior que 8 pixels quadrados para evitar serem filtrados pela análise visual.

Próximas etapas

Tudo o que sugerimos para deixar um site "pronto para agentes" também melhora a experiência dos humanos.

Tornar os sites compatíveis com agentes de IA é um incentivo para reafirmar os princípios fundamentais de criação de sites bem estruturados, acessíveis e semânticos.

• Leia sobre o WebMCP, um padrão da Web proposto para ajudar sites a interagir com agentes, e inscreva-se no programa de pré-lançamento para começar a testar.
• Audite sua árvore de acessibilidade: use ferramentas atuais para garantir que a hierarquia do site seja legível por máquina e estável.