Técnicas para as WCAG 2.0

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

-

F2: Falha do Critério de Sucesso 1.3.1 devido àutilização de alterações na apresentação do texto para transmitir informações sem utilizar a marcação ou texto apropriados

Aplicabilidade

Todas as tecnologias que suportem imagens ou marcação de apresentação.

Esta falha está relacionada com:

Descrição

Este documento descreve uma falha que ocorre quando uma alteração no aspecto do texto transmite um significado sem utilizar a marcação semântica apropriada. Esta falha também se aplica a imagens que não estejam incluídas na marcação semântica apropriada.

Exemplos

Exemplo de Falha 1: Utilizar CSS para estilizar o elemento p de modo a parecer um cabeçalho

O autor pretendia criar um cabeçalho, mas não queria o aspecto do cabeçalho HTML predefinido. Assim, utilizou CSS para estilizar o elemento P de modo a parecer um cabeçalho e denominou-o como tal, mas falhou na utilização do elemento heading HTML correcto. Por conseguinte, a Tecnologia de Apoio não o conseguia distinguir como um cabeçalho.

Código Exemplo:

                                          <style type="text/css">
 .heading1{
        font-family: Times, serif;
        font-size:200%;
        font-weight:bold;
 }
 </style>

 <p class="heading1">Introduction</p>
 <p>This introduction provides detailed information about how to use this 
 ........
 </p>

Nota: Neste caso, a abordagem correcta seria utilizar CSS para estilizar o elemento H1 em HTML.

Exemplo de Falha 2: Imagens de texto utilizadas como cabeçalhos, em que as imagens não estão assinaladas com marcas de cabeçalho

Capítulo1.gif é uma imagem das palavras, "Capítulo Um" no tipo de letra Garamond com um tamanho de 20 pixéis. Esta é uma falha, uma vez que, no mínimo, o elemento img deveria ser anexado num elemento header. Uma melhor solução seria eliminar a imagem e anexar o texto num elemento header que tenha sido estilizado utilizando CSS.

Código Exemplo:

<img src="Chapter1.gif" alt="Chapter One">
 
<p>Once upon a time in the land of the Web.....
</p>

Exemplo de Falha 3: Utilizar CSS para realçar visualmente uma frase ou palavra sem transmitir esse realce de forma semântica

O seguinte exemplo falha porque as informações transmitidas utilizando a propriedade font-weight (espessura do tipo de letra) de CSS para alterar para um tipo de letra a negrito não são transmitidas através de marcação semântica ou indicadas de forma explícita no texto.

Esta é uma classe CSS para especificar o negrito:

Código Exemplo:

.yell {
  font-weight:bold;
  text-transform: uppercase;
}

E este é o HTML correspondente:

Código Exemplo:

<p>
 "I said, <span class="yell">no</span>, not before dinner!", 
 was the exasperated response when Timmy asked his mother for the 
 fourth time for an ice cream cone. 
 </p>

Recursos

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

Testes

Procedimento

  1. Para imagens de texto:

    1. Verifique se são utilizadas algumas imagens de texto para transmitir informações estruturais do documento.

    2. Verifique se é utilizada a estrutura semântica correcta (por ex., cabeçalhos HTML) com o texto para transmitir as informações.

  2. Para texto estilizado que transmita informações:

    1. Verifique se existe algum texto estilizado que transmita informações estruturais.

    2. Verifique se, além da estilização, é utilizada a estrutura semântica correcta com o texto para transmitir as informações.

Resultados Esperados