Esta é a tradução da nota do W3C "CSS Techniques for Web Content Accessibility Guidelines 1.0" publicado no site do W3C.

  1. A versão oficial e original, em inglês, deste artigo, encontra-se em: http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/
  2. A única versão oficial deste documento é a versão em língua inglesa que se encontra no site do W3C.
  3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.
  4. Este documento foi traduzido em 22 de novembro de 2003 por: Maurício Samy Silva.
    A tradução foi feita somente para este documento, vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa, salvo indicação em contrário.

W3C

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

Nota do W3C de 6 Novembro 2000

Esta versão:
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/
(plain text, PostScript, PDF, gzip tar file of HTML, zip archive of HTML)
Versão mais recente:
http://www.w3.org/TR/WCAG10-CSS-TECHS/
Versão anterior:
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/
Editores:
Wendy Chisholm, W3C;
Gregg Vanderheiden, Trace R & D Center, University of Wisconsin -- Madison;
Ian Jacobs, W3C

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

Sumário


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] .

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.

Exemplo.

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.

Exemplo.

  
/*    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:

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:

Exemplo.

  
: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:

Exemplo.

Use em para definir tamanhos de letras como abaixo:

   H1 { font-size: 2em }

ao invés de:

   H1 { font-size: 12pt }

Fim do exemplo.

Exemplo.

Use medidas relativas e porcentagens.

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

Fim do exemplo.

Exemplo.

Use unidades de medida absoluta somente quando as características físicas da mídia de exibição for conhecida

   .businesscard { font-size: 8pt }

Fim do exemplo.

4 Criando o conteúdo

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

Técnicas:

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

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.

Exemplo.

 
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.

Exemplo.

 
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:

Exemplo.

Especifique sempre um tipo genérico de letra como opção:

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

Fim do exemplo.

Exemplo.

<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>

Fim do exemplo.

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:

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).

Exemplo.

Neste exemplo a imagem inserida exibe a palavra "exemplo" em letras grandes na cor vermelha, que é capturada pelo valor do atributo "alt".

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

Fim do exemplo.

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:

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

Exemplo.

<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>

Nota. Na data que este documento foi escrito o pseudo elemento CSS ':first-letter', que permite controlar a primeira letra de um texto não encontra amplo suporte.

9 Cores

9.1 Contraste de cores

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

Técnicas:

Exemplo.

Use números e não nomes para as cores:

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

Fim do exemplo.

Exemplo - em desuso.

 H1 {color: red}

Fim do exemplo.

Use as propriedades CSS para especificar cores:

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:

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:

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:

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.

Exemplo.

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

Fim do exemplo.

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.

Exemplo.

  <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>

Fim do exemplo.

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:

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

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.

Exemplo - em desuso.

Não use espaços para o valor "alt" para evitar que as palavras sejam exibidas quando a imagem não esta carregada.:

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

No exemplo a seguir, uma imagem é usada para forçar um gráfico a ser exibido em determinada posição:

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

Fim do exemplo.

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:

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

Exemplo.

Neste exemplo, o elemento H1, tem uma borda superior de 2px de espessura e na cor vermelha e separada do conteúdo por 1em:

   <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>

Fim do exemplo.

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).

Exemplo.

Neste exemplo o elemento DIV é usado para criar uma barra de navegação, que inclui um separador horizontal.

   <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>

Fim do exemplo.

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

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

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.

Exemplo - em desuso.

<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>

Fim do exemplo.

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:

Imagem da tela para o código do exemplo COM aplicação da folha de estilo

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:

Imagem da tela para o código do exemplo SEM aplicação da folha de estilo

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.

Exemplo.

<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>

Fim do exemplo.

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:

Exemplo para o código sem folha de estilo mas com markup elegantemente aplicada

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]

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.

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:

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

Exemplo.

 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

Icone das conformidades Triplo-A, W3C-WAI Diretrizes de acessibilidade a conteúdo WEB 1.0