Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

F3: Falha do Critério de Sucesso 1.1.1 devido àutilização de CSS para incluir imagens que transmitem informações importantes

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta falha está relacionada com:

Descrição

A propriedade background-image (imagem de fundo) de CSS fornece uma forma de incluir imagens no documento com CSS sem qualquer referência no código HTML. A propriedade background-image de CSS foi concebida para fins meramente decorativos e não é possível associar alternativas em texto a imagens que sejam incluídas através de CSS. As alternativas em texto são necessárias para as pessoas que não conseguem ver imagens que transmitem informações importantes. Por conseguinte, é uma falha utilizar esta propriedade para adicionar imagens para transmitir informações importantes.

Nota: A incorporação de informações numa imagem de fundo também pode originar problemas para as pessoas que utilizam fundos alternativos para aumentar a legibilidade e para os utilizadores do modo de alto contraste em alguns sistemas operativos. Estes utilizadores perderiam as informações na imagem de fundo devido à falta de texto alternativo.

Exemplos

Exemplo de Falha 1:

No exemplo seguinte, parte do conteúdo está incluído numa imagem que é apresentada apenas por CSS. Neste exemplo, a imagem TopRate.png é uma imagem de 180 por 200 pixéis que contém o texto: "Variável Normal 19,3% APR".

Código Exemplo:

                                          The CSS contains: 
p#bestinterest {
  padding-left: 200px;
  background: transparent url(/images/TopRate.png) no-repeat top left;
}

É utilizado neste excerto:

Código Exemplo:

                                          
<p id="bestinterest">
  Where else would you find a better interest rate?
</p>

Exemplo de Falha 2:

Um fornecedor de livros utiliza imagens de fundo para fornecer ícones em oposição a uma lista de títulos de livros para indicar se são novos, limitados e se existem ou não em armazém.

O CSS contém:

Código Exemplo:

ul#booklist li {
  padding-left: 20px;
}

ul#booklist li.new {
  background: transparent url(new.png) no-repeat top left; 
}
                            
ul#booklist li.limited {
  background: transparent url(limited.png) no-repeat top left; 
}
                            
ul#booklist li.instock {
  background: transparent url(instock.png) no-repeat top left; 
}

ul#booklist li.outstock {
  background: transparent url(outstock.png) no-repeat top left; 
}

É utilizado neste excerto:

Código Exemplo:

<ul id="booklist">
  <li class="new">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  ...
  <li class="outstock">A book you actually want </li>
</ul>

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique todas as imagens adicionadas ao conteúdo através de CSS.

  2. Verifique se as imagens não transmitem informações importantes.

  3. Se uma imagem transmitir informações importantes, as informações são fornecidas às tecnologias de apoio e também estão disponíveis quando a imagem CSS não for apresentada.

Resultados Esperados