Agentes de navegador leem a sua página por três canais: captura de tela, estrutura HTML (o DOM) e árvore de acessibilidade, um resumo com papéis, nomes e estados de cada elemento. Se o botão "Adicionar ao carrinho" só existe como desenho, o agente pode não achá-lo. Se existe como botão com nome, ele o encontra.
Este é o mecanismo por trás de uma frase que o Google passou a repetir na documentação: agentes "interpretam a árvore de acessibilidade". Vale entender o que isso quer dizer na prática.
Como um agente de navegador lê uma página de produto?
O guia "Build agent-friendly websites", do web.dev (atualizado em 1º de abril de 2026), descreve os canais. A captura de tela serve para um modelo de visão identificar elementos por cor, tamanho e posição; o próprio guia a descreve como lenta e cara em tokens, melhor como plano B. O DOM mostra o aninhamento: o agente entende que um botão dentro do contêiner do produto pertence àquele produto. A árvore de acessibilidade é o resumo gerado pelo navegador, sem estilo visual.
Uma imagem para guardar: a árvore de acessibilidade é a planta baixa da loja, sem a decoração. A vitrine bonita está na captura de tela; a planta diz onde ficam a porta, o caixa e a saída. Agentes capazes cruzam os três canais, e o guia resume a tarefa do site assim: oferecer sinais limpos em todos eles.
A documentação do Google confirma o quadro. Ela afirma que agentes de navegador podem acessar o site para reunir os dados de que precisam e que analisam renderizações visuais, a estrutura do DOM e a árvore de acessibilidade. Também trata o tema como orientação inicial, e cita protocolos emergentes como o Universal Commerce Protocol. Para o lado declarativo, em que o site descreve ações ao agente, veja WebMCP: como agentes de IA usam o seu site.
O que exatamente a árvore de acessibilidade contém?
Cada nó tem um papel (botão, link, campo de texto, grupo de opções), um nome (o texto que o identifica) e um estado (marcado, desabilitado, expandido). Estilo, cor e posição ficam de fora. Você pode ver a sua árvore no Chrome DevTools, no painel de acessibilidade, como o web.dev indica.
Para ilustrar, usamos o produto fictício Aurora Pro 14, um notebook de exemplo. Numa página bem montada, a árvore mostraria um botão chamado "Adicionar ao carrinho", um grupo "Voltagem" com duas opções e um campo de CEP rotulado. Numa página montada com div estilizados, a árvore mostraria blocos genéricos sem nome e sem papel. Visualmente, as duas páginas são idênticas.
Quais são os cinco erros mais comuns em páginas de produto?
O web.dev lista recomendações que se traduzem bem para loja de eletrônicos.
Elementos fantasma. Camadas transparentes sobre botões, como restos de banner de cookies ou de promoção, podem fazer o agente descartar o controle que está embaixo. Teste: clique no botão com o banner fechado e veja se algo o cobre.
Controle que não é controle. Prefira <button> e <a> a <div> e <span> estilizados. Se não houver alternativa, o guia recomenda acrescentar role e tabindex apropriados, e você precisa tratar o teclado por conta própria.
Campo sem rótulo. Associe cada <label> ao campo por meio do atributo for. Num seletor de voltagem ou de cor, o rótulo é o que diz ao agente que a opção "220V" pertence ao grupo "Voltagem". Variantes mal rotuladas também são o ponto onde a entidade de produto se quebra.
Alvo pequeno ou invisível. Elementos necessários à tarefa devem estar visíveis e ter tamanho suficiente; o guia cita o limite de 8 pixels quadrados, abaixo do qual a análise visual pode filtrar o elemento. Também recomenda cursor: pointer para sinalizar o que é clicável.
Layout que muda de lugar. Ações-chave, como "Adicionar ao carrinho", devem ficar em posições consistentes entre páginas. Reordenar a página a cada teste de interface confunde pessoas e agentes.
O guia ainda resume: o que torna o site "pronto para agentes" também o torna melhor para humanos. Não é um truque de IA; é acessibilidade com outro leitor.
O que o Google diz sobre HTML semântico?
A documentação de otimização para IA do Google é cuidadosa: não é preciso ter HTML perfeitamente semântico para o Google entender a página, mas, em geral, é uma boa ideia usá-lo quando possível. Ela associa o benefício a usuários de leitores de tela. Ou seja, não há aqui a promessa de que HTML semântico fará seu produto ser recomendado. Há a observação de que ele torna a página mais navegável para quem a interpreta por estrutura.
Como fazer uma auditoria de 30 minutos?
- Abra a página de um produto no Chrome e consulte o painel de acessibilidade no DevTools.
- Localize os controles de compra: preço, variantes, CEP, comprar. Cada um tem papel e nome legíveis?
- Feche banners e confirme que nada cobre os botões.
- Navegue só com o teclado. Se você não consegue chegar ao botão de compra, o agente também terá dificuldade.
- Registre as falhas por tipo de componente, não por página: o conserto costuma estar no modelo de página, não na ficha individual.
Se a página depende de JavaScript para montar o botão, combine esta auditoria com a leitura de renderização JavaScript e rastreadores de IA.
O que levar daqui
- Agentes de navegador combinam captura de tela, DOM e árvore de acessibilidade; a árvore é a mais limpa dos três.
- Botão que é
dive campo sem rótulo são os dois defeitos que mais apagam controles da árvore. - Camadas transparentes sobre botões podem fazer o agente ignorá-los.
- O Google chama esse tema de orientação inicial e opcional; trate como melhoria de acessibilidade, não como atalho de ranking.
Perguntas frequentes
Isso é diferente de acessibilidade para pessoas?
Na prática, é a mesma base: papéis, nomes e estados. O web.dev afirma que o que deixa o site pronto para agentes também o deixa melhor para humanos.
Preciso implementar WebMCP?
O web.dev o descreve como um padrão proposto, ainda em desenvolvimento. Começar pelo HTML semântico e pelos rótulos já resolve o que está ao seu alcance hoje.
Isso aumenta a chance de a IA recomendar meu produto?
Não temos evidência disso, e não prometemos. Ajuda um agente a operar a página, que é outra etapa, distinta da recomendação. Prontidão de página não é o mesmo que ser recomendado.
Quer ver como a IA enxerga as informações de um produto seu? Faça o diagnóstico gratuito da Citoriq, ou peça uma demonstração do centro de ações.