Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

Esta a traduo da norma do W3C "Accessibility Features of CSS" publicado no site do W3C.
1. A verso oficial e original, em ingls, deste artigo, encontra-se em:http://www.w3.org/1999/08/NOTE-CSS-access-19990804 2. A nica verso oficial deste documento a verso em lngua inglesa que se encontra no site do W3C. 3. O presente documento traduzido para a lngua portuguesa do Brasil, pode conter erros de traduo. 4. Este documento foi traduzido em 23 de maro de 2005 por: Maurcio Samy Silva. A traduo foi feita somente para este documento, vale dizer, as pginas remetidas pelos links aqui indicados, esto em sua verso original em lngua inglesa, salvo indicao em contrrio.

Caractersticas de acessibilidade das CSS

NOTA W3C 4 Agosto 1999
Esta Verso: http://www.w3.org/1999/08/NOTE-CSS-access-19990804 Verso Anterior: http://www.w3.org/1999/06/NOTE-CSS-access-19990616 ltima Verso: http://www.w3.org/TR/CSS-access Editores: Ian Jacobs (ij@w3.org) Judy Brewer (jbrewer@w3.org)
Copyright 1999 W3C (MIT, INRIA, Keio), Todos os direitos reservados. So aplicveis as disposies do W3C relativas a responsabilidades, marca, uso do documento e licena de software

Sumrio

1 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

Este documento descreve sumariamente as caractersticas contidas nas Recomendaes das Folhas de Estilo em Cascata nvel 2 ([CSS2]) que afetam diretamente a acessibilidade aos documentos Web. Algumas das caractersticas aqui descritas j estavam disponveis nas ([CSS1]). Este documento foi escrito, tambm, para servir de referncia a outros documentos no que concerne a caractersticas de acessibilidade das CSS.

Status deste documento

Este documento uma Nota do W3C disponibilizado pelo W3C. Esta NOTA foi aprovada pelo Web Accessibility Initiative (WAI) Education and Outreach Working Group (EOWG), the Protocols and Formats Working Group (PFWG), and the Cascading Style Sheets and Formatting Properties Working Group. A publicao de uma Nota do W3C no implica necessariamente que ela foi endossada pelos membros do W3C. Uma lista das publicaes e matrias tcnicas incluindo os esboos de trabalhos ( working drafts) e as Notas, pode ser encontrada em http://www.w3.org/TR.

Como as CSS favorecem a acessibilidade

Em primeiro lugar, as CSS favorecem a acessibilidade por separar a estrutura dos documentos de sua apresentao. As folhas de estilo foram projetadas para propiciar um controle preciso - independente da marcao - do espaamento de caracteres, alinhamento de texto, posicionamento de objetos na pgina, sadas de udio e voz, caractersticas de fontes, etc. Separando os estilos da marcao os autores podem simplificar e limpar o HTML nos seus documentos, tornando-os mais acessveis. As CSS permitem um controle preciso de espaamento, alinhamento e posicionamento. Os autores podem evitar o "uso incorreto de tags" - a prtica em desuso de usar a marcao para obter efeitos de apresentao. Por exemplo, muito embora os elementos do HTML, BLOCKQUOTE e TABLE tenham a finalidade de marcar citaes em bloco e apresentar dados tabulares respectivamente, eles so frequentemente usados para obter efeitos visuais de indentao e posicionamento. Browsers especiais tais como os leitores de tela, encontraro grande dificuldade em tratar os elementos assim usados, podendo chegar a resultados inintelegveis para o usurio. Complementarmente a preveno de mal uso de elementos HTML, as

2 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

folhas de estilo podem tambm ajudar a evitar o mal uso de imagens. comum a prtica de os autores utilizarem imagens invisveis de 1-pixel para posicionar contedo. Isto no s sobrecarrega o documento aumentando o tempo para download como tambm confunde os softwares de agentes de usurios que buscam por um texto alternativo (o atributo "alt") para as imagens. As propriedades CSS de posicionamento tornaram o uso de tais imagens completamente desnecessrias. As CSS permitem um controle preciso de tamanhos de fontes, cores e estilos. Alguns autores se utilizam de imagens para representar textos em fontes que provavelmente no esto disponveis na mquina do usurio. Textos passados atravs de imagens no esto acessveis aos softwares especias de agentes de usurios, tais como os leitores de tela, e nem podem ser indexados por robots de busca. Para corrigir esta situao um poderoso mecanismo de WebFonts em CSS permite ao usurio um controle total sobre as fontes no lado do cliente. Com as WebFonts, os autores podem se despreocupar com fontes no disponveis na mquina do usurio. As fontes no disponveis, podem ser substitudas convenientemente por outras disponveis, tratadas por softwares do cliente e at mesmo serem baixadas da Web, tudo para atender as especificaes do autor. CSS permite aos usurios sobrescrever os estilos definidos pelo autores. Isto muito importante para usurios imposibilitados de distinguir fontes e cores definidas pelo autor. CSS permite aos usurios visualizar documentos com suas fontes, cores, etc... preferidas, especificando-as em uma folha de estilos do usurio. CSS oferece suporte para gerao automtica de numerao, marcas e outros contedos que podem auxiliar na orientao do usurio pelo documento. Listas muito longas, tabelas ou mesmo o documento como um todo, so mais fceis de navegar quando numerao ou outros identificadores contextuais so fornecidos de uma maneira acessvel. CSS oferece suporte s folhas de estilo para mdia de udio (aural), especificando como um documento deve ser lido quando renderizado por um sintetizador de voz. Folhas de estilo aural (ou abreviadamente "ACSS") permitem aos autores e aos usurios controlar o volume de voz de um contedo lido, sons de fundo, propriedades espaciais do som e uma srie de outras propriedades para adicionar efeitos de modo a tornar os contedos textuais estilizados, com caractersticas anlogas quelas disponveis para usurios com agentes visuais. . CSS permite um controle mais preciso sobre a apresentao do
3 de 12 07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

contedo alternativo do que o HTML sozinho. Os seletores das CSS2 acessam os valores de atributos, frequentemente usados para fornecer contedo alternativo. Com CSS2 os valores de atributos podem ser renderizados no documento juntamente com o contedo primrio do elemento.

Implementaes das CSS

poca da publicao desta NOTA, os browsers em sua maioria ainda no implementam consistemente as CSS2. Contudo a ltima gerao de browsers da maioria dos fabricantes, tm demonstrado uma slida implementao da maior parte das CSS1, algo de CSS2 e, as implementaes esto em crescimento. Obviamente os benefcios descritos neste documento no estaro plenamente disponveis sem uma total implementao das CSS1 e CSS2. parte de se projetar um documento acessvel com uso das folhas de estilo, h que se assegurar que o documento continuar acessvel quando as folhas de estilo forem desabilitadas ou no suportadas. Mesmo sem um suporte consistente pelos browsers para as CSS os desenvolvedores de contedo devem criar seus documentos acessveis, misturando caractersticas de CSS para acessibilidade com algumas caractersticas do HTML. Documentos HTML que se utilizam de caractersticas de apresentao no HTML em lugar de folhas de estilo devem transformar-se graciosamente. Por exemplo, tabelas usadas para layout devem "fazer sentido" quando renderizadas serialmente.

Caractersticas de acesibilidade das CSS2

A seguir uma lista de caractersticas das CSS2 que afetam a acessibilidade (e a seo onde elas esto definidas nas especificaes das CSS2). Logo a seguir a lista, uma explicao de como cada caracterstica afeta a acessibilidade. Nota. Nomes de propriedades esto ressaltados com uso de apstrofe, a conveno usada pelas especificaes das CSS1 e CSS2. Espaamento, alinhamento e posicionamento 'text-indent' (16.1); 'text-align' (16.2); 'word-spacing' e 'letterspacing' (16.4); 'font-stretch', (15.2.3); 'margin', 'margin-top', 'margin-right', 'margin-bottom', e 'margin-left' (8.3); 'float' (9.5.1), 'position' (9.3.1); 'top', 'right', 'bottom', e 'left' (9.3.2); 'empty-cells'

4 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

(17.6.1) Prioridade para estilos do usurio !important (6.4.1); o valor 'inherit' (6.2.1); fontes do sistema (15.2.5); cores do sistema (18.2); tipos de listas (12.6.2); molduras dinmicas ('outline', 'outline-width', 'outline-style', e 'outline-color') (18.4) Gerando contedo :before/:after pseudo-elementos (5.12.3, 12.1); 'content' (12.2); 'cue', 'cue-before', e 'cue-after' (19.5) Folhas de estilo para mdia de udio (aural) 'volume' (19.2); 'speak' (19.3); 'pause', 'pause-before', e 'pauseafter' (19.4); 'cue', 'cue-before', 'cue-after' (19.5); 'play-during' (19.6); 'azimuth', 'elevation' (19.7); 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', e 'richness' (19.8); 'speakpunctuation' e 'speak-numeral' (19.9) Acesso contedo alternativo seletores de atributos (5.8); a funo attr() (12.2) WebFonts Ver captulo 15 das especificaes CSS2.

Espaando, alinhando e posicionando

CSS2 permite aos autores controlar o posicionamento de textos na pgina com o uso de indentao de textos, margens, floats, e posicionamentos absoluto e relativo. Usando propriedades CSS2 para conseguir efeitos visuais, os autores podem escrever um HTML mais simples, eliminar o uso de imagens e espaos em branco ( ) para conseguir posicionamento. As propriedades a seguir controlam espaamento, alinhamento e posicionamento: 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Cada uma destas propriedades permite controlar espaamentos sem necessidade de acrescentar espaos adicionais. Por exemplo, em lugar de escrever "H E L L O" (que agentes de usurio geralmente reconhecem como a palavra "hello" mas que leitores de tela reconhecem como letras individuais - soletram), os autores criaro o efeito visual usando a propriedade 'word-spacing' aplicada a "HELLO". 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. Com estas propriedades os autores podem criar espaamentos ao redor de um elemento em lugar de usar espaos adicionais ( ), que uma marcao no standard.

5 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

'float', 'position', 'top', 'right', 'bottom', 'left'. Com esta propriedade controla-se o posicionamento visual de qualquer elemento, independentemente da posio que ele ocupa no HTML do documento. Os autores podem criar documentos que tenham uma sequncia lgica e faam sentido, sem as folhas de estilo (isto , os documentos podem ser escritos em uma ordem lgica) e ento aplicar folhas de estilo para os efeitos visuais. As propriedades de posicionamento podem ser usadas para criar notas marginais (que podem ser automaticamente numeradas), barras laterais, efeitos simulando quadros (frames) topos e rodaps e muito mais. A propriedade 'empty-cells' permite deixar clulas de tabelas vazias e ainda assim serem renderizadas com bordas, na tela, ou em papel (quando impressas). Uma clula de dados que necessite estar vazia no precisa ser preenchida com um espao em branco ou um caracter ( ) para se conseguir o efeito visual das bordas.

Prioridade para estilos do usurio

Com o propsito de permitir ao usurio o controle sobre os estilos, CSS2 mudou o conceito semntico do operador "!important" como estava definido em CSS1. Em CSS1 o autor sempre tinha a palavra final sobre os estilos. Em CSS2 se uma declarao de estilo do usurio contm o operador "!important", ela prevalecer sobre qualquer regra de estilo aplicvel, definida pelo autor. Esta uma caracterstica importante para aqueles usurios que precisam evitar certas combinaes de cores ou contrastes, para usurios que necessitam de fontes grandes, etc. A regra de estilo mostrada a seguir especifica uma fonte grande para um texto no pargrafo e dever sobrescrever uma regra do autor de igual peso:
P { font-size: 24pt !important }

O valor 'inherit' nas CSS2 - quando disponvel para a propriedade - ser igualmente herdado como "!important" nas regras de estilo que regem a apresentao do documento. As regras de estilo a seguir foram todos os fundos a assumir a cor branca e todos os textos a assumir a cor preta:
/* Define a cor dos textos preta e a cor do fundo branca para todo o documento.

6 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

*/ BODY { color: black !important ; background: white ! important } /* Os valores para 'color' e 'background' sero herdados por todos os elementos, reforado por !important. Convm notar que isto pode ser sobrescrito por uma regra, mais especfica do usurio. */ * { color: inherit !important ; background: inherit !important }

CSS2 inclui ainda mais as seguintes caractersticas de controle para o usurio: Cores do sistema (para 'color', 'background-color', 'border-color', e 'outline-color') e fontes do sistema (para 'font') ou seja, o usurio poder aplicar aos documentos Web um estilo igual ao adotado para as cores do seu sistema operacional e de fontes igual s suas preferidas adotadas no sistema. Molduras dinmicas (a propriedade 'outline' ) permitem aos usurios (p. ex., com baixa viso) criar molduras dinmicas em volta de contedo sem alterar o layout, mas ressaltando informaes. Por exemplo, para colocar uma linha preta grossa em volta de um elemento quando ele receber o foco e uma linha vermelha grossa quando estiver ativo, as seguintes regras podem ser usadas:
:focus { outline: thick solid black } :active { outline: thick solid red }

Gerando contedo
CSS2 inclui vrios mecanismos que geram contedos a partir das folhas de estilo: os pseudo-elementos :before e :after e a propriedade 'content'. Quando usadas em conjunto, elas permitem ao autor inserir
7 de 12 07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

marcas (p.ex., contadores e "strings" tais como "Fim do Exemplo" ver regras a seguir) antes ou aps o contedo de um elemento . as propriedades 'cue', 'cue-before', e 'cue-after'. Estas propriedades permitem fazer tocar um som antes ou aps o contedo de um elemento. Os estilos de marcadores para listas podem ser nmeros, marcas ou imagens (usualmente agregados ao elemento LI do HTML). CSS2 adicionou estilos internacionais para listas queles j definidos em CSS1. Ver as propriedades 'list-style-type' e 'content'. Os contedos gerados por folhas de estilo podem servir de marcadores para ajudar na navegao pelo documento e manter o usurio informado do contexto quando ele estiver impossibilitado de acesso visual ao documento, como por exemplo, barras de rolagem, frames com tabelas de contedos, etc. No exemplo a seguir a regra de estilo far com que as palavras "Fim do Exemplo" seja gerada logo aps cada exemplo que tenha sido marcado em uma DIV com a classe "exemplo" no documento:
DIV.exemplo:after { content: Fim do Exemplo }

Os usurios podem tambm numerar pargrafos de modo a que possam facilmente localizar a posio onde esto no documento:
P:before { content: counter(paragraph) ". " ; counter-increment: paragraph }

Folhas de estilo para a mdia de udio (aural)

As propriedades para mdia de udio (aural) em CSS2's permitem fornecer informao a usurios com restries visuais e usurios com browsers de voz da mesma forma que as fornecidas para usurios sem restries. O exemplo a seguir mostra como variados tipos de som (a incluido 'voice-family', que algo parecido com uma fonte de udio) pode fazer com que o usurio identifique um contedo como sendo um cabealho:
H1 {

8 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

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

As propriedades a seguir pertencem s folhas de estilo para a mdia de udio (aural) das CSS2. 'volume' controla o volume. 'speak' controla como um contedo deve ser lido, se corrido ou soletrado.. 'pause', 'pause-before', e 'pause-after' Controla as pausas durante a leitura. Isto permite aos usurios separar contedos tornando-os mais compreensveis. 'cue', 'cue-before', e 'cue-after' especifica um som a ser tocado antes ou depois da leitura o que pode tornar-se valioso para orientar o usurio (como se fosse um cone visual). 'play-during' controla um som de fundo enquanto um elemento renderizado ( semelhana de uma imagem de fundo). 'azimuth' e 'elevation' d a dimenso ao som, permite distinguir vozes, por exemplo. 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', e 'richness' controla a qualidade. Variando estas propriedades para os elementos do documento, os usurios podem fazer um ajuste fino de como os contedos so apresentados em mdia de udio (aural). 'speak-punctuation' e 'speak-numeral' controla como nmeros e pontuao so lidos, influindo na qualidade do browser aural. Alm disso a propriedade 'speak-header' descreve como os cabealhos de tabelas sero lidos antes de cada clula.

Acesso representao alternativa para contedo

CSS2 permite aos usurios acessar contedos alternativos que so especificados em valores de atributos, quando usados em conjunto: seletores de atributos . a funo attr() e a propriedade 'content' os pseudo-elementos :before e :after No exemplo a seguir o valor do atributo "alt" da imagem renderizado aps a imagem (em mdia de udio (aural), visual, etc.):

9 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

IMG:after { content: attr(alt) }

Convm notar que o valor do atributo ser renderizado mesmo que a imagem no o seja (p.ex., em agentes com imagens desabilitadas pelo usurio)

Mdias
Os "tipos de mdia" em CSS2 (usadas com regras @media) permitem aos autores e aos usurios projetar folhas de estilo que renderizem os documentos de forma mais apropriada ao dispositivo utilizado. Estas folhas de estilo podem moldar os contedos para apresentao em dispositivos braille, sintetizadores de voz, ou dispositivos tty. Usando @media pode ser reduzido o tempo de download fazendo com que o agente de usurio ignore folhas de estilo que no lhe so aplicveis.

Sobre a Web Accessibility Initiative ('Grupo de sugestes para acessibilidade a Web')

W3C's Web Accessibility Initiative (WAI) est envolvido com a acessibilidade Web atravs de cinco atividades complementares que: 1. Assegure que as tecnologias da Web ofeream suporte acessibilidade 2. Desenvolva guias de acessibilidade 3. Desenvolva ferramentas capazes de aperfeioar e corrigir Web sites 4. Coordene educao e expanso 5. Conduza pesquisas e desenvolvimento WAI's International Program Office habilita seus parceiros industriais, organizaes para portadores de restries, organizaes de pesquisas de acessibiliade e rgos governamentais interessados na criao de uma Web acessvel. Entre os patrocinadores da WAI esto o US National Science Foundation and Department of Education's National Institute on Disability and Rehabilitation Research; the European Commission's DG XIII Telematics for Disabled and Elderly Programme; Telematics Applications Programme for Disabled and Elderly; Government of Canada, Industry Canada; IBM, Lotus Development Corporation, and NCR. Informaes adicionais sobre a WAI encontram-se em http://www.w3.org/WAI/.

10 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

Sobre as guias da WAI Web Accessibility

As guias para acessibilidade Web so essenciais para o desenvolvimento de Web sites e o desenvolvimento de tecnologia Web. WAI em coordenao com vrias organizaes produz trs conjuntos de guias: Guia para acessibilidade contedos Web 1.0 ([WAIWEBCONTENT]) para Web sites acessveis. Guia para acessibilidade de agentes de usurio ([WAI-USERAGENT]) para agentes de usurios acessveis (browsers, players de multimdia e as tecnologias assistivas com eles utilizadas). Guias para ferramentas de produo para acessibilidde ([WAIAUTOOLS]) para ferramentas de produo de acessibiliadde (editores, gerenciadores de site, ferramentas de transformao, e ferramentas de gerao).

Sobre o World Wide Web Consortium (W3C)

O W3C foi criado para conduzir a Web ao seu potencial mximo, desenvolvendo protocolos comuns que promovam sua evoluo e assegurem sua interoperabilade. um consrcio internacional de indstrias gerenciado pelo Laboratrio de Cincia da Computao nos EUA, pelo Instituto Nacional de Pesquisas para Cincia da Computao e Controles na Frana e pela Universidade de Keio no Japo (MIT Laboratory for Computer Science (LCS) nos USA, o National Institute for Research in Computer Science and Control (INRIA) na Frana e Keio University no Japan). Os servios prestados pelo Consrcio incluem: um repositrio de informaes sobre a World Wide Web para desenvolvedores e usurios; referncias para implementao de cdigos que englobem e promovam as standards; e vrios prottipos e exemplos para demonstrar o uso de novas tecnologias. Atualmente, mais de 320 organizaes so Membros do Consrcio. Para mais informaes sobre o World Wide Web Consortium, ver http://www.w3.org/

Referncias
Uma lista das Recomendaes do W3C e outros documentos tcnicos pode ser encontrada em: http://www.w3.org/TR. [CSS2] "Cascading Style Sheets, level 2", B. Bos, H. W. Lie, C. Lilley, and I. Jacobs, 17 May 1998.

11 de 12

07-10-2010 20:56

Caractersticas de acessibilidade das CSS

http://www.maujor.com/w3c/craccss.html

[CSS1] "Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 December 1996. Revised 11 January 1999. [HTML40] "HTML 4.0 Recommendation", D. Raggett, A. Le Hors, and I. Jacobs, eds., 18 December 1997, revised 24 April 1998. [XML10] "Extensible Markup Language (XML) 1.0.", T. Bray, J. Paoli, C.M. Sperberg-McQueen, eds., 10 February 1998. [WAI-AUTOOLS] Latest version of "Authoring Tool Accessibility Guidelines", J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, eds. [WAI-WEBCONTENT] "Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 May 1999 [WAI-USERAGENT] Latest version of "User Agent Accessibility Guidelines", J. Gunderson and I. Jacobs, eds.

12 de 12

07-10-2010 20:56