E a Acessibilidade? | Arquitetura CSS: descomplicando os problemas

2
respostas

por José André

| 17.4k xp | 1 posts

Olá devs!

No decorrer da trilha de Front-End, aprendemos sobre Acessibilidade Web e quanto é importante tornarmos o nosso código acessível a todos. Nessa vídeo aula aprendemos que não é uma boa prática colocar uma imagem diretamente no HTML utilizando a tag <img> e sim incorpora-la a uma <div> e adicionar a imagem no código CSS . Mas como que posso tornar essa imagem legível a um leitor de tela se a tag <div> não suporta um atributo alt e nem ao menos é interpretada como uma imagem/ilustração para o leitor de tela?

2 respostas

por Douglas de Oliveira Lima

| 137k xp | 47 posts

25/02/2022

Olá!

As imagens que possuem relevância a nível de conteúdo devem sim serem adicionadas com a tag img e ter a propriedade alt bem definida para questões de acessibilidade e SEO. As imagens adicionadas como background ou pseudo-elemento são imagens que, para um usuário com baixa ou nenhuma visão, não possuem relevância.

Resumindo, iconografias seguidas por um texto (Ex: ícone de casinha antes de um texto "home") e backgrounds para fins estéticos não precisam de um atributo alt, pois não são relevantes para quem acessa por um leitor de tela.

por Matheus Santos Gomes

| 267.9k xp | 294 posts

27/02/2022

Olá Douglas,

Muito interessante seu comentário, também havia ficado na dúvida. Achei bem legal essa divisão entre o que tem relevância para SEO e acessibilidade colocamos no HTML e o que é apenas estético colocamos no CSS.