A marcação ARIA criada para atender aos testes de acessibilidade também é uma das fontes de código mais claras para os mecanismos de IA. Leitores de tela e agentes de IA interpretam páginas de maneira muito parecida: em vez de observar imagens cuidadosamente diagramadas, eles decompõem o HTML em uma árvore de tags, hierarquias e nomes. Assim, a mesma configuração que atende pessoas com deficiência visual permite que mecanismos como ChatGPT, Perplexity e Claude extraiam e citem seu conteúdo corretamente. Embora seja um dos aspectos mais mencionados em GEO, continua sendo um dos mais negligenciados.
Leitores de tela e agentes de IA interpretam a mesma árvore
O navegador combina CSS, imagens e animações para montar a página que enxergamos. Um leitor de tela trabalha de outra forma: percorre a árvore de acessibilidade criada pelo navegador e informa cada camada ao usuário, indicando onde está a navegação, qual é o conteúdo principal e qual botão se chama "Adicionar ao carrinho". Os crawlers dos mecanismos de IA costumam seguir um processo mais enxuto. A maioria não executa JavaScript; captura diretamente o HTML original, transforma tags, hierarquia de títulos, textos de links e atributos aria em texto simples e só então envia esse material ao modelo. O ponto em comum é direto: nenhum dos dois interpreta pistas exclusivamente visuais. Ambos dependem da estrutura e do texto.
Por isso, um botão improvisado com uma <div> e um evento de clique, uma imagem de produto sem alt ou um texto em negrito que só parece título por causa do tamanho da fonte podem funcionar visualmente, mas chegam vazios a esses dois tipos de leitor. Mesmo um ótimo conteúdo perde valor quando a camada extraída se desfaz: a IA precisa adivinhar o significado ou simplesmente ignora a página.
Comece pela base: HTML semântico nativo
Quando ouvem falar em ARIA, muitas equipes pensam em acrescentar vários atributos role e aria-. A ordem deveria ser outra. A primeira regra das diretrizes de autoria para acessibilidade do W3C é clara: se um elemento HTML nativo já expressa a semântica necessária, não use ARIA para substituí-lo. <button> já nasce como botão, <nav> como navegação e <h2> como subtítulo. Essas tags trazem semântica e comportamento padrão de teclado, além de serem reconhecidas por crawlers e leitores de tela. Não exigem uma tabela paralela de correspondências. ARIA serve para preencher lacunas, não para construir a base.
Quatro ajustes que beneficiam os dois lados
Concentre os recursos de engenharia nos quatro pontos a seguir. Eles aparecem com frequência nas auditorias de acessibilidade e estão entre os sinais mais importantes para a extração de conteúdo por IA.
- Estrutura por landmarks: use <header>, <nav>, <main>, <aside> e <footer> para demarcar o esqueleto da página. O crawler de IA recorre a esses landmarks para separar o conteúdo principal dos modelos de navegação e rodapé. Assim, cita o conteúdo relevante sem misturar textos de menu à resposta.
- Hierarquia de títulos: use um <h1> por página e não pule níveis na sequência de <h2> e <h3>. Essa árvore funciona como um sumário para a IA compreender a estrutura do artigo e permite que usuários de leitores de tela naveguem rapidamente entre as seções.
- Texto alternativo de imagens: descreva em alt o conteúdo das imagens que transmitem informação. Em imagens meramente decorativas, deixe o valor de alt vazio para que sejam ignoradas. Os pontos centrais de um infográfico devem aparecer no alt ou em um texto próximo; caso contrário, os números exibidos na arte não existirão para a máquina.
- Nomes de elementos acionáveis: todo botão e link precisa ter um nome legível. Em botões compostos apenas por ícones, use aria-label para fornecer esse texto e informar ao agente de IA o que cada ícone faz.
Botões com ícones e links: onde surgem mais lacunas
Nas auditorias técnicas que realizamos para clientes, componentes exclusivamente gráficos estão entre os problemas mais recorrentes. Menu hambúrguer, carrinho de compras, lupa de busca e compartilhamento em redes sociais muitas vezes são apenas uma <div> envolvendo um SVG, sem nenhum texto. Nesse caso, o leitor de tela anuncia somente "botão", quando anuncia alguma coisa. Para o agente de IA, resta um objeto clicável sem nome. Um cliente de e-commerce tinha exatamente esse problema no botão de checkout: a ferramenta de teste de agentes não conseguia encontrar o acesso. Depois que incluímos um aria-label com o nome "Finalizar compra", o botão passou a ser identificável tanto por pessoas com deficiência visual quanto por agentes automatizados. O mesmo vale para links. Quando uma fileira inteira diz apenas "Saiba mais" ou "Clique aqui", ninguém sabe o destino depois que o texto é separado do contexto visual. Links com textos específicos e autossuficientes resolvem o problema para os dois públicos.
Elementos dinâmicos: informe ao agente de IA o que está disponível agora
Os agentes de IA são cada vez mais chamados a executar ações reais nas páginas, como abrir menus, mudar de página e enviar formulários. Nesses casos, dar um nome ao componente não basta; é preciso informar seu estado. Os atributos de estado do ARIA comunicam, em formato legível por máquina, se um componente está aberto ou fechado e qual item está selecionado. Com isso, o agente entende o próximo passo e consegue confirmar se a ação anterior produziu o resultado esperado.
- aria-expanded: indica se um menu recolhível, acordeão ou menu suspenso está aberto ou fechado. O agente usa essa informação para decidir se precisa clicar no componente antes de prosseguir.
- aria-current: marca a posição atual em uma paginação ou trilha de navegação, evitando que o agente fique circulando pelo mesmo nível.
- aria-selected e aria-checked: informam o estado selecionado de páginas, opções e caixas de seleção, permitindo que o agente confirme se a ação foi concluída.
- aria-live: identifica regiões atualizadas em tempo real, como mensagens de erro em formulários ou resultados de carregamento, para que agentes e leitores de tela percebam a mudança na página.
Validação: não confie no argumento de que "parece estar tudo certo"
- Use curl ou a opção "Exibir código-fonte" do navegador para inspecionar o HTML realmente entregue pelo servidor. Se o conteúdo só aparece depois da execução de JavaScript, a maioria dos crawlers de IA não conseguirá lê-lo.
- Execute a verificação de acessibilidade do axe DevTools ou do Lighthouse para encontrar problemas como nomes ausentes, contraste insuficiente e níveis de título ignorados.
- Abra um leitor de tela de verdade. Use o VoiceOver no Mac ou o NVDA no Windows e percorra a página pelo teclado para ouvir o que é anunciado.
- Use verificações de prontidão para agentes, como o isitagentready, para simular se um agente de IA consegue reconhecer e operar os componentes essenciais da página.
Acessibilidade não deve ser tratada apenas como um custo adicional de conformidade. Cada tag semântica implementada para pessoas com deficiência visual também será interpretada por agentes de IA. É um dos poucos investimentos de engenharia capazes de gerar esses dois tipos de valor ao mesmo tempo.— Tenten GEO Technical Audit
ARIA e marcação semântica não elevam diretamente seu posicionamento na busca, mas determinam se um mecanismo de IA consegue compreender, extrair e citar seu conteúdo sem ruído. Essa é a base de GEO. Se você não sabe como um agente de IA enxerga seu site nem quais componentes essenciais chegam vazios até ele, agende um diagnóstico de GEO de 30 minutos. Mostraremos as lacunas por meio de uma inspeção prática.
