Seu site falhou na nova auditoria de Navegação Agentiva do Lighthouse — veja como corrigir cada verificação

Se você abriu o Chrome DevTools recentemente e executou o Lighthouse, pode ter notado uma nova categoria sob Performance, Acessibilidade, SEO e o restante: Navegação Agente.

Ela foi lançada na Lighthouse 13.3 (maio de 2026). Ainda está marcada como experimental, então não fornece uma pontuação de 0 a 100 — apenas um passe/falha por verificação. Mas "experimental" no Lighthouse tende a se tornar "padrão, e agora seu cliente está perguntando por que está vermelho." Portanto, vale a pena entender agora, enquanto é barato.

A categoria responde a uma pergunta: um agente de IA pode realmente entender e operar esta página? Ela faz isso com quatro verificações. Aqui está o que cada uma testa e exatamente como fazê-la passar.

1. llms.txt

O que verifica: se a raiz do seu domínio serve um /llms.txt, e — esta é a parte que as pessoas perdem — se esse arquivo é realmente útil: ele sinaliza o arquivo se estiver faltando um H1, for muito curto ou não contiver links.

Como passar: adicione um arquivo em texto simples (bem, Markdown) em https://seudominio.com/llms.txt. Versão mínima viável:

# Acme Tools

> Acme vende ferramentas manuais de precisão. Este arquivo ajuda agentes de IA a encontrar as páginas certas.

## Páginas principais
- [Catálogo de produtos](https://acme.example/products): navegue e filtre todas as ferramentas
- [Busca](https://acme.example/search): busca de produtos em texto completo
- [Suporte](https://acme.example/support): devoluções, garantia, contato

Um H1, um resumo de uma linha, links reais para as páginas que importam. Essa é toda a verificação. Não despeje seu sitemap nele — selecione os poucos pontos de entrada que um agente deve conhecer.

2. Árvore de acessibilidade

O que verifica: cada elemento interativo tem um nome programático, os papéis e as relações pai/filho são válidos, e nada está oculto da árvore de acessibilidade enquanto ainda é interativo.

Como passar: isso é apenas higiene de acessibilidade, e é a verificação mais importante das quatro — porque a árvore de acessibilidade é a principal maneira que um agente lê sua página. Use <button>, <a>, <label>/<input> reais em vez de <div>s com manipuladores de clique. Dê a botões apenas com ícones um aria-label. Certifique-se de que um <div role="button"> que você não conseguiu evitar seja focável e nomeado.

Se você tem adiado sua lista de pendências de acessibilidade, a era agente apenas lhe deu uma segunda razão, mais difícil de ignorar, para fazê-lo: as mesmas correções que ajudam usuários de leitores de tela ajudam cada agente que visita.

3. Mudança de Layout Cumulativa (CLS)

O que verifica: o mesmo CLS que você já conhece dos Core Web Vitals.

Como passar: nada específico para agentes aqui — reserve espaço para imagens e embeds (width/height ou aspect-ratio), evite injetar conteúdo acima do conteúdo existente, pré-carregue fontes. Por que uma categoria agente se preocupa com a estabilidade visual? Porque agentes que dirigem um navegador real clicam em coordenadas e leem instantâneas; uma página que se reorganiza sob eles clica incorretamente exatamente como um humano faria. Layout estável = automação confiável.

4. WebMCP

Esta é a nova, e a única verificação que é genuinamente sobre a web agente em vez de higiene que você já deveria estar fazendo.

O que verifica: o Lighthouse exibe todas as ferramentas WebMCP registradas na página — seja via API HTML declarativa ou imperativamente através de navigator.modelContext.registerTool() — e valida que qualquer inputSchema declarado é sintática e semanticamente válido. Para formulários anotados, verifica se as anotações correspondem ao esquema esperado.

Como passar: você precisa realmente expor ferramentas, e seus esquemas têm que ser válidos. A versão imperativa:

if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({
    name: "search_products",
    description: "Buscar no catálogo de produtos",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string" },
        maxPrice: { type: "number" },
      },
      required: ["query"],
    },
    // chame a MESMA função que sua caixa de busca já chama
    async execute({ query, maxPrice }) {
      const results = await productSearch({ query, maxPrice});
      return { content: [{ type: "text", text: formatResults(results) }] };
    },
  });
}