Copyright ©1999 - 2000 W3C® (MIT, INRIA, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidade, marcas, utilizaçao de documentos e licença de software
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.
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
[email protected]; 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 [email protected].
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
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] .
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 }
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.
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 }
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:
ao invés dos seguintes elementos e atributos HTML em desuso:
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.
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:
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.
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.
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).
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].
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.
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" :
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=" ">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.
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.
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.
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:
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.
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.
Nota. Comprove você mesmo a diferença entre os exemplos mostrados: arquivo de teste para folhas de estilo que se transformam elegantemente
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]
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.
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)
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.
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.
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.