Acessibilidade

Além de adicionar textos para representar as imagens, é necessário também analisar se as figuras existentes no (X)HTML são puramente decorativas ou não.

Para figuras puramente decorativas, ao invés de adicionar texto referente a elas, é melhor excluí-las do (X)HTML e inseri-las somente através do CSS. Afinal de contas, o objetivo do CSS é exatamente esse, estilizar e decorar o documento (X)HTML, enquanto que o objetivo do (X)HTML é somente especificar conteúdo.

Quanto melhor essa separação entre conteúdo e estilo, melhor para acessibilidade e para a manutenção das páginas. Sendo assim, você pode usar o atributo background e list-style-image, respectivamente, para adicionar uma imagem ao plano de fundo da página (ou de um elemento) e para estilizar o marcador dos itens de uma lista.Veja um exemplo na Figura 2.

Infelizmente, nem todos os browsers se comportam da mesma maneira.Veja, na Figura 3, como esse mesmo html é apresentado no Mozilla e no IE8. No caso do Google Chrome, a figura é posicionada o mais à direita e abaixo possível, e isso varia de acordo com o tamanho da janela.Enquanto no Mozilla, a figura é posicionada abaixo de todo o conteúdo, independente do tamanho da janela.No IE8, a figura nem é mostrada.