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 foco complexos, layouts variáveis e movimentos fluidos. Isso é funcionalmente quebrado para agentes.

Como os agentes visualizam 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 uma captura 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 Excluir grande provavelmente será interpretado com mais cautela do que um link "Ajuda" pequeno. No entanto, analisar capturas de tela pode ser lento e caro (em termos de tokens usados), o que o torna 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 base 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 produtos, o agente vai presumir que esse botão 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: papéis, 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

Depender de uma única entrada cria uma lacuna semântica. Por exemplo, no DOM, um agente pode ver um <div> sem saber que você a 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 ainda não sabe o destino ou a ação pretendida do botão que ele foi projetado para acionar.

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

Nosso trabalho é fornecer indicadores limpos em todos esses canais.

Criar sites otimizados para agentes

Para ajudar os agentes a navegar pelo seu site, siga estas recomendações:

• Todas as ações necessárias, realizadas por um humano ou agente, precisam ser claramente refletidas na interface.
• Garanta um layout estável. Os agentes que fazem capturas de tela provavelmente ficarão confusos se o layout do seu site estiver mudando constantemente, por exemplo, quando um botão Adicionar ao carrinho na página do produto estiver em um local diferente para cada categoria dos produtos.
• 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 o nó pareça transparente.
• Projete elementos acionáveis com HTML semântico. Prefira tags <button> e <a> a elementos <div> e <span> modificados. Os agentes reconhecem esses elementos como interativos.
  • Se você não puder usar HTML semântico, sempre forneça ao elemento o role e o tabindex adequados. Por exemplo, <div role="button">.
• Defina cursor: pointer no 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 todos 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 tornar um site "preparado para agentes" também o torna melhor para 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 (link em inglês), um padrão da Web proposto para ajudar os sites a interagir com agentes, e inscreva-se no programa de visualização antecipada para começar a fazer testes.
• Audite sua árvore A11y: use as ferramentas atuais para garantir que a hierarquia do seu site seja legível por máquina e estável.