Esta é a tradução da norma do W3C "Accessibility Features of CSS" publicado no site do W3C.

  1. A versão oficial e original, em inglês, deste artigo, encontra-se em:http://www.w3.org/1999/08/NOTE-CSS-access-19990804
  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 23 de março de 2005 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.

PR Tool

W3C

Características de acessibilidade das CSS

NOTA W3C 4 Agosto 1999

Esta Versão:
http://www.w3.org/1999/08/NOTE-CSS-access-19990804
Versão Anterior:
http://www.w3.org/1999/06/NOTE-CSS-access-19990616
Última Versão:
http://www.w3.org/TR/CSS-access
Editores:
Ian Jacobs (ij@w3.org)
Judy Brewer (jbrewer@w3.org)

Sumário

Este documento descreve sumariamente as características contidas nas Recomendações das Folhas de Estilo em Cascata nível 2 ([CSS2]) que afetam diretamente a acessibilidade aos documentos Web. Algumas das características aqui descritas já estavam disponíveis nas ([CSS1]). Este documento foi escrito, também, para servir de referência a outros documentos no que concerne a características 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 publicação de uma Nota do W3C não implica necessariamente que ela foi endossada pelos membros do W3C. Uma lista das publicações e matérias técnicas incluindo os esboços 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 apresentação. As folhas de estilo foram projetadas para propiciar um controle preciso - independente da marcação - do espaçamento de caracteres, alinhamento de texto, posicionamento de objetos na página, saídas de áudio e voz, características de fontes, etc. Separando os estilos da marcação os autores podem simplificar e limpar o HTML nos seus documentos, tornando-os mais acessíveis.

As CSS permitem um controle preciso de espaçamento, alinhamento e posicionamento. Os autores podem evitar o "uso incorreto de tags" - a prática em desuso de usar a marcação para obter efeitos de apresentação. Por exemplo, muito embora os elementos do HTML, BLOCKQUOTE e TABLE tenham a finalidade de marcar citações em bloco e apresentar dados tabulares respectivamente, eles são frequentemente usados para obter efeitos visuais de indentação e posicionamento. Browsers especiais tais como os leitores de tela, encontrarão grande dificuldade em tratar os elementos assim usados, podendo chegar a resultados inintelegíveis para o usuário.

Complementarmente a prevenção de mal uso de elementos HTML, as folhas de estilo podem também ajudar a evitar o mal uso de imagens. É comum a prática de os autores utilizarem imagens invisíveis de 1-pixel para posicionar conteúdo. Isto não só sobrecarrega o documento aumentando o tempo para download como também confunde os softwares de agentes de usuários que buscam por um texto alternativo (o atributo "alt") para as imagens. As propriedades CSS de posicionamento tornaram o uso de tais imagens completamente desnecessárias.

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 não estão disponíveis na máquina do usuário. Textos passados através de imagens não estão acessíveis aos softwares especias de agentes de usuários, tais como os leitores de tela, e nem podem ser indexados por robots de busca. Para corrigir esta situação um poderoso mecanismo de WebFonts em CSS permite ao usuário um controle total sobre as fontes no lado do cliente. Com as WebFonts, os autores podem se despreocupar com fontes não disponíveis na máquina do usuário. As fontes não disponíveis, podem ser substituídas convenientemente por outras disponíveis, tratadas por softwares do cliente e até mesmo serem baixadas da Web, tudo para atender as especificações do autor.

CSS permite aos usuários sobrescrever os estilos definidos pelo autores. Isto é muito importante para usuários imposibilitados de distinguir fontes e cores definidas pelo autor. CSS permite aos usuários visualizar documentos com suas fontes, cores, etc... preferidas, especificando-as em uma folha de estilos do usuário.

CSS oferece suporte para geração automática de numeração, marcas e outros conteúdos que podem auxiliar na orientação do usuário pelo documento. Listas muito longas, tabelas ou mesmo o documento como um todo, são mais fáceis de navegar quando numeração ou outros identificadores contextuais são fornecidos de uma maneira acessível.

CSS oferece suporte às folhas de estilo para mídia 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 usuários controlar o volume de voz de um conteúdo lido, sons de fundo, propriedades espaciais do som e uma série de outras propriedades para adicionar efeitos de modo a tornar os conteúdos textuais estilizados, com características análogas àquelas disponíveis para usuários com agentes visuais. .

CSS permite um controle mais preciso sobre a apresentação do conteúdo alternativo do que o HTML sozinho. Os seletores das CSS2 acessam os valores de atributos, frequentemente usados para fornecer conteúdo alternativo. Com CSS2 os valores de atributos podem ser renderizados no documento juntamente com o conteúdo primário do elemento.

Implementações das CSS

À época da publicação desta NOTA, os browsers em sua maioria ainda não implementam consistemente as CSS2. Contudo a última geração de browsers da maioria dos fabricantes, têm demonstrado uma sólida implementação da maior parte das CSS1, algo de CSS2 e, as implementações estão em crescimento.

Obviamente os benefícios descritos neste documento não estarão plenamente disponíveis sem uma total implementação das CSS1 e CSS2. À parte de se projetar um documento acessível com uso das folhas de estilo, há que se assegurar que o documento continuará acessível quando as folhas de estilo forem desabilitadas ou não suportadas.

Mesmo sem um suporte consistente pelos browsers para as CSS os desenvolvedores de conteúdo devem criar seus documentos acessíveis, misturando características de CSS para acessibilidade com algumas características do HTML. Documentos HTML que se utilizam de características de apresentação no HTML em lugar de folhas de estilo devem transformar-se graciosamente. Por exemplo, tabelas usadas para layout devem "fazer sentido" quando renderizadas serialmente.

Características de acesibilidade das CSS2

A seguir uma lista de características das CSS2 que afetam a acessibilidade (e a seção onde elas estão definidas nas especificações das CSS2). Logo a seguir a lista, uma explicação de como cada característica afeta a acessibilidade.

Nota. Nomes de propriedades estão ressaltados com uso de apóstrofe, a convenção usada pelas especificações das CSS1 e CSS2.

Espaçamento, alinhamento e posicionamento
'text-indent' (16.1); 'text-align' (16.2); 'word-spacing' e 'letter-spacing' (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' (17.6.1)
Prioridade para estilos do usuário
!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 dinâmicas ('outline', 'outline-width', 'outline-style', e 'outline-color') (18.4)
Gerando conteúdo
:before/:after pseudo-elementos (5.12.3, 12.1); 'content' (12.2); 'cue', 'cue-before', e 'cue-after' (19.5)
Folhas de estilo para mídia de áudio (aural)
'volume' (19.2); 'speak' (19.3); 'pause', 'pause-before', e 'pause-after' (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); 'speak-punctuation' e 'speak-numeral' (19.9)
Acesso à conteúdo alternativo
seletores de atributos (5.8); a função attr() (12.2)
WebFonts
Ver capítulo 15 das especificações CSS2.

Espaçando, alinhando e posicionando

CSS2 permite aos autores controlar o posicionamento de textos na página com o uso de indentação 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 espaços em branco ( ) para conseguir posicionamento.

As propriedades a seguir controlam espaçamento, alinhamento e posicionamento:

Prioridade para estilos do usuário

Com o propósito de permitir ao usuário o controle sobre os estilos, CSS2 mudou o conceito semântico do operador "!important" como estava definido em CSS1. Em CSS1 o autor sempre tinha a palavra final sobre os estilos. Em CSS2 se uma declaração de estilo do usuário contém o operador "!important", ela prevalecerá sobre qualquer regra de estilo aplicável, definida pelo autor. Esta é uma característica importante para aqueles usuários que precisam evitar certas combinações de cores ou contrastes, para usuários que necessitam de fontes grandes, etc. A regra de estilo mostrada a seguir especifica uma fonte grande para um texto no parágrafo e deverá sobrescrever uma regra do autor de igual peso:

P { font-size: 24pt !important }

O valor 'inherit' nas CSS2 - quando disponível para a propriedade - será igualmente herdado como "!important" nas regras de estilo que regem a apresentação do documento. As regras de estilo a seguir forçam 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.
 */

BODY { 
   color: black !important ;  
   background: white ! important 
}

 /* 
 Os valores para 'color' e 'background'
 serão herdados por todos os elementos, 
 reforçado por !important. Convém notar 
que isto pode ser sobrescrito por uma 
regra, mais  específica do usuário.
 */

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

CSS2 inclui ainda mais as seguintes características de controle para o usuário:

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 conteúdo

CSS2 inclui vários mecanismos que geram conteúdos a partir das folhas de estilo:

Os conteúdos gerados por folhas de estilo podem servir de marcadores para ajudar na navegação pelo documento e manter o usuário informado do contexto quando ele estiver impossibilitado de acesso visual ao documento, como por exemplo, barras de rolagem, frames com tabelas de conteúdos, etc.

No exemplo a seguir a regra de estilo fará com que as palavras "Fim do Exemplo" seja gerada logo após cada exemplo que tenha sido marcado em uma DIV com a classe "exemplo" no documento:

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

Os usuários podem também numerar parágrafos de modo a que possam facilmente localizar a posição onde estão no documento:

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

Folhas de estilo para a mídia de áudio (aural)

As propriedades para mídia de áudio (aural) em CSS2's permitem fornecer informação a usuários com restrições visuais e usuários com browsers de voz da mesma forma que as fornecidas para usuários sem restrições. 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 usuário identifique um conteúdo como sendo um cabeçalho:

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

As propriedades a seguir pertencem às folhas de estilo para a mídia de áudio (aural) das CSS2.

Além disso a propriedade 'speak-header' descreve como os cabeçalhos de tabelas serão lidos antes de cada célula.

Acesso à representação alternativa para conteúdo

CSS2 permite aos usuários acessar conteúdos alternativos que são especificados em valores de atributos, quando usados em conjunto:

No exemplo a seguir o valor do atributo "alt" da imagem é renderizado após a imagem (em mídia de áudio (aural), visual, etc.):

IMG:after { content: attr(alt) }

Convém notar que o valor do atributo será renderizado mesmo que a imagem não o seja (p.ex., em agentes com imagens desabilitadas pelo usuário)

Mídias

Os "tipos de mídia" em CSS2 (usadas com regras @media) permitem aos autores e aos usuários projetar folhas de estilo que renderizem os documentos de forma mais apropriada ao dispositivo utilizado. Estas folhas de estilo podem moldar os conteúdos para apresentação em dispositivos braille, sintetizadores de voz, ou dispositivos tty. Usando @media pode ser reduzido o tempo de download fazendo com que o agente de usuário ignore folhas de estilo que não lhe são aplicáveis.

Sobre a Web Accessibility Initiative ('Grupo de sugestões para acessibilidade a Web')

W3C's Web Accessibility Initiative (WAI) está envolvido com a acessibilidade à Web através de cinco atividades complementares que:

  1. Assegure que as tecnologias da Web ofereçam suporte à acessibilidade
  2. Desenvolva guias de acessibilidade
  3. Desenvolva ferramentas capazes de aperfeiçoar e corrigir Web sites
  4. Coordene educação e expansão
  5. Conduza pesquisas e desenvolvimento

WAI's International Program Office habilita seus parceiros industriais, organizações para portadores de restrições, organizações de pesquisas de acessibiliade e órgãos governamentais interessados na criação de uma Web acessível. Entre os patrocinadores da WAI estão 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.

Informações adicionais sobre a WAI encontram-se em http://www.w3.org/WAI/.

Sobre as guias da WAI Web Accessibility

As guias para acessibilidade à Web são essenciais para o desenvolvimento de Web sites e o desenvolvimento de tecnologia Web. WAI em coordenação com várias organizações produz três conjuntos de guias:

Sobre o World Wide Web Consortium (W3C)

O W3C foi criado para conduzir a Web ao seu potencial máximo, desenvolvendo protocolos comuns que promovam sua evolução e assegurem sua interoperabilade. É um consórcio internacional de indústrias gerenciado pelo Laboratório de Ciência da Computação nos EUA, pelo Instituto Nacional de Pesquisas para Ciência da Computação e Controles na França e pela Universidade de Keio no Japão (MIT Laboratory for Computer Science (LCS) nos USA, o National Institute for Research in Computer Science and Control (INRIA) na França e Keio University no Japan). Os serviços prestados pelo Consórcio incluem: um repositório de informações sobre a World Wide Web para desenvolvedores e usuários; referências para implementação de códigos que englobem e promovam as standards; e vários protótipos e exemplos para demonstrar o uso de novas tecnologias. Atualmente, mais de 320 organizações são Membros do Consórcio. Para mais informações sobre o World Wide Web Consortium, ver http://www.w3.org/

Referências

Uma lista das Recomendações do W3C e outros documentos técnicos 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.
[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.