Características de acessibilidade das CSS

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:

• 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Cada uma destas propriedades permite controlar espaçamentos sem necessidade de acrescentar espaços adicionais. Por exemplo, em lugar de escrever "H E L L O" (que agentes de usuário geralmente reconhecem como a palavra "hello" mas que leitores de tela reconhecem como letras individuais - soletram), os autores criarão 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 espaçamentos ao redor de um elemento em lugar de usar espaços adicionais ( ), que é uma marcação não standard.
• 'float', 'position', 'top', 'right', 'bottom', 'left'. Com esta propriedade controla-se o posicionamento visual de qualquer elemento, independentemente da posição que ele ocupa no HTML do documento. Os autores podem criar documentos que tenham uma sequência lógica e façam sentido, sem as folhas de estilo (isto é, os documentos podem ser escritos em uma ordem lógica) e então 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 rodapés e muito mais.
• A propriedade 'empty-cells' permite deixar células de tabelas vazias e ainda assim serem renderizadas com bordas, na tela, ou em papel (quando impressas). Uma célula de dados que necessite estar vazia não precisa ser preenchida com um espaço em branco ou um caracter ( ) para se conseguir o efeito visual das bordas.

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:

• Cores do sistema (para 'color', 'background-color', 'border-color', e 'outline-color') e fontes do sistema (para 'font') ou seja, o usuário 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 dinâmicas (a propriedade 'outline' ) permitem aos usuários (p. ex., com baixa visão) criar molduras dinâmicas em volta de conteúdo sem alterar o layout, mas ressaltando informações.

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 pseudo-elementos :before e :after e a propriedade 'content'. Quando usadas em conjunto, elas permitem ao autor inserir marcas (p.ex., contadores e "strings" tais como "Fim do Exemplo" ver regras a seguir) antes ou após o conteúdo de um elemento .
• as propriedades 'cue', 'cue-before', e 'cue-after'. Estas propriedades permitem fazer tocar um som antes ou após o conteúdo de um elemento.
• Os estilos de marcadores para listas podem ser números, 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 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.

• 'volume' controla o volume.
• 'speak' controla como um conteúdo deve ser lido, se corrido ou soletrado..
• 'pause', 'pause-before', e 'pause-after' Controla as pausas durante a leitura. Isto permite aos usuários separar conteúdos tornando-os mais compreensíveis.
• '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 usuário (como se fosse um ícone visual).
• 'play-during' controla um som de fundo enquanto um elemento é renderizado ( à semelhança de uma imagem de fundo).
• 'azimuth' e 'elevation' dá a dimensão 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 usuários podem fazer um ajuste fino de como os conteúdos são apresentados em mídia de áudio (aural).
• 'speak-punctuation' e 'speak-numeral' controla como números e pontuação são lidos, influindo na qualidade do browser aural.

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:

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

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:

• Guia para acessibilidade à conteúdos Web 1.0 ([WAI-WEBCONTENT]) para Web sites acessíveis.
• Guia para acessibilidade de agentes de usuário ([WAI-USERAGENT]) para agentes de usuários acessíveis (browsers, players de multimídia e as tecnologias assistivas com eles utilizadas).
• Guias para ferramentas de produção para acessibilidde ([WAI-AUTOOLS]) para ferramentas de produção de acessibiliadde (editores, gerenciadores de site, ferramentas de transformação, e ferramentas de geração).

Sobre o World Wide Web Consortium (W3C)

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.