Alternativa textual para imagens decorativas

Se o conteúdo não textual for meramente decorativo, se for utilizado apenas para formatação visual, ou se não for exibido aos usuários, então esse conteúdo não textual deve ser implementado de uma forma que possa ser ignorado pelas tecnologias assistivas. Isso pode ser feito de duas principais formas:

Exemplo de imagem decorativa inserida por CSS

Essa técnica tem por objetivo fornecer um mecanismo que permita adicionar imagens decorativas ou utilizadas para formatação visual no conteúdo Web, sem exigir marcação adicional no conteúdo. Dessa forma, as imagens não são interpretadas pelos recursos de tecnologia assistiva.

Imagens de fundo podem ser incluídas com as seguintes propriedades CSS:

  • background;
  • background-image;
  • content, combinado com os pseudo-elementos ::before e ::after;
  • list-style-image.

Exemplo decorativa inserida via CSS

Código fonte do exemplo:

Exemplo de imagem decorativa inserida no HTML

O objetivo desta técnica é mostrar como imagens decorativas podem ser inseridas no HTML de forma que sejam ignoradas pelos recursos de tecnologia assistiva. Para que isso ocorra, é preciso que a imagem tenha o atributo alt vazio (alt="" - sem espaço entre as aspas) e não seja incluído o atributo title.

Nota: Ter atributo alt vazio não é o mesmo que não ter atributo alt. Atributo alt vazio significa alt="".

O atributo alt vazio indica aos softwares de tecnologia assistiva que aquela imagem pode ser ignorada com segurança e sem prejuízo para a compreensão do conteúdo da página. Além disso, como o atributo title é interpretado por recursos de tecnologia assistiva, se o objetivo é que a imagem seja ignorada, este atributo não deve ser incluído.

Exemplo de imagem decorativa no HTML

Código fonte do exemplo: