Uma das formas mais comuns de melhorar a acessibilidade na web é inserindo alternativas textuais em imagens, para que pessoas com deficiência visual possam acessar o conteúdo sem precisar visualizá-lo.
A acessibilidade na Web é uma questão cada vez mais relevante na nossa sociedade, uma vez que muitas pessoas com deficiências físicas ou cognitivas dependem de tecnologias de apoio para navegar na Internet; para que um site seja acessível, uma série de requisitos devem ser atendidos. A começar pela inserção correta de alternativas textuais.
Quais são as alternativas textuais em imagens?
Alternativas de texto, também conhecidas como atributos “alt”, são descrições escritas que são adicionadas às imagens para que os usuários que não podem vê-las possam compreender seu conteúdo. Essas descrições são lidas em voz alta por leitores de tela, que convertem o conteúdo visual em áudio.
A inserção de alternativas textuais às imagens é muito importante. Pois permitem que pessoas com deficiência visual compreendam o conteúdo da web em sua totalidade. Sem essas descrições, as imagens ficam inacessíveis e o conteúdo é perdido para um grande número de usuários.
Por que eles são tão importantes?
Além disso, alternativas textuais também são importantes para melhorar a experiência do usuário, não apenas para quem tem deficiência visual. As descrições podem ajudar os usuários a entender melhor o conteúdo de uma imagem, mesmo que possam vê-la. Isto é especialmente útil nos casos em que a imagem é complexa ou não está diretamente relacionada ao texto ao redor.
A inclusão de alternativas textuais nas imagens também é importante do ponto de vista jurídico. Muitos países têm leis que exigem que os websites sejam acessíveis a pessoas com deficiência, e a falta de alternativas textuais às imagens pode ser considerada uma violação destas leis.
Como as alternativas textuais são inseridas nas imagens?
Imagens em formato “Img”:
Inserir alternativas textuais em imagens “img” é importante para garantir que pessoas com deficiência visual ou que utilizam leitores de tela possam compreender o conteúdo da mesma forma que pessoas que não possuem essas deficiências. Aqui estão algumas dicas para inserir alternativas textuais em imagens no formato “img”:
- Certifique-se de adicionar texto alternativo a todas as imagens de uma página. O texto alternativo, também conhecido como “texto alternativo”, deve ser uma descrição breve e precisa da imagem.
- Use o atributo “alt” no código HTML. O atributo “alt” permite adicionar o texto alternativo diretamente no código HTML da página da web, facilitando o acesso para pessoas que usam leitores de tela.
- Use o atributo “title” para fornecer informações adicionais sobre a imagem. O atributo “title” permite adicionar informações adicionais sobre a imagem, como o autor ou a fonte da imagem.
- Use imagens nos seguintes formatos: BMP, GIF, JPEG, PNG, SVG e WebP. Certifique-se de que o nome do arquivo de imagem descreve seu conteúdo de forma clara e concisa.
Imagens em formato “Fundo”
As imagens de fundo não possuem um atributo “alt” como as imagens normais e geralmente são de natureza decorativa, portanto não é necessário fornecer uma descrição alternativa para imagens neste formato.
Imagens em formato “SVG”:
Quanto à inserção de alternativas textuais em imagens com formato SVG:
- Use a tag
: assim como acontece com as imagens tradicionais, as imagens SVG também devem ter uma alternativa textual. A tag é usada para fornecer uma descrição de texto alternativa para 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. - Use a tag : A tag é 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.
- 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 claramente o conteúdo e a função da imagem.
Ícones em formato “ASCII”
Nossas recomendações para inserção de alternativas textuais em ícones no formato ASCII são:
- Insira uma classe “span” com o atributo “sr-only”:
Veja a Caneta
Sem título por Taller Agencia (@webmastertalleragencia)
em CodePen. - Aplique propriedades CSS para que apenas leitores de tela reconheçam este texto:
Veja a Caneta
Sem título por Taller Agencia (@webmastertalleragencia)
em CodePen. - Use uma descrição clara e concisa do ícone. A descrição deve ser detalhada o suficiente para que as pessoas possam entender o que o ícone representa, mas não tão detalhada a ponto de sobrecarregar.
Resumindo, inserir alternativas textuais às imagens é parte essencial da acessibilidade na web. Ele permite que pessoas com deficiência visual entendam o conteúdo que de outra forma não conseguiriam, melhora a experiência do usuário e cumpre as leis que exigem acessibilidade na web. Portanto, é importante garantir que todas as imagens de um site tenham alternativas textuais claras e descritivas para garantir uma experiência de usuário positiva e acessível para todos.
Se você tiver dúvidas sobre a inserção de alternativas textuais ou em relação à acessibilidade web, entre em contato conosco e resolveremos todas as suas dúvidas a esse respeito.
