Técnicas para as WCAG 2.0

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

-

C22: Utilizar CSS para controlar a apresentação visual do texto

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como o CSS pode ser utilizado para controlar a apresentação visual do texto. Isto permite aos utilizadores modificar, através do agente de utilizador, as características visuais do texto para cumprirem os seus requisitos. As características do texto incluem aspectos tais como tamanho, cor, família de tipos de letra e colocação relativa.

O CSS beneficia a acessibilidade essencialmente através da separação da estrutura do documento da apresentação. As folhas de estilo foram concebidas para permitir um controlo preciso - fora da marcação - do espaçamento entre caracteres, do alinhamento de texto, posicionamento de objectos na página, saída de áudio e de fala, características de tipos de letra, etc. Ao separar o estilo da marcação, os autores podem simplificar e limpar a marcação no conteúdo, tornando-o, ao mesmo tempo, mais acessível.

O texto dentro de imagens coloca vários problemas de acessibilidade, incluindo a incapacidade de:

É preferível utilizar texto real para a parte de texto destes elementos, e uma combinação de marcação semântica e folhas de estilo para criar a apresentação visual apropriada. Para que funcione eficazmente, escolha tipos de letra que devem estar disponíveis no sistema do utilizador e defina tipos de letra alternativos para utilizadores que poderão não dispor do primeiro tipo de letra especificado. As máquinas e os agentes de utilizador mais recentes fazem, muitas vezes, com que todo o texto fique polido ou não-pixelizado, por isso é provável que os cabeçalhos e botões fiquem com um aspecto agradável nestes sistemas sem ter de se recorrer às imagens de texto.

As propriedades CSS seguintes são úteis para estilizar o texto e evitam a utilização de texto em imagens:

Exemplos

Exemplo 1: Utilizar font-family (família de tipos de letra) de CSS para controlar a família de tipos de letra no texto

O componente XHTML:

Código Exemplo:

<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

O componente CSS:

Código Exemplo:

code { font-family:"Courier New", Courier, monospace }

Exemplo 2: Utilizar text-align (alinhamento do texto) de CSS para controlar a colocação (alinhamento) do texto

O componente XHTML:

Código Exemplo:

<p class="right">This text should be to the right of the viewport.</p> 

O componente CSS:

Código Exemplo:

.right { text-align: right; }

Exemplo 3: Utilizar font-size (tamanho de letra) de CSS para controlar o tamanho do texto

O componente XHTML:

Código Exemplo:

<p>09 <strong class="largersize">March</strong> 2008</p> 

O componente CSS:

Código Exemplo:

strong.largersize { font-size: 1.5em; }

Exemplo 4: Utilizar color (cor) de CSS para controlar a cor do texto

Nota: O estilo utilizado neste exemplo não é utilizado para transmitir informações, estrutura ou relações.

O componente XHTML:

Código Exemplo:

<p>09 <em class="highlight">March</em> 2008</p> 

O componente CSS:

Código Exemplo:

.highlight{ color: red; }

Exemplo 5: Utilizar font-style (estilo de tipo de letra) de CSS para colocar o texto em itálico

Nota: O estilo utilizado neste exemplo não é utilizado para transmitir informações, estrutura ou relações.

O componente XHTML:

Código Exemplo:

<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology 
Blog</a>.</p>

O componente CSS:

Código Exemplo:

.featuredsite{ font-style:italic; }

Exemplo 6: Utilizar font-weight (espessura do tipo de letra) de CSS para controlar a espessura do tipo de letra do texto

Nota: O estilo utilizado neste exemplo não é utilizado para transmitir informações, estrutura ou relações.

O componente XHTML:

Código Exemplo:

<p>This deal is available <span class="highlight">now!</span></p> 

O componente CSS:

Código Exemplo:

.highlight { font-weight:bold; color:#990000; }

Exemplo 7: Utilizar text-transform (transformação de texto) de CSS para controlar as maiúsculas e minúsculas do texto

Nota: O estilo utilizado neste exemplo não é utilizado para transmitir informações, estrutura ou relações.

O componente XHTML:

Código Exemplo:

<p>09 <span class="caps">March</span> 2008</p> 

O componente CSS:

Código Exemplo:

.caps { text-transform:uppercase; }

Exemplo 8: Utilizar line-height (altura de linha) de CSS para controlar o espaçamento entre linhas do texto

A propriedade line-height de CSS é utilizada para apresentar a altura de linha para um parágrafo com duas vezes a altura do tipo de letra.

O componente XHTML:

Código Exemplo:

<p>Concern for man and his fate must always form the<br />  
chief interest of all technical endeavors. <br />
Never forget this in the  midst of your diagrams and equations. </p>

O componente CSS:

Código Exemplo:

p { line-height:2em; }

A propriedade line-height de CSS é utilizada para apresentar uma altura de linha do texto menor do que a altura do tipo de letra. A segunda linha do texto é posicionada após a primeira linha do texto fazendo parecer com que o texto faça parte da primeira linha, mas ligeiramente rebaixado.

O componente XHTML:

Código Exemplo:

<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

O componente CSS:

Código Exemplo:

.overlap { line-height:0.2em;  }
 .upper { text-transform:uppercase; }
 .byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }

Exemplo 9: Utilizar letter-spacing (espaçamento entre letras) de CSS para espaçar o texto

A propriedade letter-spacing de CSS é utilizada para apresentar as letras compactadas na segunda linha do texto.

O componente XHTML:

Código Exemplo:

<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

O componente CSS:

Código Exemplo:

.overlap { line-height:0.2em;  }
 .upper { text-transform:uppercase; }
 .byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }

A propriedade letter-spacing de CSS é utilizada para apresentar as letras compactadas na segunda linha do texto.

O componente XHTML:

Código Exemplo:

<h1 class="upper2">News</h1>

O componente CSS:

Código Exemplo:

.upper2 { text-transform:uppercase; letter-spacing:1em; }

Exemplo 10: Utilizar background-image (imagem de fundo) de CSS para dispor o texto e as imagens em camadas

A propriedade font-style de CSS é utilizada para apresentar o componente textual de uma faixa e a propriedade background-image é utilizada para apresentar uma imagem por detrás do texto.

O componente XHTML:

Código Exemplo:

<div id="banner"><span id="bannerstyle1">Welcome</span> 
<span id="bannerstyle2">to your local city council</span></div>

O componente CSS:

Código Exemplo:

#banner { 
  color:white; 
  background-image:url(banner-bg.gif); 
  background-repeat:no-repeat; 
  background-color:#003399; 
  width:29em; 
}

#bannerstyle1 { 
  text-transform:uppercase; 
  font-weight:bold; 
  font-size:2.5em;
}

#bannerstyle2 { 
  font-style:italic; 
  font-weight:bold; 
  letter-spacing:-0.1em;
  font-size:1.5em; 
}

Exemplo 11: Utilizar first-line (primeira linha) de CSS para controlar a apresentação da primeira linha de texto

A pseudo-classe :first-lineé utilizada para apresentar a primeira linha do texto num tipo de letra ampliado, a vermelho.

O componente XHTML:

Código Exemplo:

<p class="startline">Once upon a time...<br />
 ...in a land far, far away...  </p> 

O componente CSS:

Código Exemplo:

.startline:first-line { font-size:2em; color:#990000; }

Exemplo 12: Utilizar first-letter (primeira letra) de CSS para controlar a apresentação da primeira letra de texto

A pseudo-classe :first-letter de CSS é utilizada para apresentar a primeira letra num tipo de letra ampliado, a vermelho, e alinhada verticalmente ao centro.

O componente XHTML:

Código Exemplo:

<p class="startletter">Once upon a time...</p> 

O componente CSS:

Código Exemplo:

.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }

Recursos

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

Testes

Procedimento

  1. Verifique se as propriedades CSS foram utilizadas para controlar a apresentação visual do texto.

Resultados Esperados