Imagens SVG: uma opção acessível para todos

Felizmente, existem maneiras de tornar suas imagens SVG acessíveis a todos. Ao adicionar texto alternativo às suas imagens SVG, você pode garantir que todos possam acessar e compreender seus recursos visuais.

Este guia fornecerá as informações necessárias para garantir que suas imagens SVG sejam acessíveis a todos. Abordaremos os princípios básicos da adição de texto alternativo às suas imagens SVG, bem como os benefícios de fazer isso. Vamos começar.

O que são imagens SVG?

As imagens SVG são criadas combinando imagens com código que cria os elementos visuais.

As imagens SVG são frequentemente chamadas de “SVGs estáticos”. Por isso, as imagens são estáticas, o que significa que o código é a única coisa que agrega o visual.

Diferentemente da interatividade do HTML, o SVG não utiliza tags como “a” ou “botão” para criar elementos visuais. Em vez disso, os elementos visuais são criados com código. Isso significa que elementos visuais complexos podem ser criados com uma linguagem de marcação simples. Por exemplo, você pode criar uma bola que rola por um caminho.

Por que as alternativas de texto são importantes para imagens SVG?

Se você estiver projetando um site, aplicativo ou painel, desejará que seu conteúdo seja acessível ao maior número de pessoas possível.

À medida que aumenta o número de utilizadores que dependem de tecnologias de apoio, como leitores de ecrã, a necessidade de uma Web acessível torna-se ainda mais crucial.

E embora a acessibilidade seja importante para todos os sites, é especialmente importante para o conteúdo visual. A dificuldade de leitura de conteúdo somente texto pode dificultar o acesso e a compreensão.

Ao projetar para acessibilidade, você precisa garantir que qualquer pessoa possa usar o conteúdo. Fornecer texto alternativo às imagens permite que os usuários ouçam o conteúdo com programas que leem texto em voz alta, como leitores de tela.

Você não deseja que parte do seu conteúdo fique ilegível para alguns usuários devido a uma deficiência. Fornecer alternativas de texto para suas imagens pode permitir que todos desfrutem de seu conteúdo visual.

Como adicionar alternativas de texto a imagens SVG usando o método “title” + “descr”.

1. Use a tag “title”: assim como acontece com as imagens tradicionais, as imagens SVG também devem ter uma alternativa textual. A tag “title” é usada para fornecer uma descrição de texto alternativa para o conteúdo SVG. Além disso, essa tag pode ser lida na maioria dos navegadores e dispositivos assistivos, por isso é uma boa prática incluí-la em todas as imagens SVG.
2. Use a tag “desc”: A tag “desc” é usada para fornecer uma descrição mais detalhada do conteúdo SVG. Essa tag não é lida pela maioria dos navegadores e dispositivos assistivos, mas pode ser útil para fornecer informações adicionais sobre a imagem.
3. Use texto alternativo conciso e descritivo: assim como acontece com imagens tradicionais, é importante fornecer texto alternativo conciso e descritivo para imagens SVG. O texto alternativo deve descrever o conteúdo e a função da imagem de forma clara e concisa.

Vantagens de adicionar alternativas de texto a imagens SVG

Um dos principais motivos para adicionar alternativas de texto às suas imagens SVG é garantir que qualquer pessoa possa acessar e compreender seus elementos visuais.

Pessoas com deficiência visual, por exemplo, podem não conseguir ler conteúdo somente de texto, o que pode dificultar a navegação na web e o acesso ao conteúdo.

No entanto, se você adicionar alternativas de texto ao seu conteúdo visual, esses usuários poderão ouvir o que você tem a dizer. Isso permite que todos aproveitem o conteúdo e estejam totalmente presentes em seu ambiente.

Dicas para inserir imagens SVG acessíveis e escrever suas alternativas de texto de maneira eficaz.

Ao inserir imagens SVG e suas respectivas alternativas textuais, você deve garantir que suas alternativas sejam eficazes seguindo algumas orientações.

1.  Use títulos claros para tornar o conteúdo mais acessível. Isso pode ajudar pessoas com baixa visão ou baixo nível de alfabetização a ler seu conteúdo.
2. Reduza o texto o máximo possível, mas sem interferir na simples compreensão. Muito texto pode ser difícil de ler e entender, enquanto pouco texto pode fazer com que os elementos visuais pareçam incompletos.
3. Certifique-se de que os elementos visuais estejam claros.
4. Evite usar muitas imagens. Isso pode dificultar a compreensão das informações.
5. Evite usar muitas cores em imagens SVG. Isso pode confundir usuários com deficiência visual.
6. Evite usar muitos símbolos em suas imagens SVG. Isso pode confundir os usuários.
7. Evite usar palavras enganosas.

Exemplos de alternativas textuais eficazes para imagens SVG

Tal como acontece com muitos tipos de conteúdo, você pode escrever alternativas de texto eficazes para suas imagens SVG com base no conteúdo visual da própria imagem SVG.

Neste exemplo, a imagem SVG mostra nosso logotipo da Web Acessível. As alternativas de texto para o elemento visual neste exemplo seriam “Seu logotipo de site acessível.

A imagem SVG mostra simplesmente o nosso logotipo, para que possamos inserir um “título” correspondente e uma tag “descr” que complemente o referido título. Por exemplo:

Veja a Caneta
Bee SVG acessível usando da Taller Agencia (@webmastertalleragencia)
em CodePen.

Conclusão

As imagens SVG estão se tornando uma forma cada vez mais popular de adicionar apelo visual a páginas e aplicativos da web.

Embora esses gráficos vetoriais sejam visualmente atraentes, eles podem não ser acessíveis a todos os usuários, deixando de fora aqueles que dependem de leitores de tela.

Felizmente, existem maneiras de tornar suas imagens SVG acessíveis a todos. Ao adicionar texto alternativo às suas imagens SVG, você pode garantir que todos possam acessar e compreender seus recursos visuais.

Se você tiver dúvidas sobre acessibilidade na web, entre em contato conosco e resolveremos todas as suas dúvidas a esse respeito.