Técnicas CSS para acessibilidade a conteúdo web - Diretrizes 1.0

Sinopse

Este documento descreve as técnicas para a elaboração de Folhas de Estilo em Cascata (CSS) que atendam a acessibilidade. As Folhas de Estilo em Cascata são definidas pelas Recomendações do W3C "CSS Level 1" [CSS1] e "CSS Level 2" [CSS2]. Este documento tem como propósito auxiliar aos criadores de conteúdo para web que desejam produzir em conformidade com as "Recomendações para acessibilidade do conteúdo da Web 1.0" ([WCAG10]). Ainda que as técnicas descritas neste documento auxiliem os criadores das CSS a criar em conformidade com as o "Recomendações para acessibilidade do conteúdo da Web 1.0", estas técnicas não são garantia de conformidade e nem a única maneira para o criador web produzir conteúdo nas conformidades.

Este documento é parte de uma série de documentos acerca das técnicas para criação de conteúdo web acessível. Para informação acerca de outros documentos desta série consulte as "Recomendações para acessibilidade do conteúdo da Web 1.0" [WCAG10-TECHS].

Nota: Este documento contém uma série de exemplos que ilustram as soluções de acessibilidade com CSS, mas também exemplos em desuso que ilustram o que os desenvolvedores devem evitar. Os exemplos em desuso estão ressaltados e os leitores devem considerá-los com precaução - eles foram incluídos com propósitos de ilustração tão somente.

Status deste documento

Esta versão foi publicada para corrigir alguns links "rompidos" na versão anterior.

A versão de 6 Novembro 2000 deste documento é uma Nota de uma série de Notas produzidas e endossadas pelo Grupo de Trabalho das Diretrizes de Acessibilidade ao Conteúdo WEB (WCAG WG). Esta Nota não foi revisada ou endossada pelos membros da W3C. A série de documentos substitui o documento 5 Maio 1999 W3C Nota Técnica para Acessibilidade ao conteúdo Web - Diretrizes 1.0 Os tópicos do documento anterior foram separados por cada uma das tecnologias específicas que podem evoluir independentemente. Documentos menores com tecnologia específica propiciam aos autores concentrar-se em uma tecnologia particular.

Enquanto "Recomendações para acessibilidade do conteúdo da Web 1.0" Recomendação [WCAG10] for um documento estável, espera-se que esta série de documentos correlatos evoluam com as mudanças de tecnologia e com as descobertas pelos desenvolvedores de técnicas mais efetivas para acessibilidade ao conteúdo Web.

Estão disponíveis, o histórico das mudanças na série de documentos bem como a lista dos itens abertos e fechados . Os leitores são encorajados a tecer seus comentários a respeito dos documentos e propor soluções para os itens em vigor. Envie seu comentário detalhado sôbre este documento para o Grupo de Trabalho em w3c-wai-gl@w3.org; Estão disponíveis Arquivos públicos
A versão em inglês desta especificação é a única versão de caráter normativo. Estão disponíveis Traduções deste documento
Uma lista de erros conhecidos neste documento está disponível em "Errata nas Diretrizes de Acessibilidade ao Conteúdo WEB" Por favor, relate erros porventura encontrados neste documento para wai-wcag-editor@w3.org.
A Iniciativa para Web Acessibilidade (WAI) da World Wide Web Consortium (W3C) torna disponível uma variedade de recursos para acessibilidade na Web. WAI Guia da Acessibilidade é produzida como parte da WAI Atividade Técnica. Os objetivos do Grupo de Trabalho para as Diretrizes de Acessibilidade de Conteúdo na WEB, estão descritos nos estatutos.

Está disponível uma lista das atuais W3C Recomendações e outros documentos técnicos

1 Diminuindo a manutenção e aumentando a consistência

Pontos de verificação nesta seção: 14.3 Crie um estilo de apresentação que seja consistente em todas as páginas. [Prioridade 3] .

• Use um mínimo de folhas de estilo no seu sítio
• Use folhas de estilo externas ao invés de incorporada e evite folha de estilo inline.
• Se você tem mais de uma, use o mesmo nome de "classe" para o mesmo conceito nas diferentes folhas de estilo.

2 Permitir ao usuário a definição do estilo

Pontos de verificação nesta seção: 11.2 Evite as definições que estão em desuso pelas tecnologias do W3C. [Prioridade 2] .

Com a finalidade de assegurar que o usuário tenha o controle sôbre o estilo, CSS2 mudou o conceito da declaração "!important" definida em CSS1. Segundo CSS1 o projetista sempre tinha a palavra final sôbre o estilo. Em CSS2 se o estilo do usuário contém a declaração "!important" esta tem precedência sôbre qualquer regra de estilo aplicada pela folha de estilo do projetista. Esta é uma característica importante a disposição dos usuários que têm necessidade de, ou que devem evitar certas combinações de cores ou contrastes ou ainda, que necessitam usar tamanhos grandes de letras, etc. Por exemplo, a regra de estilo a seguir especifica um tamanho de letra grande para o parágrafo e prevalece sôbre qualquer regra do projetista de igual peso.

P { font-size: 24pt ! important }

O valor por "herança" em CSS2 disponível para qualquer propriedade - garante a declaração "!important" em todo ou grande parte do documento. Por exemplo, a regra de estilo a seguir "força" todo o fundo na cor branca e o texto sobre ele, na cor preta.

  
/*    Ajusta a cor do texto para preta  
     e a cor do fundo para branca   
     para o elemento body do documento.*/

BODY {     
  color: black ! important ;      
  background: white ! important  
}
 /*   faz com que os valores 'color' e 'background'  
sejam herdados pelos demais elementos,   
priorizados por !important. Notar que esta
regra pode ser sobrescrita por uma declarção
mais específica.  */

* {   
  color: inherit ! important ;   
  background: inherit ! important  
}

CSS2 inclui também as seguintes características de controle:

• Sistema de cores ( para 'color', 'background-color', 'border-color', e 'outline-color') e sistema de letras (para 'font') significando que o usuário pode aplicar o seu sistema de cores e de letras preferidos, em documentos da Web.
• Molduras dinâmicas (a propriedade 'outline' ) permitem ao usuário (por exemplo: aqueles com deficiência visual) criar molduras em volta de um conteúdo, sem modificar o layout mas acresentando um destaque à informação.

Por exemplo: para acresentar uma moldura de cor preta e traço espesso em volta de um elemento quando o foco for para aquele elemento e uma moldura vermelha espessa quando o elemento estiver ativo as seguintes regras podem ser definidas:

  
:focus  { outline: thick solid black }  
:active { outline: thick solid red }

3 Unidades de medida

Pontos de verificação nesta seção: 3.4 Use unidades relativas ao invés de absolutas na linguagem de marcação, para os valores de atributos e para os valores de propriedades das folhas de estilo. [Prioridade 2] .

Técnicas:

• Use a unidade "em" para tamanhos de letras.
• Use unidades de medidas relativa e porcentagens. CSS permite que você use unidades relativas mesmo com elementos posicionados de forma absoluta. Desta forma, você deve posicionar uma imagem para estar afastada "3em" da parte superior do elemento que a contém. Esta é uma distância fixa, mas é também relativa ao tamanho atual de letra, assim ela (distância) será escalada de maneira apropriada.
• Use unidades de medida absoluta somente quando as características físicas da mídia de exibição for conhecida, tal como uma imagem bitmap.

   H1 { font-size: 2em }

   H1 { font-size: 12pt }

   BODY { margin-left: 15%; margin-right: 10%}

   .businesscard { font-size: 8pt }

4 Criando o conteúdo

Pontos de verificação nesta seção:

• 3.1 Quando uma linguagem de marcação apropriada estiver disponível, para transmitir uma informação, use-a, ao invés de imagens. [Prioridade 2] ,
• 6.1 Organize os documentos de uma maneira que eles possam ser lidos sem a aplicação das folhas de estilo.Por exemplo: quando um documento HTML for renderizado sem sua folha de estilos associada, ainda assim ele deve ser legível. [Prioridade 1]

Técnicas:

• Forneça um texto substituto para cada uma das imagens importantes ou textos criados pela folha de estilos (por exemplo 'background-image', 'list-style', ou propriedes 'content').
• Certifique-se de que todo conteúdo importante seja exibido no objeto do documento. Textos gerados pelas folhas de estilo não fazem parte da linguagem de marcação do documento e não estarão disponíveis para as ajudas técnicas do Modelo de Objeto de Documento - Nível 1 ([[DOM1]).

CSS2 inclui vários mecanismos que permitem que conteúdos sejam gerados pelas folhas de estilo:

• os pseudos-elementos :before e :after e a propriedade 'content'. Quando usados em conjunto, permitem a inserção de marcadores, antes ou depois de um conteúdo (por exemplo: contadores e cadeias de strings tais como aquelas "Fim do exemplo" usadas acima).
• As propriedades 'cue', 'cue-before', e 'cue-after'. Estas propriedades permitem aos usuários produzir um som antes ou depois de um conteúdo.
• Estilos de listas, os quais devem ser números, marcadores ou imagens (usualmente associados com o elemento LI do HTML). CSS2 acresentou estilos de listas internacionais aos estilos definidos em CSS1. Ver as propriedades 'list-style-type' 'content'.

Um conteúdo gerado pode servir como marcador para auxiliar o usuário a navegar em um documento e orientá-lo quando ele não puder acessar visualmente as facilidades de navegação tais como barras de navegação, quadros com tabelas, etc.

Por exemplo, a folha de estilo do usuário mostrada abaixo gera a frase "Fim do Exemplo" para ser colocada ao final de cada exemplo previamente identificado com uma classe especial na linguagem de marcação do documento.

 
DIV.example:after {     
  content: Fim do exemplo  
}

O usuário pode também numerar os parágrafos de modo que possa localizar a sua posição de leitura no documento.

 
P:before {     
  content: counter(paragraph) ". " ;
    counter-increment: paragraph  
}

5 Letras

Pontos de verificação nesta seção: 11.2 Evite as definições que estão em desuso pelas tecnologias do W3C. [Prioridade 2] .

Técnicas:

• Especifique sempre um tipo genérico de letra como opção.
• Ao invés de usar definições que estão em desuso, use as variadas propriedades CSS para controlar as características das letras: 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', e 'font-weight'.
• Use as seguintes propriedades CSS2 para controlar as informações sôbre as letras:
  • 'font', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', e 'font-weight'

  ao invés dos seguintes elementos e atributos HTML em desuso:

  • FONT, BASEFONT, "face", e"size".
• Se você tiver que usar elementos HTML para controlar as letras use BIG e SMALL que não estão em desuso.

   BODY { font-family: "Gill Sans", sans-serif }

<STYLE type="text/css">
   P.important { font-weight: bold }
   P.less-important { font-weight: lighter; font-size: smaller }
   H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>

6 Efeitos de estilo no texto

Pontos de verificação nesta seção: 7.2 Até a época em que os agentes do usuário permitam o controle sobre elementos "piscantes", evite usá-los (isto é., use efeitos de transições por períodos regulares tal como posição "acesso" e posição "apagado"). [Prioridade 2] .

A propriedade CSS2 a seguir poderá ser usada para estilizar um texto:

• Maiúscula/minúscula: 'text-transform' (para maiúscula, minúscula ou primeira letra maiúscula).
• Efeitos de sombra: 'text-shadow'
• Sublinhado, supralinhado, piscante: 'text-decoration'. Nota. Se um conteúdo "piscante" (por exemplo, um cabeçalho que aparece e desaparece a intervalos regulares) for usado, forneça um mecanismo capaz de parar o efeito "piscante". Em CSS, a propriedade 'text-decoration: blink' produz o efeito "piscante" em um conteúdo e permite ao usuário parar esse efeito desativando a folha de estilo ou sobrescrevendo o estilo do projetista com seu estilo de usuário.Não use os elementos BLINK e MARQUEE. Estes elementos não fazem parte de qualquer uma das especificações do W3C para HTML. (isto é, eles não são elementos normatizados).

7 Texto no lugar de imagem

Pontos de verificação nesta seção: 3.3 Use folhas de estilo para controlar a apresentação e o layout. [Prioridade 2] .

Os desenvolvedores de conteúdo devem usar folhas de estilo para controlar textos ao invés de apresentar textos através de imagens. Usar textos ao invés de imagem significa que a informação estará disponível para um número muito maior de usuários (com sintetizadores de voz, com dispositivos braille, dispositivos gráficos, etc). Usando-se folhas de estilo permite-se aos usuários sobrescrever os estilos do projetista com seus estilos próprios e assim alterar cores e tamanhos de letras com maior facilidade.

Se for necessário usar um bitmap para criar um efeito de texto (uma letra especial, uma transformação, um sombreamento, etc.) o bitmap deve estar acessível (ver a seção texto equivalente e páginas alternativas).

<P>Este é um
		<IMG src="BigRedExemplo.gif" alt="exemplo"> 
   do que nos referimos.
</P>

8 Formatação e posicionamento do texto

Pontos de verificação nesta seção: 3.3 Use folhas de estilo para controlar a apresentação e o layout. [Prioridade 2] .

A propriedade CSS2 a seguir poderá ser usada para controlar a formatação e o posicionamento de um texto:

• Recúo: 'text-indent'. Não use BLOCKQUOTE ou outro qualquer elemento de estrutura para recuar um texto.
• Espaçamento entre letras e entre palavras: 'letter-spacing', 'word-spacing'. Por exemplo, ao invés de escrever "O L Á" (que o usuário normalmente reconhece como a palavra "olá", mas vai ouvir os sons das letras individualmente), deve-se criar o mesmo efeito visual com o uso da propriedade 'word-spacing' aplicada a "OLÁ". Textos sem espaçamentos são transformados mais efetivamente em voz.
• Espaço em branco: 'white-space'. Esta propriedade controla o espaço em branco no conteúdo de um elemento.
• Direção do texto: 'direction', 'unicode-bidi'.
• Os pseudo elementos primeira letra :first-letter e primeira linha :first-line permitem controlar o aspecto da primeira letra e da primeira linha de um texto.

O exemplo a seguir mostra como usar folha de estilo para criar um efeito capital na primeira letra.

<HEAD>
<TITLE>Efeito Capital</TITLE>
<STYLE type="text/css">
      .dropcap { font-size : 120%; font-family : Helvetica } 
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">U</SPAN>ma vez mais...
</BODY>

9 Cores

9.1 Contraste de cores

Pontos de verificação nesta seção:

• 2.2 Certifique-se de que o fundo e o conteúdo sejam definidos em cores contrastantes o suficiente para serem visualizados por usuários com deficiências visuais e por aqueles com dispositivos em Preto&Branco. [Prioridade 2 para imagens, Priority 3 para texto].

Técnicas:

• Use números e não nomes para as cores.

   H1 {color: #808000}
   H1 {color: rgb(50%,50%,0%)}

 H1 {color: red}

Use as propriedades CSS para especificar cores:

• 'color', para cores dos conteúdos sôbre o fundo.
• 'background-color', para cores de fundo.
• 'border-color', 'outline-color' para cores de bordas.
• Para as cores de links, defina-as nas pseudo classes :link, :visited, e :active.

Certifique-se de que o fundo e o conteúdo possuam cores bem contrastantes. Quando definir uma cor de fundo, defina também uma cor para o conteúdo sôbre o fundo (e vice versa).

9.2 Assegurar que a informação não seja transmitida unicamente pela cor

Pontos de verificação nesta seção:

• 2.1 Certifique-se de que toda informação transmitida pela cor esteja disponível também sem a cor, por exemplo mediante contexto ou por marcadores. [Prioridade 1]

Certifique-se de que a informação não seja passada somente pela cor. Por exemplo, quando solicitar um "input" ao usuário não escreva "Selecione uma das opções listadas em cor verde". Disponibilize também a informação por outra forma através de outra folha de estilo aplicando um outro efeito (por exemplo, um efeito de letra) e através de contexto (por exemplo links para textos explicativos).

Por exemplo, neste documento os exemplos foram estilizados por default (através de uma folha de estilos) conforme a seguir:

• Eles são rodeados por uma borda.
• Eles usam uma cor de fundo diferenciada.
• Eles começam com a palavra "Exemplo" ou "Exemplo - em desuso".
• Eles também são encerrados com a frase "Fim do exemplo", porém esta frase está oculta por default pela declaração 'display: none'. Para usuários que não possuem suporte para folhas de estilo ou quando elas são desconectadas do documento, aqueles usuários com dificuldades de visualizar a borda a frase os auxilia a detectar o fim do exemplo.

Teste Rápido! Para verificar se o seu documento funciona sem as cores, examine-o em um monitor em Preto&Branco ou com as cores desativadas no navegador. Verifique também como seu documento se apresenta em um navegador com as cores previamente configuradas para o preto, o branco e as quatro tonalidades de cinza da paleta de cores seguras para Web.

Teste Rápido! para verificar se as cores do seu documento apresentam um conveniente contraste para a leitura por usuários com deficiência visual ou com monitores de baixa resolução imprima o conteúdo do documento em uma impressora em Preto&Braco com fundos e cores em escalas de cinza. Também faça fotocópia do documento e depois outra fotocópia e assim por três vezes para verificar como se degrada na terceira fotocópia.. Isto mostrará aonde há necessidade de se acrescentar marcações redundantes (por exemplo: hyperlinks normalmente são sublinhados em páginas Web), ou ainda aonde as marcações são muito pequenas ou pouco realçadas para serem visualizadas convenientemente.

Para mais informações a respeito de cores e contrastes, consulte [LIGHTHOUSE].

10 Fornecer "dicas" contextuais nas listas HTML

Pontos de verificação nesta seção:

• 3.6 Use marcações apropriadas para as listas e os itens de listas. [Prioridade 2]
• 13.2 Use as metadata para acresentar informações semânticas às páginas e ao sítio. [Prioridade 2]

Os desenvolvedores de conteúdo são encorajados a empregar UL para listas não ordenadas e OL para listas ordenadas (isto é, uma marcação apropriada) combinada com CSS para proporcionar dicas de contexto.

A folha de estilos CSS2 a seguir mostra como utilizar números indexados para listas aninhadas, criadas tanto com o elemento UL como com OL. Os itens são numerados como "1", "1.1", "1.1.1", etc.

<STYLE type="text/css">
    UL, OL { counter-reset: item }
    LI { display: block }
    LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>

Até que CSS2 seja amplamente implementada nas aplicações do usuário ou estas proporcionem ao usuário meios de controlar as listas deverão ser consideradas maneiras de se fornecer dicas contextuais nas listas aninhadas. O mecanismo CSS2 a seguir, mostra como ocultar o fim de uma lista quando a folha de estilo estiver ativada e como mostrá-lo quando for desativada ou mesmo quando a folha de estilo do usuário tem precedência sobre o mecanismo de ocultação ou até quando não há suporte para folhas de estilo.

  <STYLE type="text/css">
      .endoflist { display: none }
  </STYLE>
  <UL>
     <LI>Papel:
        <UL>
           <LI>envelopes
           <LI>bloco de Notas
           <LI>lembretes
           <LI>papel cartaz
           <span class="endoflist">(Fim de papéis)</span>
        </UL>
     <LI>Caneta:
        <UL>
           <LI>caneta azul
           <LI>caneta branca
           <span class="endoflist">(Fim de canetas)</span>
        </UL>
     <LI>Prendedores:
        <UL>
           <LI>clips para papel
           <LI>grampo
           <LI>barbante. 
           <span class="endoflist">(Fim de prendedores)</span>
        </UL> 
     <span class="endoflist">(Fim de suprimentos de escritório)</span>
  </UL>

Nota: este exemplo não serve para itens de lista que se ajustam na linha seguinte. Com algum esforço adicional poder-se-á incluir marcações ao final de cada item de lista.

11 Layout, posicionamento, camadas, e alinhamento

Pontos de verificação nesta seção:

• 3.3 Use folhas de estilo para controlar a apresentação e o layout. [Prioridade 2]
• 5.3 Não use tabelas para o layout, a menos que a tabela faça algum sentido quando linear. Por outro lado, se a tabela não faz sentido proporcione uma alternativa equivalente ( a qual deve ser uma versão linear). [Prioridade 2] .

Layout, posicionamento, camadas e alinhamento devem ser declarados por folhas de estilo ( notadamente com uso de posicionamento por "floats" e "absolute" :

• 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Cada uma destas propriedades permitem ao usuário controlar o espaçamento sem necessidade de acresentar espaços adicionais. Use 'text-align: center' ao invés do elemento em desuso CENTER.
• 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. Com estas propriedades o usuário pode criar espaçamentos nos quatro lados do conteúdo de um elemento ao invés de adicionar espaços de não separação ( ).
• 'float', 'position', 'top', 'right', 'bottom', 'left'. Com estas propriedades o usuário pode controlar a posição visual de quase todos os elementos de uma maneira diversa daquela que aparece no documento. Deve-se sempre projetar documentos que tenham sentido mesmo quando desconectados das folhas de estilo ( isto é, o documento deve ser escrito em uma ordem "lógica") e então aplicar-se a folha de estilo par se obter o efeito visual. As propriedades de posicionamento podem ser usadas para se criar notas marginais (que devem ser automaticamente numeradas), barras laterais, efeitos similares a quadros, cabeçalhos e rodapés simples e muito mais.
• A propriedade 'empty-cells' permitem ao usuário que para células de tabelas vazias sejam atribuídas bordas, na tela ou no papel. Uma célula de dados enquanto permanecer vazia não deve ser preenchida com espaço em branco ou "non-breaking" apenas com o propósito de conseguir-se um efeito visual.

11.1 Se tiver que usar imagens como espaçadores

Forneça um texto equivalente para as imagens inclusive aquelas invisíveis e as transparentes.

Se o desenvolvedor do conteúdo não puder usar folhas de estilo e tiver que usar imagens invisíveis ou transparentes (por exemplo, com IMG) para construir o layout da página, deve especificar alt="" para todas aquelas imagens.

o meu poema requer grande espaço IMG src="10pttab.gif" 
alt="   ">aqui

   <IMG src="spacer.gif" alt="spacer">
   <IMG src="colorfulwheel.gif" alt="A Roda da Fortuna">

12 Linhas e bordas

Pontos de verificação nesta seção: 6.1 Organize os documentos de uma maneira que eles possam ser lidos sem as folhas de estilos. Por exemplo, quando um documento HTML é renderizado sem a folha de estilos associada deve mesmo assim ser possível ler-se o documento. [Prioridade 1] .

Linhas e bordas devem transmitir a noção de "separação" para usuários sem deficiências visuais mas este sentimento nâo pode ter que ser deduzido, fora de um contexto visual.

Use as propriedades CSS para especificar estilos de bordas:

• 'border', 'border-width', 'border-style', 'border-color'.
• 'border-spacing' e 'border-collapse' para tabelas.
• 'outline, 'outline-color', 'outline-style', e 'outline-width' para delineamentos dinâmicos.

As folhas de estilo devem ser usadas para a criação de linhas e bordas.

   <HEAD>
   <TITLE>Linha vermelha estilizada</TITLE>
   <STYLE type="text/css">
        H1 { padding-top: 1em; border-top: 2px red }
   </STYLE>
   </HEAD>
   <BODY>
   <H1>Capítulo 8 - Apresentações auditivas e táteis</H1>
   </BODY>

Se uma linha (por exemplo, o elemento HR) é usada para indicar uma estrutura, certifique-se de indicar também a estrutura por meio de um elemento não visual (por exemplo, usando um marcador estrutural).

   <DIV class="navigation-bar">
      <HR>
      <A rel="Next" href="next.html">[Próxima página]</A>
      <A rel="Previous" href="previous.html">[Página anterior]</A>
      <A rel="First" href="first.html">[Página inicial]</A>
   </DIV>

13 Usando CSS para posicionar e markup HTML para uma disposição elegante.

Pontos de verificação nesta seção:

• 6.1 Organize os documentos de uma maneira que eles possam ser lidos sem as folhas de estilos. Por exemplo, quando um documento HTML é renderizado sem a folha de estilos associada deve mesmo assim ser possível ler-se o documento. [Prioridade 1] ,

Usando as propriedades de posicionamento de CSS2, um conteúdo pode ser locado na tela do usuário em qualquer posição. A ordem na qual os itens são exibidos na tela pode ser diferente da ordem em que eles se encontram no código fonte. O exemplo a seguir demonstra alguns princípios.

1. o texto é exibido visualmente no brownser em uma ordem diferente daquela da markup.
2. posicionamento com CSS deve ser usado para um efeito tabular. O elemento TABLE pode ser usado para criar o mesmo efeito.

Note que se define uma classe para cada objeto a posicionar. O uso de "id" pode ser substituido por "class" nos exemplos a seguir. "Class" foi usado porque neste exemplo os objetos estão repetidos e em consequência não são únicos.

<head><style type="text/css">
  .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 } 
</style></head>
<body>
<div class="box">
  <span class="menu1">Produtos</span> 
  <span class="menu2">Localizações</span> 
  <span class="item1">Telefones</span> 
  <span class="item2">Computadores</span> 
  <span class="item3">Players MP3 Portáteis</span> 
  <span class="item5">Wisconsin</span> 
  <span class="item4">Idaho</span>
</div>
</body>

Quando a folha de estilo é aplicada o texto é apresentado em duas colunas. Os elementos da classe "menu1" (Produtos) e "menu2" (Localizações) são apresentados como cabeçalhos de colunas. "Telefones, Computadores, e Players MP3 Portáteis" estão listados sob Produtos e "Wisconsin" and "Idaho" estão listados sob Localizações como mostrado na imagem de tela abaixo:

Quando a folha de estilo não esta aplicada, todo o texto é apresentado em uma linha de palavras, "Produtos Localizações Telefones Computadores Players MP3 Portáteis Wisconsin Idaho". Eles estão na ordem em que foram escritos no código fonte. Desta forma, o que é cabeçalho de coluna quando a folha de estilo está aplicada, vem no começo da frase, já que eles foram escritos em primeiro no código fonte. A imagem de tela abaixo ilustra isto:

O exemplo a seguir mostra que pode-se conseguir uma mesma aparência visual daquela em um navegador que suporta folhas de estilo em um outro sem a aplicação da folha de estilo. A markup estrutural (listas de definições) foi aplicada ao conteúdo. Note que as margens foram definidas em 0 (zero) já que em HTML, as listas de definições são exibidas no navegador, com uma margem fixa para o elemento DD.

<head><style type="text/css">
  .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 } 
</style></head>
<body>
<div class="box">
<dl>
  <dt class="menu1">Produtos</dt>
    <dd class="item1">Telefones</dd>
    <dd class="item2">Computadores</dd>
    <dd class="item3">Players MP3 Portáteis</dd>
  <dt class="menu2">Localizações</dt>
   <dd class="item4">Idaho</span>
   <dd class="item5">Wisconsin</span>
  </dt>
</dl>
</div>
</body>

Quando a folha de estilo é aplicada a aparência é idêntica a do exemplo anterior. Contudo, agora quando as folhas de estilo não estão aplicadas, o texto apresenta-se em uma listagem muito semelhante àquela quando a folha de estilo está aplicada como demonstrado na imagem de tela abaixo:

Nota. Comprove você mesmo a diferença entre os exemplos mostrados: arquivo de teste para folhas de estilo que se transformam elegantemente

14 Criando movimento com folhas de estilo e script

Pontos de verificação nesta seção: 7.3 Até que as aplicações do usuário sejam capazes de congelar conteúdos em movimento, evite usar movimentos em páginas. [Prioridade 2]

• mostrar/ocultar conteúdos,
• mudando apresentações (movimentos e cores)

15 Folhas de Estilo em Cascata auditivas

Pontos de verificação nesta seção: 11.3 Forneça informação de uma maneira que os usuários possam receber os documentos de acordo com suas preferências. (por exemplo, idioma, tipo de conteúdo, etc.) [Prioridade 3] .

As propriedades auditivas CSS2 fornecem informações para usuários com deficiências visuais e auditivas de uma maneira muito semelhante aquelas informações passadas visualmente através de textos. O exemplo a seguir mostra como as variadas nuances do som (incluíndo 'voice-family', que é muito semelhante a uma fonte de áudio) podem indicar ao usuário que o conteúdo sonorizado é um cabeçalho.

 
H1 {     
  voice-family: paul;     
  stress: 20;     
  richness: 90;     
  cue-before: url("ping.au")     
}

As propriedades a seguir fazem parte das folhas de estilo auditivas CSS2.

• 'volume' controla o volume do texto lido.
• 'speak' controla se o conteúdo vai ou não ser lido, e caso positivo se vai ser soletrado ou lido normalmente.
• 'pause', 'pause-before', e 'pause-after' controla as pausas antes e depois de uma leitura. Isto permite ao usuário separar conteúdos, melhorando seu entendimento.
• 'cue', 'cue-before', e 'cue-after' especifica um som a ser reproduzido antes e depois do conteúdo, o que pode ser valioso para orientação (bastante parecido a um ícone visual).
• 'play-during' controla um som de fundo enquanto o documento é renderizado (bastante parecido a uma imagem de fundo).
• 'azimuth' e 'elevation' proporciona uma dimensão ao som, o que permite ao usuário distinguir vozes, por exemplo.
• 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', e 'richness' controla a qualidade do conteúdo lido. Variando estas propriedades para os diferentes elementos, os usuários podem fazer uma sintonia fina nos conteúdos lidos da apresentação auditiva.
• 'speak-punctuation' e 'speak-numeral' controla a maneira como números e sinais de pontuação são lidos, o que afeta a qualidade da experiência de uma navegação auditiva.

E, ainda a propriedade 'speak-header' controla como deve ser lida as células de cabeçalho, antes das células de conteúdo.

16 Acesso a apresentações alternativas do conteúdo

Pontos de verificação nesta seção: 11.3 Forneça informação de uma maneira que os usuários possam receber os documentos de acordo com suas preferências. (por exemplo, idioma, tipo de conteúdo, etc.) [Prioridade 3] .

CSS2 permite aos usuários acesso a apresentações alternativas de conteúdo as quais são especificadas nos valores de atributo quando os seguintes são usados em conjunto:

• seletores de atributos.
• a função attr() e a propriedade 'content'
• os pseudos elementos :before e :after

No exemplo a seguir o valor do atributo "alt" para o elemento IMG é renderizado depois da imagem (visualmente, auditivamente, etc.):

 IMG:after { 
    content: attr(alt) 
 }

Notar que o valor do atributo é mostrado ainda que a imagem não possa ser mostrada (por exemplo, o usuário desabilitou as imagens na sua interface)

17 Tipos de mídia

Pontos de verificação nesta seção: 11.3 Forneça informação de uma maneira que os usuários possam receber os documentos de acordo com suas preferências. (por exemplo, idioma, tipo de conteúdo, etc.) [Prioridade 3] .

Os "tipos de mídia" em CSS2 (usados com as regras @media) permitem aos usuários das folhas de estilo que os documentos sejam renderizados de uma maneira mais apropriada em determinados tipos de dispositivos de visualização ou leitura. Estas folhas de estilo podem adaptar apresentações do conteúdo para dispositivos braille, sintetizadores de voz, ou dispositivos TTY. Usando a regra "@media" pode-se inclusive permitir a diminuição do tempo de dowload do documento, permitindo-se que o usuário ignore regras de estilo que não são aplicáveis ao seu caso.

18 Referências

Para a última versão de qualquer especificação W3C, por favor consulte a lista de Informes Técnicos em http://www.w3.org/TR.

[CSS1]

"Recomendação CSS - Nível 1" , B. Bos, H. Wium Lie, editores, 17 Dezembro 1996, revisado em 11 Janeiro 1999. Esta Recomendação CSS1 é http://www.w3.org/TR/1999/REC-CSS1-19990111. A última versão CSS1 está disponível em http://www.w3.org/TR/REC-CSS1.

[CSS2]

"Recomendação CSS - Nível 2 " , B. Bos, H. Wium Lie, C. Lilley, e I. Jacobs, editores, 12 Maio 1998. Esta recomendação CSS2 é http://www.w3.org/TR/1998/REC-CSS2-19980512/. A última versão CSS2 está disponível em http://www.w3.org/TR/REC-CSS2.

[WCAG10]

"Recomendações para acessibilidade do conteúdo da Web 1.0" , W. Chisholm, G. Vanderheiden, e I. Jacobs, editores, 5 Maio 1999. Esta Recomendação WCAG 1.0 é http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.

[WCAG10-TECHS]

"Técnicas para Recomendações de acessibilidade do conteúdo da Web 1.0" , W. Chisholm, G. Vanderheiden, I. Jacobs, editores. Este documento explica como implementar um ponto de verificação definido nas "Recomendações para acessibilidade do conteúdo da Web 1.0". O último esboço das Técnicas está disponível em http://www.w3.org/TR/WCAG10-TECHS/.

19 Recursos

Nota: W3C não garante a estabilidade de qualquer uma das referências listadas a seguir e que esteja fora de seu controle. Estas referências foram aqui incluídas por conveniências. Referências a produtos não implicam em endosso ao produto.

19.1 Outras diretrizes

[UWSAG]

"Guia unificado de acessibilidade para Web Sitios" , G. Vanderheiden, W. Chisholm, editores. O Guia unificado de acessibilidade para Web Sitios foi compilado por Trace R & D Center na Universidade de Wisconsin com patrocínio do National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education.

19.2 Recursos de acessibilidade

[LIGHTHOUSE]

The Lighthouse fornece informações sobre acessibilidade com cores e contrastes.

20 Agradecimentos

Co-directores do Grupo de Trabalho das Diretrizes de Conteúdo para WEB:

Jason White , Universidade de Melbourne

Gregg Vanderheiden , Trace Research and Development

Contato com a Equipe W3C:

Wendy Chisholm

Nossos agradecimentos às seguintes pessoas por terem contribuido com seu tempo e valiosos comentários para dar a forma final a estas diretrizes:

Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler, and Jaap van Lelieveld