Técnicas para as WCAG 2.0

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

-

C6: Colocar conteúdo baseado em marcação estrutural

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como o aspecto visual pode ser melhorado através de folhas de estilo, mantendo uma apresentação com significação quando as folhas de estilos não são utilizadas. Ao utilizar-se as propriedades de posicionamento CSS2, o conteúdo pode ser visualizado em qualquer posição na janela do utilizador. A utilização de elementos estruturais garante que o significado do conteúdo possa ser determinado quando a estilização não está disponível.

Exemplos

Exemplo 1

Neste exemplo, a marcação estrutural (listas de definições) foi aplicada ao conteúdo. Utilizou-se o CSS para estilizar o conteúdo num formulário em colunas. Cada classe coloca o conteúdo em colunas e as margens são definidas para 0, para se sobreporem ao comportamento predefinido de agentes de utilizador, de modo a apresentar as listas de definições HTML com o elemento DD com avanço.

Este é o conteúdo a ser apresentado:

Código Exemplo:

              <div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
    </dt>
  </dl>
 </div>

Este é o CSS que coloca e estiliza os elementos apresentados acima:

Código Exemplo:

              .item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }

Quando se aplicam as folhas de estilo, os dados são apresentados em duas colunas com os títulos "Produtos" e "Localizações”. Quando não se aplicam as folhas de estilo, o texto aparece numa lista de definições que mantém a estrutura e a ordem de leitura.

Recursos

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

Testes

Procedimento

Para conteúdo que utilize CSS para posicionamento.

  1. Remova a informação sobre o estilo do documento ou desactive a utilização de folhas de estilo no agente de utilizador.

  2. Verifique se as relações estruturais e o significado do conteúdo são mantidos.

Resultados Esperados