A internet é um verdadeiro tesouro de visuais, transbordando inspiração e informação. As imagens são o que nos atraem, nos mantêm engajados e nos ajudam a aprender e criar. Mas imagine a internet sem esses sinais visuais—navegá-la seria um verdadeiro desafio.  

Felizmente, para pessoas com deficiências visuais, aquelas que lidam com conexões de internet mais lentas, e até mesmo os robôs que alimentam os mecanismos de busca, existe uma solução simples, mas poderosa: texto alternativo (abreviado como alt text). Este herói desconhecido do mundo digital garante que todos possam acessar e se beneficiar das imagens que muitas vezes consideramos garantidas.

O que é texto alternativo?

Texto alternativo é exatamente o que parece—uma descrição de uma imagem que aparece na página. Simples, certo? Mas tem mais do que isso. Para escrever um texto alternativo realmente eficaz, é importante entender por que isso importa, quando uma imagem precisa de um atributo alt (alerta de spoiler: nem toda imagem precisa!), e as melhores ferramentas para garantir que suas imagens estejam cobertas. Vamos mergulhar e fazer seu texto alternativo funcionar de forma mais inteligente, não mais difícil!

Por que o texto alternativo é importante

Texto alternativo não é apenas uma caixa para marcar—é um atributo poderoso que serve a dois propósitos importantes: tornar seu conteúdo inclusivo e ajudar os mecanismos de busca a entender suas imagens.

Acessibilidade

Texto alternativo fornece uma descrição escrita de uma imagem para aqueles que dependem de leitores de tela ou encontram problemas ao carregar imagens. Ele está lá para garantir que, não importa a barreira—seja deficiências visuais ou conexões de baixa largura de banda—seu conteúdo permaneça acessível e significativo para todos os usuários.

Sem o texto alternativo adequado, você corre o risco de não apenas tornar seu site inacessível para visitantes, mas também potencialmente violar leis de acessibilidade como a Americans with Disabilities Act (ADA), o que pode resultar em multas ou outras consequências legais. Leis semelhantes são encontradas em toda a União Europeia, Canadá, a República da Coreia, e Austrália—só para citar alguns. Se você está tentando defender uma experiência online equitativa para sua equipe, este é um ótimo lugar para começar.  

Quer aprender mais sobre como construir uma comunidade online inclusiva? Aqui estão alguns recursos para te ajudar a começar: 

Otimização para mecanismos de busca (SEO)

Os robôs de mecanismos de busca extraem vários detalhes-chave de uma imagem, incluindo seu nome de arquivo, legendas, título e texto alternativo. Dentre esses, o texto alternativo é o mais importante para ajudar os mecanismos de busca a entender o assunto da imagem dentro do conteúdo geral da página. Essa informação trabalha junto com o outro conteúdo da página para melhorar os algoritmos dos mecanismos de busca, aumentar suas classificações e direcionar mais tráfego para seu site.

Ao escrever texto alternativo, busque descrições claras e significativas que se encaixem naturalmente no conteúdo da página. Incorpore palavras-chave de forma ponderada e, definitivamente, resista à tentação de exagerar—encher de palavras-chave não apenas interrompe a experiência do usuário, mas também pode resultar em penalizações dos mecanismos de busca, considerando seu site como spam. 

Não está familiarizado com o enchimento de palavras-chave (keyword stuffing)? O enchimento de palavras-chave é sobre enfiar o máximo de palavras-chave possíveis na tentativa de aumentar as classificações nas páginas de resultados dos mecanismos de busca. Isso não funciona e muitas vezes o “tiro sai pela culatra”. Aqui está um exemplo:

Um exemplo de uma imagem com texto alternativo especificado.
Foto de Tuqa Nabi em Unsplash.

Texto alternativo recheado de palavras-chave (não recomendado): 

alt=”Gatinho fofo brincando com um novelo de lã, gatinho adorável, gatinho peludo, gatinho brincalhão, imagem de gatinho fofo, gatinho à venda, fotos de gatinhos.”

Um texto alternativo bem escrito pode tanto melhorar a acessibilidade quanto apoiar sua estratégia de SEO. Use seu bom senso e mantenha seus visitantes (humanos) do site em mente. 

Como saber quais imagens precisam de texto alternativo e como escrevê-lo

Depois de tudo isso, você pode ficar surpreso ao saber que nem todas as imagens requerem texto alternativo. Na verdade, torna-se uma experiência exaustiva para alguns usuários com leitores de tela suportar textos alternativos vagos aplicados a imagens que não oferecem nenhum valor. Felizmente para nós, o W3 categorizou imagens da web e ofereceu algumas dicas sobre como tratar imagens dentro de cada categoria.  

Aqui está como escrever o tipo certo de texto alternativo dependendo do que sua imagem representa:  

Imagens informativas: Estas são as imagens mais comuns encontradas em sites e incluem fotos, imagens ou ilustrações que representam conceitos ou informações. Seu texto alternativo deve dar uma descrição curta que transmita o significado essencial da imagem. 

Outro exemplo de uma imagem com texto alternativo especificado para ajudar os usuários a entender o conteúdo e o contexto de uma imagem.

Por exemplo, esta imagem ilustra todas as integrações disponíveis com o P2 da Automattic, mas essas integrações não são nomeadas no conteúdo acompanhante. É importante aqui que o texto alternativo forneça essa informação para visitantes que podem não ser capazes de ver ou carregar a imagem. Deve parecer algo assim: 

alt="Logos das integrações disponíveis do P2: Crowdsignal, Figma, Twitter, GitHub, YouTube, Vimeo, Google Calendar e Loom"

Imagens decorativas: Se uma imagem está apenas lá para parecer bonita e não adiciona nenhuma informação importante, use um atributo alt nulo (alt=””). Isso informa as tecnologias assistivas para ignorá-la.  

Imagens funcionais: Se uma imagem funciona como um botão ou link, o texto alternativo deve explicar o que ela faz—não como ela se parece. 

Por exemplo, o texto alternativo para um ícone de vídeo pode dizer “Assista a este vídeo sobre abelhas hibernando no Vimeo.”  

Imagens de texto: Se a imagem contém texto legível (como uma imagem com uma citação ou um logotipo), o texto alternativo deve incluir as mesmas palavras.

Imagens complexas: Gráficos, tabelas ou diagramas precisam de textos alternativos mais detalhados para descrever os dados ou informações que apresentam. Você pode até mesmo incluir um link para uma descrição mais longa.  

Grupos de imagens: Se várias imagens trabalham juntas para transmitir uma ideia, o texto alternativo de uma das imagens deve cobrir toda a mensagem. Um bom exemplo disso seriam fotos de processo para uma receita ou outro tutorial que inclua etapas. 

Mapas de imagem: Para imagens com áreas clicáveis, forneça texto alternativo que explique o propósito geral da imagem e inclua texto alternativo para cada seção clicável descrevendo para onde ela leva. 

Não tem certeza de como categorizar uma imagem? Confira o Tutorial de Imagens do W3 para ajuda. 

Embora não haja diretrizes oficiais de comprimento, geralmente é recomendado manter o texto alternativo com menos de 140 caracteres. Descrições mais longas podem se tornar tediosas quando lidas por leitores de tela. Seja descritivo, mas mantenha a concisão—este não é o lugar para floreios criativos.

Ferramentas para garantir que suas imagens incluam texto alternativo

Relatório de Acessibilidade do Chrome

O relatório de acessibilidade do Chrome é um recurso fácil de usar integrado diretamente ao seu navegador, quando você deseja testar rapidamente uma única página do seu site. 

Ferramentas de Texto Alternativo

As Ferramentas de Texto Alternativo da equipe NerdPress são um plugin gratuito e leve que gera um arquivo CSV das imagens usadas em seu conteúdo, junto com seus atributos alt.

Uma vez que a varredura esteja completa (é muito rápida!), você pode abrir o arquivo CSV no aplicativo de planilha de sua escolha. Lá você pode rapidamente identificar imagens que têm atributos alt ausentes e verificar se há alguma que precise de melhorias. O arquivo também inclui links para editar os posts onde as imagens aparecem, tornando rápido e fácil atualizar seus atributos alt.

Equalize Digital Accessibility Checker

Este plugin freemium do WordPress da Equalize Digital vai além do texto alternativo para garantir que seu site seja acessível a uma ampla gama de visitantes. Se você e sua equipe estão comprometidos em tornar seu conteúdo acessível, este é um ótimo recurso. 

A Equalize Digital também administra um grupo no Facebook e organiza um encontro virtual mensal para desenvolvedores, designers e usuários do WordPress interessados em aprender mais sobre como criar sites acessíveis que possam ser usados por pessoas de todas as habilidades.

Texto alternativo pode parecer um pequeno detalhe, mas desempenha um grande papel em tornar a internet mais inclusiva e amigável para o usuário. Ao escrever textos alternativos pensativos e descritivos, você não está apenas melhorando a acessibilidade—você também está otimizando seu conteúdo para mecanismos de busca e aprimorando a experiência geral do usuário. Com a abordagem e as ferramentas certas, adicionar texto alternativo pode ser um passo fácil em direção a um site mais acessível e amigável para SEO.

Comece um blog no WordPress.com

Comece a otimizar seu conteúdo com um blog hospedado no WordPress.com.

Escolha o plano que funciona melhor para seus Negócios, e deixe que nós gerenciemos o resto. Com qualquer plano do WordPress.com, você obtém todos os benefícios de um hosting WordPress gerenciado rápido e seguro.