Um Guiazinho Simples de Técnicas de Estilo CSS ou Tudo Que Você Deveria Saber Mas Por Usar IE Não Entendia ou Como Ser Inteligente e Não Criar Sites Tão Imbecis Essa lista foi elaborada após um estudo pessoal e informal do guia criado pelo W3C sobre técnicas de CSS para se criar conteúdos acessíveis na Internet. Apesar do guia ser um tanto antigo (data de novembro de 2000), tudo que vale a pena ser dito e ouvido, deve ser lembrado diariamente. Entretanto, algumas vezes as coisas fedem mesmo assim, pois muita gente continua ignorando algumas boas práticas de estilos listadas abaixo. Alguns trechos desse documento podem variar em relação ao original, e até mesmo não concordar com o mesmo. Se possível, leia o original antes. O guia original pode ser encontrado em: http://www.w3.org/TR/WCAG10-CSS-TECHS/ Após escrever esse texto, acabei achando na Internet, uma tradução não-oficial para português, que pode ser conferida em: http://www.maujor.com/w3c/tec_css_acess.html 01. Use uma quantidade mínima de estilos no site: um estilo padrão, um para impressão e outro para os usuários que necessitam de uma melhor acessibilidade e usabilidade. 02. Use estilos ligados à pagina ao invés de enxertados no cabeçalho da página e, por favor, nunca, jamais, use estilos dentro das tags do documento. 03. Caso haja mais que um estilo, use o mesmo nome de classes para o mesmo conceito em todos os estilos extras. 04. Evite ao máximo usar o operador !important. Atualmente o poder de controlar o estilo da página está nas mãos do usuários, pois os estilos deles possuem mais importância do que os utilizados no documento exibido. 05. Se viável, em casos particulares, use a propriedade outline, cores e fontes do ambiente do usuário (por questão de acessibilidade local). 06. Use a medida de unidade em para fontes. Pare de usar medidas absolutas e passe a adotar formas relativas. Só use medidas absolutas se as características físicas do objeto na página forem conhecidas - como em imagens. A proporção da unidade em é 1em, igual à largura da letra m na fonte escolhida. 07. Não use imagens ou outra coisa para exibir algo quando já existe uma marcação própria pra isso. Exemplo:

. 08. Crie documentos bem organizados. Se a página fica confusa quando a vemos sem o seu estilo aplicado, então ela é uma porcaria. 09. Caso use a propriedade content ou imagens com significados (como em logotipos), sempre forneça um equivalente em texto. Imagens, em geral, sempre devem ter um texto alternativo. 10. Nunca crie conteúdos importantes através de estilos CSS (propriedade content). Se é importante, deve estar estruturalmente organizado no código fonte da página. 11. Use a propriedade content com cautela, mas lembre-se que em alguns casos ela é fundamental por questões de acessibilidade. Exemplo: P:before { content: counter(paragraph) ". "; counter-increment: paragraph; } Isso irá numerar todos os seus parágrafos. Assim, os usuários que se perderem pelo conteúdo da página poderão se localizar na mesma mais facilmente. 12. Sempre, sempre mesmo, especifique uma família de fonte genérica, e deixe de usar elementos e atributos de fonte no código da página. 13. Ainda que o usuário possa controlar a visualização de informações da página, nem pense em exibir conteúdo piscante ou que seja escondido e exibido em espaços de tempo regulares ou em qualquer outra forma. Se é importante, deve estar acessível sempre. 14. Apesar do jogo já estar na metade, só pra relembrar: use estilos para controlar o visual da página e posicionamentos. O código do documento deve permanecer puro, somente com o conteúdo cru. 15. Para especificar cores de objetos, somente use valores hexadecimais (como #FF0000, para vermelho) ou códigos RGB na base 10 (como rgb(255, 0, 0), para vermelho também). Convenções como red, black e green são toscas. 16. Sempre que especificar uma cor pra textos, indique uma cor de fundo que seja contrastante e vice-versa. Isso facilitará a vida de pessoas com algum problema de leitura ou deficiência visual. 17. Tenha total certeza de que o conteúdo colorido exibido poderá ser lido ou acessado sem nenhum estilo de fonte ou cor. 18. Itens listados na página devem seguir a lógica das marcações: Use ul para listas não-ordenadas e ol para ordenadas. Pode-se usar o exemplo de numeração de parágrafos acima para exibir listas de modo mais acessível. 19. Usar espaçadores em forma de imagens invisíveis é coisa de criancinha. Use alinhamentos, posicionamentos etc via estilos, ou então use o espaçamento natural de certas marcações. 20. Usar hr é coisa de quem fazia sites (ruins) na década de 90. Existem formas melhores de se separar conteúdo: usando bordas ou mesmo estruturando melhor o código da página. 21. Mais uma vez: ainda que o visual do documento possa ser alterado usando-se estilos, tornando-o estruturalmente diferente do código original, organize o seu código corretamente. Faça com que ele tenha sentido, mesmo quando não se aplicar estilos a ele. 22. Sempre informe dados importantes e básicos sobre o documento, como língua, tipo de conteúdo existente etc. Assim os usuários poderão escolher o tipo de informação que querem receber. 23. Se precisar usar propriedades de estilo aurais, desenvolva o estilo da página de modo que a estrutura do código original possa ser melhor compreendida; como especificando um tom de voz mais grave para títulos. 24. Se possuir estilos voltados à mídias específicas, indique-os corretamente através de tipos (como no caso de estilos voltados para somente impressão, ou para sintetizadores de voz). 25. Por último, mas sendo o item mais importante: os estilos que formatam o visual e exibição de conteúdos devem ser, antes de mais nada, simples; o quanto puderem ser. Simplicidade é tudo. Referências: http://www.w3.org/WAI/ http://www.w3.org/TR/WCAG10-CSS-TECHS/ http://www.w3.org/TR/REC-CSS2/ http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505 http://www.w3.org/TR/2004/WD-WCAG20-20040311// http://www.w3.org/2001/sw/ E sobre como agir com simplicidade: http://digital-web.com/columns/keepitsimple/keepitsimple_2003-11.shtml -- Caio Begotti (entercaio@uol.com.br) Mozilla Brasil http://www.mozilla.org.br/~cbegotti/