Técnicas para as WCAG 2.0

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

-

F1: Falha do Critério de Sucesso 1.3.2 devido àalteração do significado do conteúdo colocando informações com CSS

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta falha está relacionada com:

Descrição

Esta técnica descreve a condição de falha que resulta quando o CSS, em vez da marcação estrutural, é utilizado para modificar a disposição visual do conteúdo, e a disposição modificada altera o significado do conteúdo. Mediante a utilização de propriedades de posicionamento de CSS2, o conteúdo pode ser apresentado em qualquer posição na janela do utilizador. A ordem pela qual os itens são apresentados num ecrã pode ser diferente da ordem em que se encontram no documento de origem. As tecnologias de apoio dependem do código fonte ou de outra ordem determinada de forma programática para apresentar o conteúdo na sequência correcta. Assim, é importante não depender de CSS para posicionar visualmente o conteúdo numa sequência específica se esta sequência resultar num significado que seja diferente da ordem de leitura determinada de forma programática.

Exemplos

Exemplo de Falha 1

O exemplo seguinte demonstra como o CSS foi utilizado erradamente para criar um conjunto de colunas. Além disso, o texto é apresentado no browser numa ordem diferente da ordem da marcação.

Neste exemplo, é definida uma classe para cada objecto que esteja a ser posicionado. Quando são aplicadas folhas de estilo, o texto aparece em duas colunas. Os elementos da classe "menu1" (Produtos) e "menu2" (Localizações) aparecem como cabeçalhos de coluna. "Telefones, Computadores e Leitores de MP3 Portáteis" são indicados sob Produtos e "Idaho" e "Wisconsin" são indicados sobre Localizações (repare na ordem diferente de Idaho e Wisconsin na ordem do código fonte).

Como não foram utilizados elementos estruturais apropriados, quando as folhas de estilo não são aplicadas, todo o texto aparece numa linha na ordem de origem, "Produtos Localizações Telefones Computadores Leitores de MP3 Portáteis Wisconsin Idaho."

Este é o conteúdo HTML:

Código Exemplo:

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

Estes são os estilos para o conteúdo acima:

Código Exemplo:

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

Uma solução melhor para este conteúdo seria utilizar elementos com mais significação, tais como uma tabela ou uma lista de definições.

Recursos

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

Testes

Procedimento

Para conteúdo que utilize CSS para posicionamento:

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

  2. Verifique se a ordem de leitura do conteúdo está correcta e o significado do conteúdo é mantido.

Resultados Esperados