Aria hidden true e SEO: reflita sobre imagens e acessibilidade

Não é de hoje que os profissionais especialistas em SEO exigem que os produtos digitais sejam acessíveis, trazendo muito mais semântica de conteúdos para os elementos HTML, enriquecendo as páginas e obviamente, ajudando os leitores de telas utilizados por pessoas com deficiência a terem um entendimento mais claro sobre o teor das páginas web. Um grande problema que surge nesse tema é o “excesso” de uso de variáveis para acessibilidade e também a má-prática que pode ser um grande ofensor para SEO, ao invés de ajudar.

Em portais de notícias, a apresentação visual e a acessibilidade são fatores críticos para atrair e reter leitores. Uma prática duvidosa que já presenciamos é o uso do atributo aria-hidden="true" em imagens. No entanto, essa prática pode afetar negativamente o SEO se não for aplicada com clareza dos efeitos.

Esse post surgiu justamente de uma demanda da área de acessibilidade para a inserção do atributo em todas as imagens do site, e isso iria comprometer diretamente os benefícios das informações que rondam as imagens importantes das páginas (alt, title, legendas).

Vou explicar o impacto do uso inadequado de aria-hidden="true" em imagens e como isso pode prejudicar o SEO de um portal de notícias. Lembrando que este é o meu ponto de vista e, assim como qualquer assunto dentro do marketing digital, a experiência fala mais alto, e você não vai encontrar conteúdos relevantes sobre esse tema, então, se estou aqui é para passar a diante um entendimento correto a cerca do tema.

Mas afinal, o que é aria-hidden=”true”?

O atributo aria-hidden="true" é utilizado para indicar que um elemento HTML, incluindo seus filhos, devem ser ignorados por tecnologias assistivas como leitores de tela. Isso é frequentemente aplicado em elementos decorativos, ícones que se repetem com constância, elementos visuais, grafismos, que não são essenciais para a compreensão do conteúdo.

Exemplo:

<img src="grafismo-bg.jpg" alt="" aria-hidden="true">

Impacto no SEO de Portais de Notícias

Para um portal de notícias, as imagens desempenham um papel fundamental não só na atração visual, mas também na otimização para motores de busca. Usar aria-hidden="true" de maneira inadequada pode ter consequências significativas.

Imaginem que apenas na home desse portal de notícias 100 imagens ou mais de matérias relevantes são disponibilizadas no HTML. Ao utilizar esse atributo em todas as imagenms o que aconteceria? Não teríamos recursos de imagens passíveis de leitura por estes dispositivos e pior do que isso, estarímos informando para o Googlebot, ou qualquer bot, que aquela imagem não tem “conteúdo semântico” associado, o que seria um erro fatal uma vez que as imagens fazem parte do tripé de sustentação de notícias (principalmente as quentes).

Destaco os seguintes pontos:

1. Perda de conteúdo valioso para SEO: imagens com descrições, legendas e atributos relevantes (atributo alt, title, caption) contribuem para o SEO, fornecendo contexto adicional para os motores de busca. Ocultar essas imagens com aria-hidden="true" impede que os mecanismos de busca utilizem essas informações.
2. Experiência do usuário comprometida: usuários que dependem de tecnologias assistivas perdem o acesso a informações cruciais quando imagens relevantes são ocultadas. Isso pode resultar em uma experiência de usuário negativa e afetar indiretamente o SEO.

Exemplos de uso inadequado em portais de notícias

1. Ocultar imagens relevantes para a matéria:

Ocultar imagens que complementam o texto da notícia pode resultar em perda de contexto tanto para usuários quanto para crawlers.

Exemplo errado:

<img src="politica.jpg" alt="Presidente em discurso" aria-hidden="true">

2. Ocultar infográficos e gráficos informativos

Infográficos e gráficos frequentemente contêm informações vitais que devem ser acessíveis a todos os usuários e indexados pelos motores de busca.

Exemplo errado:

<img src="infografico.jpg" alt="Crescimento econômico anual" aria-hidden="true">

Boas práticas para portais de notícias

1. Usar aria-hidden="true" apenas em elementos decorativos

Aplique o atributo apenas em imagens que não adicionam valor informativo ao conteúdo, ícones que se repentem, elementos de grafismo, bordas, BGs, etc…

Exemplo correto:

<img src="grafismo.jpg" alt="" aria-hidden="true">

2. Garantir que imagens relevantes sejam acessíveis

Certifique-se de que todas as imagens que fornecem informações complementares ao texto sejam acessíveis e tenham descrições adequadas.

Exemplo correto:

<img src="evento-xpto.jpg" alt="Participantes no evento discutindo inovação tecnológica">

Benefícios de uma abordagem correta

1. Melhoria na acessibilidade

Garantir que todas as informações visuais importantes estejam acessíveis melhora a experiência para todos os usuários, incluindo aqueles que dependem de leitores de tela.

2. Otimização para mecanismos de pesquisa

Imagens relevantes e bem descritas ajudam a fornecer um contexto mais rico aos motores de busca, potencialmente melhorando o ranking do portal de notícias.

O uso adequado do atributo aria-hidden="true" em imagens é essencial para equilibrar acessibilidade e SEO, especialmente em portais de notícias renomados. Evitar erros comuns e seguir boas práticas garante que seu conteúdo seja acessível e otimizado para motores de pesquisas.

Se você quer ter uma assessoria relevante para seu portal de notícias, de uma dupla que contribuiu diretamente em novos portais, grandes portais já líderes de mercado, além de start-ups, com certeza somois os ratos digitais que você precisa bater um papo. Somos especialistas em marketing digital e SEO para publishers.