Árvore de Acessibilidade em SEO: o que é e qual a importância para os agentes de IA

A Árvore de Acessibilidade é uma versão “resumida” e semântica de uma página, usada por tecnologias assistivas para descrever o conteúdo. Ela entrou no radar do SEO porque agentes de IA consultam essa interface para entender e interagir com cada URL.

O Google confirmou a informação em seu guia de otimização de sites para agentes de IA. E a documentação do Atlas, navegador do ChatGPT, sugere incluir ARIA tags, as mesmas que dão suporte aos leitores de tela, para melhorar a usabilidade para agentes.

Neste artigo, você entenderá como a Árvore de Acessibilidade funciona e como fazer a auditoria do seu site.

O que é a Árvore de Acessibilidade de um site?

A Árvore de Acessibilidade é a versão resumida de uma página. Mais especificamente, a versão resumida do DOM (Document Object Model), a interface que os navegadores usam para representar uma página.

O DOM apresenta a versão completa. A Árvore de Acessibilidade traz apenas os elementos principais, como headings, links, botões, formulários, imagens, textos alternativos, etc. Todos os elementos decorativos ou genéricos, como CSS, layouts e tags <div> são descartados.

A Árvore de Acessibilidade é semântica. Cada elemento é considerado um “nó” dentro da estrutura hierárquica de árvore, com propriedades que permitem identificar o seu significado:

Propriedade	O que representa	Exemplo
Função (Role)	Que tipo de elemento ele é	Botão, região de navegação, item de lista
Nome (Name)	Como o elemento é identificado	Um link com o texto “Leia mais” tem o nome “Leia mais”. Um botão apenas com um ícone, sem rótulo, não possui um nome acessível.
Estado (State)	A condição atual do elemento	Marcado, expandido, desabilitado, selecionado, etc.
Descrição (Description)	Informações adicionais além do nome	Uma explicação mais detalhada, como uma dica de ferramenta (tooltip).

A árvore também armazena o que pode ser feito em cada nó. Um link pode ser seguido, um formulário pode ser preenchido com texto, etc.

É precisamente esse tipo de informação que os leitores de tela (e agora os agentes) precisam para compreender uma página. Todo o resto, como os elementos visuais ou decorativos, são importantes apenas para leitores humanos, que podem de fato enxergar a página.

Como a Árvore de Acessibilidade é criada?

A Árvore de Acessibilidade não é um arquivo, ou algo que você “adiciona” ao seu site. Ela está sempre lá, como parte do processo que o navegador usa para exibir uma página da web.

O processo é:

O navegador processa o HTML e monta o DOM, que é a árvore completa, com elementos semânticos ou não;
A Árvore de Acessibilidade é como se fosse um “filtro” do DOM, que remove os elementos não-semânticos e atribui propriedades de função, nome, estado e descrição ao restante;
Os agentes de IA e tecnologias assistivas consomem a Árvore de Acessibilidade via API.

Pressione aqui para ver na prática como funciona.

Imagine esta marcação HTML simples:

<html>

<head>

</head>

<body>

<div>

</div>

</body>

</html>

Ela dará origem à seguinte Árvore de Acessibilidade:

role=’rootWebArea’ focusable name=’How old are you?’

role=’genericContainer’ ignored

role=’labelText’

role=’staticText’ name=’Age’

role=’spinButton’ editable focusable name=’Age’ value=’42’

role=’genericContainer’ editable

role=’staticText’ editable name=’42’

role=’genericContainer’

role=’button’ focusable name=’Back’

role=’staticText’ name=’Back’

role=’button’ focusable name=’Next’

role=’staticText’ name=’Next’

Alguns nós podem ser ignorados durante a criação da Árvore de Acessibilidade. Elementos genéricos, sem clareza ou função semântica são ocultados para gerar uma versão mais limpa da página.

Por que os agentes de IA leem a Árvore de Acessibilidade?

A Árvore de Acessibilidade explica a função de cada elemento de página aos agentes de IA. Desta forma, eles não precisam gastar recursos solucionando ambiguidades, já que os aspectos mais importantes estão claramente identificados na estrutura resumida da página.

Sem essa clareza, um agente de IA pode ter dificuldades para encontrar os elementos com os quais precisa interagir.

Por exemplo, imagine um agente que está comprando uma roupa. Ao entrar na página da loja, ele precisa encontrar informações sobre preços, botões de variação de cor, seletor de tamanho, botão de adicionar ao carrinho e de finalizar o checkout.

A Árvore de Acessibilidade indica em qual ponto da página estão esses itens, quais são clicáveis e o que ocorre se cada link for clicado. Ela complementa outros modelos de leitura, para que os agentes tenham uma visão completa de cada URL.

Como os agentes de IA leem páginas da web?

Segundo o Google, há três modelos principais (frequentemente usados em conjunto):

Capturas de tela: o agente literalmente tira prints das páginas e analisa os pixels para identificar e interagir com elementos;
DOM: o agente lê o HTML cru da página, com todas as tags, atributos e textos;
Árvore de Acessibilidade: é um “mapa” da página sem os elementos decorativos.

Esses métodos se complementam, pois cada um tem prós e contras bem definidos. As capturas de tela, por exemplo, consomem alto volume de tokens. Já ler apenas o DOM nem sempre é confiável para páginas dinâmicas, que mudam o conteúdo via JS. A Árvore de Acessibilidade, por sua vez, pode ocultar elementos que não estão marcados corretamente.

Como ver a Árvore de Acessibilidade do meu site?

A forma mais simples de ver é através do Chrome DevTools. Basta seguir estes passos:

Pressionar F12 (ou botão direito em qualquer área da página e Inspecionar);
Acessar a aba “Elementos”;
Pressionar “Acessibilidade”;
Marcar a opção “Mostrar Árvore de Acessibilidade”.

Visão da Árvore de Acessibilidade do site da SHH, dentro do Chrome DevTools

Você também poderá ver as tags ARIA, quando elas se aplicam.

O que você vê vs. O que os agentes veem vs. O que está no HTML

Antes de começar a pensar na otimização do seu site, garanta que você está olhando para a coisa certa. Isso porque a renderização e o uso de JS podem alterar a forma como a página é interpretada.

Os motivos:

A Árvore de Acessibilidade é uma versão pós-renderizada da página, com JS executado;
O HTML que chega antes da renderização pode ser diferente;
Um agente que, por alguma razão, não renderiza JS, nunca vê a versão pós-renderizada, apenas a original.

Portanto, conteúdos que aparecem depois que o JavaScript roda (inseridos dinamicamente), podem estar visíveis na Árvore de Visibilidade do Chrome, mas invisíveis para certos tipos de agentes.

Ou seja, se você estiver fazendo alguma auditoria, teste como a página está se comportando. Peça para algum agente realizar alguma ação e observe como ele se comporta.

Essa é uma lógica parecida com a de otimizações para acessibilidade. Olhar apenas a Árvore não é a melhor forma de identificar problemas. O ideal é simplesmente usar um leitor de tela e acompanhar o que acontece de verdade.

É possível otimizar a Árvore de Acessibilidade?

Não exatamente! A Árvore de Acessibilidade é apenas uma representação do seu HTML. Você deve otimizar o HTML em si e, como a árvore é gerada automaticamente, as mudanças serão refletidas ali.

É importante fazer essa distinção porque é bem possível que, nos próximos meses, você veja “hacks de Árvore de Acessibilidade” sendo divulgados por aí no LinkedIn. Mas, dificilmente eles serão efetivos, já que a principal ferramenta para modificar a árvore (tags ARIA), não são exatamente a melhor solução para a visibilidade.

As razões principais são três:

É mais fácil quebrar alguma coisa do que consertar, principalmente se você não souber o que está fazendo;
Os elementos com os quais um agente de IA provavelmente irá interagir, como os botões, já são semânticos;
Provavelmente há investimentos mais inteligentes para os seus recursos de desenvolvimento.

Em vez de focar nas tags ARIA, recomendamos a seguinte abordagem para a otimização do HTML para agentes de IA:

Defina o propósito da página;
Garanta que os agentes podem acessá-la;
Use HTML semântico;
Revise as alterações.

Em paralelo, siga as boas práticas gerais de SEO técnico e de JavaScript para SEO.

1. Defina o propósito da página

Antes de tudo, determine qual é a tarefa central que aquela página resolve.

Se for uma página de categoria de e-commerce, o objetivo é demonstrar claramente todos os produtos;
Se for uma página de produto, o objetivo é finalizar a compra;
Se for uma página de isca digital, o objetivo é preencher o formulário;
Se for uma página de serviço, o objetivo é agendar uma reunião.

Sem isso, fica mais difícil definir como otimizar e quais pontos devem ser observados.

Uma boa abordagem é definir um agente para testes e pedir para ele determinar quais ações podem ser realizadas. Isso resultará em uma lista, que deve ser usada para:

Entender se a tarefa principal pode ser realizada;
Entender quais outras subtarefas podem ser feitas;
Se o foco da página está claro ou não;
Quais elementos estão travando o agente.

Se perceber erros, siga para os próximos passos.

2. Garanta que os agentes podem acessar a página

Ao revisar os problemas, o primeiro passo é verificar se os agentes de IA podem acessar as partes certas do seu site.

Para isso, use as diretivas padrão, que são as mesmas do SEO tradicional:

Configuração adequada do arquivo robots.txt, definindo quais seções do site podem ser acessadas, e por quais robôs;
Implementação de sitemaps.xml.

Alguns manuais de otimização para agentes de IA sugerem implementar também o arquivo llms.txt. No entanto, ainda não há garantias de que isso de fato funcione. A maioria dos arquivos sequer é acessada pelos robôs. A exceção são tipos muito específicos de site, como aqueles que têm documentações técnicas que agentes podem consultar.

3. Aplique HTML semântico

O próximo passo é a otimização do HTML de fato. Sempre que possível, use HTML semântico, com elementos que carreguem significado em vez de tags genéricas, que podem representar qualquer coisa, como <div>.

Use tags descritivas, como <button> e <a>;
Se não for possível usar tags descritivas, adicione atributos, como <role> e <tabindex>;
Inclua atributo for para tags <label> para explicar a finalidade de campos;
Use tags ARIA apenas quando realmente necessário, onde um componente HTML não pode expressar a função correta, como aria-expanded em um menu accordion;
Atente-se para elementos <div>, frequentemente usados para expressar uma variedade de significados;
Mantenha uma estrutura de página clara, com elementos importantes de navegação em destaque.

Outra boa prática, mas que não é necessariamente semântica, é garantir que todo o conteúdo essencial esteja presente no HTML. Ou seja, se um elemento essencial para entender a página é carregado dinamicamente via JS, deve haver correspondência no código-fonte pré-renderizado. Assim, você evita que os agentes percam algo importante no meio do caminho.

4. Revise as alterações

Após editar as páginas, analise a Árvore de Acessibilidade e veja se está tudo certo.

Você pode fazer dois testes rápidos:

Use o Chrome DevTools e verifique se as ações importantes estão marcadas com nomes e funções claras;
Rode um teste no Lighthouse ou no Pagespeed Insights e veja os resultados da auditoria da Árvore de Acessibilidade.

Esse é um recurso novo do Pagespeed Insights. Agora, além das métricas de desempenho de sempre, também há uma pontuação para “navegação agêntica”.

Um dos requisitos é, justamente, a estruturação da Árvore de Acessibilidade. O print abaixo é aqui da SHH – importante destacar que não fizemos absolutamente nenhuma otimização para agentes. A estruturação correta é simplesmente um reflexo do HTML bem feito do nosso site.

Invista na otimização para agentes de IA

Em geral, todo tipo de site será afetado pela tal “navegação agêntica”. Mas, alguns estão mais expostos do que outros – como e-commerces, SaaS e serviços digitais em geral.

Os agentes de IA são a grande aposta das big techs para o futuro. O Google já afirmou que imagina o seu futuro como o de um gerenciador de agentes e as primeiras experiências de compras online feitas por robôs já estão acontecendo nos EUA.

Se você quer ter uma marca pronta para quando este momento chegar, entre em contato com a SEO Happy Hour! Oferecemos consultoria nos fundamentos de SEO e nas ações que influenciam especificamente a visibilidade nos mecanismos de IA.