Técnicas para as WCAG 2.0

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

-

F87: Falha do Critério de Sucesso 1.3.1 devido àintrodução de conteúdo não decorativo utilizando pseudo-elementos

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta falha está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

:before e :after não são suportados pelo IE7 e anterior.

Descrição

Os pseudo-elementos :before e :after de CSS especificam a localização do conteúdo antes e depois do conteúdo em árvore do documento de um elemento. A propriedade content, em conjunto com estes pseudo-elementos, especifica o que é introduzido. Para os utilizadores que necessitam de personalizar ou desactivar as informações sobre o estilo para ver o conteúdo de acordo com as suas necessidades, as tecnologias de apoio podem não conseguir aceder às informações introduzidas utilizando CSS. Por conseguinte, a utilização destas propriedades para introduzir conteúdo não decorativo representa uma falha.

Exemplos

Exemplo de Falha 1

No exemplo seguinte, são utilizados :before e :after para indicar alterações do orador e para inserir aspas num guião.

O CSS contém:

Código Exemplo:

                                                     p.jim:before {  content: "Jim: " }
p.mary:before { content: "Mary: " }

q:before { content: open-quote }
q:after  { content: close-quote }

É utilizado neste excerto:

Código Exemplo:

                                                     <p class="jim">
 <q>Do you think he's going to make it?</q>
</p>
<p class="mary">
 <q>It's not looking good.</q>
</p>

Exemplo de Falha 2

Neste exemplo, é utilizado :before para distinguir factos de opiniões.

O CSS contém:

Código Exemplo:

                                                     p.fact:before { content: "Fact: "; font-weight: bold; }
 p.opinion:before { content: "Opinion: "; font-weight: bold; }

É utilizado neste excerto:

Código Exemplo:

                                                     <p class="fact">
 The defendant was at the scene of the crime when it occurred. 
</p>
<p class="opinion">
 The defendant committed the crime. 
</p>

Recursos

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

Testes

Procedimento

  1. Verifique todo o conteúdo introduzido através da utilização dos pseudo-elementos :before e :after e da propriedade content .

  2. Verifique se o conteúdo é decorativo.

  3. Se o conteúdo introduzido não for decorativo, verifique se as informações são fornecidas às tecnologias de apoio e se também estão disponíveis quando o CSS é desactivado.

Resultados Esperados