27.11.2024

Adicionando Tags Alt para Imagens de Fundo em CSS

Resumo Rápido

Infelizmente, imagens de fundo em CSS não suportam o atributo alt, ao contrário do elemento <img>. No entanto, para melhorar a acessibilidade, você pode utilizar o atributo aria-label:

<div style="background:url('imagem.jpg');" aria-label="Descrição da imagem"></div>

Assim, você fornece uma descrição textual para tecnologias assistivas, mas isso não será exibido visualmente. É uma solução inteligente, você não acha?

Em Resumo (TL;DR)

O atributo alt não se aplica a imagens de fundo em CSS, mas temos alternativas:

1. Utilize ARIA.
2. Use o elemento <img> com alt quando a imagem tiver valor.
3. Aplique o atributo title para dicas de ferramenta.
4. "Oculte" o elemento <img>.

Onde e Quando: Atributo alt e Imagens de Fundo em CSS

Onde você pode encontrar alt para imagens de fundo em CSS? Em lugar nenhum. Por quê? As imagens de fundo em CSS são usadas exclusivamente para propósitos de estilo, portanto, não há lugar para alt. No entanto, vamos discutir isso com mais detalhes.

ARIA e img: Novos Aliados Confiáveis

Os papéis ARIA e o atributo alt no elemento img vêm em nosso auxílio quando é necessário fornecer um texto acessível para imagens de fundo.

<!-- ARIA atua aqui como um cavaleiro em armadura brilhante -->
<div style="background:url('icone.png');" role="img" aria-label="Descrição do ícone"></div>

<!-- O elemento `img` é utilizado quando a imagem carrega significado -->
<img src="imagem-crítica.jpg" alt="Descrição breve da imagem">

Título, <img> Oculto, Imagens Decorativas ou de Conteúdo?

Sua imagem pode ser decorativa ou conter informações importantes. Se seu propósito é criar uma atmosfera, uma imagem de fundo em CSS é adequada. No entanto, se ela carrega significado, é preferível usar <img> com um atributo alt.

Considere usar o title para dicas de ferramenta e um <img> oculto que não é exibido visualmente, mas oferece descrições alternativas.

Visualização

Vamos usar emojis para clareza:

🖼 < - Elemento HTML  
🏞 < - Imagem de fundo em CSS (infelizmente, sem o atributo alt)

O problema surge quando a imagem de fundo desaparece:

<div style="border: 2px solid #000; width: 100px; height: 100px;">
  <!-- Onde está a imagem? -->
</div>

Vemos apenas uma moldura vazia que não sabe que imagem deve ser exibida:

🖼 < - 🤷‍♂️ (Onde está a imagem?)

Mas e se adicionarmos um espaço reservado com uma descrição textual?

<div style="border: 2px solid #000; width: 100px; height: 100px;">
  <!-- Placeholder para indicar o que deve ser exibido -->
  Descrição da imagem
</div>

Agora a moldura parece mais informativa:

🖼 < - 🆘 (Deveria haver uma descrição aqui!)

Isso ilustra a importância de ter conteúdo alternativo ao usar imagens de fundo em CSS.

SEO e Otimização de Performance

SEO funciona melhor com tags <img> e o atributo alt; é como um doce para aqueles que têm uma queda por doces. Para imagens de fundo em CSS, você pode:

• Adicionar um <img> oculto com um atributo alt.
• Fornecer uma descrição textual para acessibilidade.

Lembre-se de considerar o desempenho para garantir um carregamento rápido da página.

Melhores Práticas para o Uso de ARIA e a Importância do Elemento IMG

• Não abuse do ARIA. Utilize-o apenas quando o HTML normal não for suficientemente informativo.
• Sempre tenha alternativas para imagens de fundo, como o elemento <img>.
• Busque tornar suas imagens o mais compreensíveis e acessíveis possível.

Recursos Úteis

1. Técnicas W3C para o atributo alt
2. Guia MDN sobre Imagens de Fundo
3. Tratamento de Pseudo-elementos no CSS-Tricks
4. A Importância do Texto Alternativo no WebAIM
5. Discussão no Stack Overflow: quando escolher IMG em vez de uma imagem de fundo CSS
6. Checklist de Acessibilidade do A11Y Project para imagens e animações

Video

Navigation