Técnicas para as WCAG 2.0

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

-

C9: Utilizar CSS para incluir imagens decorativas

Aplicabilidade

Qualquer tecnologia que possa utilizar CSS para incluir imagens.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo para adicionar imagens meramente decorativas e imagens utilizadas na formatação visual para conteúdo da Web, sem necessitar de marcações adicionais no conteúdo. Isto permite às tecnologias de apoio ignorarem o conteúdo não textual. Alguns agentes de utilizador podem ignorar ou desactivar o CSS a pedido do utilizador, para que as imagens em plano de fundo incluídas com CSS simplesmente "desapareçam" e não interfiram com as definições de visualização, tais como tipos de letras ampliados ou definições de alto contraste.

As imagens em plano de fundo podem ser incluídas com as seguintes propriedades CSS:

Nota: Esta técnica não é apropriada para qualquer imagem que transmita informação ou forneça funcionalidade, nem para qualquer imagem cuja intenção principal seja criar uma experiência sensorial específica.

Exemplos

Exemplo 1: Imagem em plano de fundo para uma página HTML

A folha de estilo para uma página Web especifica uma imagem em plano de fundo para toda a página.

Código Exemplo:

              …
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
…

Exemplo 2: Imagem em plano de fundo com CSS para rollover de imagens

A folha de estilo para uma página Web utiliza a propriedade CSS background para criar um efeito rollover decorativo quando o utilizador coloca o ponteiro do rato sobre um link.

Código Exemplo:

a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
   text-decoration: none;
}

Exemplo 3: Imagens em plano de fundo com CSS para criar cantos arredondados em separadores ou outros elementos

A folha de estilo para uma página Web utiliza a propriedade CSS background para criar cantos arredondados em elementos.

Código Exemplo:

…
<style type="text/css">
 div#theComments { width:600px; }
 div.aComment { background: url('images/middle.gif') repeat-y left top; 
 margin:0 0 30px 0; }
 div.aComment blockquote { background: url('images/top.gif') no-repeat left top; 
 margin:0; padding:8px 16px; }
 div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top; 
 margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
 <div class="aComment">
  <blockquote>
   <p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
  </blockquote>
  <div class="submitter">
   <p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
  </div>
 </div>
 <div class="aComment">
 …
 </div>
</div>
…

Exemplo 4: Substituição de imagens utilizada para melhorar o aspecto visual de um cabeçalho

No seguinte exemplo, é utilizada uma imagem decorativa para substituir o texto no elemento heading.

Código Exemplo:

<style type="text/css">
h3#about {
width: 480px;
height: 34px;
position: relative;
}

h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
 ...
<h3 id="about" title="About example.com"> <span></span>About example.com </h3> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique se existem imagens decorativas.

  2. Verifique se são incluídas com CSS.

Resultados Esperados