Acessibilidade Legal - Características de Acessibilidade das CSS.

Esquerda - Conteúdo.

Características de Acessibilidade das CSS.

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

A versão oficial e original, em inglês, deste artigo, encontra-se em: http://www.w3.org/1999/08/NOTE-CSS-access-19990804
A única versão oficial deste documento é a versão em língua inglesa que se encontra no site do W3C.
O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.
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.

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 ([CSS 2]) 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. softwares especiais tais como os leitores de tela, encontrarão grande dificuldade em tratar os elementos assim usados, podendo chegar a resultados ininteligí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 especiais 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 pelos autores. Isto é muito importante para usuários impossibilitados 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.

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 seqüê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.

Priorizando 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" sejam geradas 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; }

Proporcionando 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í incluído '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"); }

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

Assegure que as tecnologias da Web ofereçam suporte à acessibilidade
Desenvolva guias de acessibilidade
Desenvolva ferramentas capazes de aperfeiçoar e corrigir Web sites
Coordene educação e expansão
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 acessibilidade 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 acessibilidade ([WAI-AUTOOLS]) para ferramentas de produção de acessibilidade (editores, gerenciadores de site, ferramentas de transformação, e ferramentas de geração).

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 inter-operabilidade. É 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.

Copyright.

Disponibilizado em: 04/04/2008.