O guia do web.dev (Google Chrome) sobre UX para agentes parte de um princípio: seu site tem um visitante novo que executa jornadas por objetivo, e design feito só para humanos é funcionalmente quebrado para ele. Agentes leem o site por captura de tela, HTML bruto e árvore de acessibilidade (e o padrão WebMCP vem como quarta via: ferramentas explícitas expostas pelo site). O checklist prático: eliminar elementos fantasma (sobreposições que ocultam interativos), usar HTML semântico ou declarar role e tabindex, ligar <label> aos inputs com for, garantir área clicável visível de pelo menos 8 pixels, manter o layout estável entre páginas e criar ferramentas WebMCP para ações-chave. Tudo isso melhora o site para humanos no mesmo commit.
O novo visitante do seu site
O web.dev parte de uma constatação que o mercado de busca já sentiu: além do usuário e do crawler, existe agora o agente, que chega com uma meta ("compre X para mim") e percorre o site executando ações. O design orientado a humano assume capacidades que o agente não tem: ler hover states, entender movimento, inferir hierarquia por estética. O que para o humano é polimento, para o agente é ruído ou parede.
As 3 modalidades de leitura + WebMCP
Captura de tela: visão computacional identifica elementos por cor, tamanho e proximidade. Lenta e cara em tokens: fica como backup. HTML bruto: o agente lê o DOM com hierarquia e atributos, inferindo contexto (um botão dentro do card do produto pertence a ele). Árvore de acessibilidade: o resumo semântico com funções, nomes e estados, que ignora o ruído visual do CSS: o caminho que mais cresce. E a quarta via em construção: o WebMCP, padrão que o Chrome testa em origem, em que o site expõe ferramentas e tarefas explícitas para agentes, com confirmação do usuário para ações sensíveis como compra. Nosso guia de implementação do WebMCP mostra o passo a passo com a demo oficial do Google.
Agentes modernos combinam as modalidades, porque cada uma isolada deixa lacuna: o clássico é o <div> estilizado como botão, que parece botão na captura e não existe na árvore.
Os "elementos fantasmas" que sabotam agentes
O achado mais prático do guia: sobreposições transparentes (overlays de layout, camadas decorativas) que escondem itens interativos da leitura do agente. Visualmente o botão está lá; na árvore, a camada por cima o ofusca. O conserto é de auditoria de CSS: garantir que nada intercepte o clique do que é clicável. Junto vêm os cuidados clássicos que o guia reafirma:
- HTML semântico primeiro:
<button>e<a>nativos; quando impossível, declararroleetabindexmanualmente. - Label ligado ao input: o atributo
forconectando<label>ao campo, ou o agente não sabe o que digitar onde. - Sinal visual via CSS com função:
cursor: pointernão é só estética: é sinal de interatividade que modelos de visão leem. - Área clicável visível: elementos interativos com mais de 8 pixels quadrados de área perceptível.
- Layout estável: o botão "adicionar ao carrinho" no mesmo lugar em todas as páginas de produto: consistência é o que permite ao agente generalizar o que aprendeu na primeira tela.
Tudo que torna um site operável por agentes melhora o site para humanos: é o retorno aos fundamentos de sites semânticos e acessíveis que leitores de tela e buscadores pedem desde sempre. Os próximos passos sugeridos pelo web.dev: auditar a árvore de acessibilidade do seu site hoje e testar o WebMCP (disponível como teste de origem no Chrome). A auditoria técnica cabe no SEO técnico; o teste de WebMCP, no guia da Marketing & Conteúdo.
Por onde começar na segunda-feira
Ordem de execução prática: 1) abra a árvore de acessibilidade no DevTools do Chrome e caminhe pelas páginas principais: anote tudo sem nome e sem papel. 2) rode um leitor de tela pelas jornadas críticas (checkout, agendamento). 3) cace overlays transparentes sobre elementos clicáveis. 4) corrija labels de formulário e autocomplete. 5) estabilize o layout das páginas de conversão. 6) quando o WebMCP sair do teste de origem, exponha as duas ou três ferramentas das jornadas principais. Nada disso exige reescrever o site: exige passar um pente-fino na camada que sempre deveria estar certa. O verificador de visibilidade em IA cobre a primeira varredura de graça.