Continuando nossa série de acessibilidade e joomla, iremos editar a folha de estilos para portadores de deficiência visual. Deixar um template totalmente acessível é meio demorado mesmo e por isso peço paciência a todos. O resultado final, com certeza será satisfatório. Se você chegou agora e não leu o segundo artigo, faça isto antes de continuar,
1) Primeiro vamos salvar o arquivo daltonismo.css como contraste.css
2) agora iremos editar a folha de estilos contraste.css e para tal vamos avaliar o uso do alto contraste:
" O princípio fundamental para Acessibilidade Web para pessoas com baixa visão é:
1. Perceptível: porque o conteúdo não pode ser percebido (visto) ou o conteúdo é muito pequeno, não pode ser ampliado, ou que não têm suficiente contraste. Este princípio ajuda a visualização para alguém que tem baixa visão.
Alto Contraste - Sites com baixo contraste podem ser difíceis de ler para pessoas com baixa visão. Alguns websites mal concebidos na web têm más combinações, como a cor azul em links com backgrounds preto, texto em vermelho, sobre fundo azul, ou outras combinações que não possuem boa combinção para os olhos de ninguém, especialmente para pessoas com baixa visão. Não existe nenhuma regra quanto à forma de muito contraste ser suficiente, mas use o bom senso e lembre-se da psicologia de cores, "gestalt". No entanto, normalmente é muito difícil dizer quando cores e combinações não têm contraste adequado.
Experiemente você mesmo - Aqui estão algumas idéias para simular aproximadamente o baixo contraste para a visão:
* Desligar o contraste em seu monitor
* Olhar para o monitor através de um tecido ou um pedaço de papel (esta técnica é mais bem sucedida no laptop e monitores LCD do que em monitores comuns)
Na medida do possível, busque aumentar o contraste das suas páginas da web, incluindo gráficos, fontes e origens. Para permitir que as pessoas possam personalizar os ajustes de contraste é melhor colocar o máximo possível de texto verdadeiro em vez de usar textos em gráficos.
Sempre que possível dê preferência ao uso de porcentagens ao invés de unidade de medidas absolutas (por exemplo pixel), para compôr um documento. Desta forma você permitirá aos usuários a possibilidade de aumentar o tamanho da fonte." Fonte: Brasilmedia
3) De forma análoga a folha de estilos para daltônicos, vamos utilizar o firebug para identificar o seletor da barra que no caso é a div ja-mainnavwrap e mudar o fundo para preto. 
4) Mude no firebug à esquerda, o background de #cccccc; para #000000; após verificar a alteração, copie (ctrl+c)
Agora, abra a folha de estilos contraste.css e altere a linha 3 da mesma, colando (ctrl+v) a nova cor de fundo. Perceba que agora, a alteração foi gravada na folha de estilos contraste.css
5) Copiamos toda a parte de código que começa no comentário /* STYLING THE MENU -------*/ até o final do arquivo e colamos no início do arquivo contraste.css.
6) Precisamos mudar também, a cor da fonte do link de branco #ffffff; para um tom alaranjado por exemplo #FF6600; O arquivo a ser alterado é o ja-sosdemenu.css que está em templates/acessivel/css. Copie o código alterado no firebug e cole no ja-sosdemenu.css na linha 238.
7) A folha de estilos contraste.css é a mais complexa já que teremos que alterar o background para a cor preta com fonte laranja. o primeiro passo é encontrar a chamada ao arquivo cwf-bg.gif que está em images/cwf-bg.gif dentro do contraste.css e alterar o caminho para images/contraste/cwf-bg.gif. Para tal crie o diretório contraste dentro de templates/acessivel/images
8) Crie sua imagem no fireworks ou use um editor online, sugiro o http://www.pixlr.com/app/?loc=pt-br
Veja as duas chamadas da imagem devidamente alteradas. Não esqueça de alterar o #F6F6F6; para #000; em ambas as chamadas.
9) Faça o mesmo procedimento com a imagem hdot.gif
10) Agora iremos alterar a imagem de fundo dos módulos do bottom e para tal devemos alterar a imagem de nome vdot2.gif. Na dúvida basta clicar com o botão direito do mouse e clicar em exibir imagem de fundo.
(*) imagem exibida
Altere a imagem no editor de imagem e depois salve como vdot2.gif dentro do diretório templates/acessivel/images/contraste
O próximo passo é abrir o contraste .css, buscar a chamada a iamagem (ctrl + f) e alterar o caminho para contraste/vdot2.gif
11) Vamos alterar o cor de fundo da div que abriga os módulos do bottom de cinza para preto. Para tal use o firebug. Caso tenha dúvidas no uso do firebug, clique aqui! Nós podemos perceber que a linha que abriga a instrução que queremos editar é a de nr 1635 do arquivo contraste.css. Após testarmos o resultado obtido, através do firebug, copiamos e colamos no contraste.css dentro do aptana que é a IDE que estou usando.
12) Para terminar a div do bottom iremos mudar o título e o texto para a tonalidade laranja.Para mudar a cor dos textos e cabeçalhos devemos editar os seletores #body e body#bd da folha contraste.css.
13) Os estilos do rodapé estão compreendidos a partir da linha 1640 aproximadamente do arquivo contraste.css conforme imagem abaixo
Assim terminamos a edição da folha de estilos para portadores de deficiência visual, no próximo artigo aprenderemos a utilizar o editor online e mudaremos a chamada as imagens do topo de nosso template, para implementação do OCASO.
Uma vez que o website foi completamente testado, no ambiente de teste, você vai precisar implantá-lo em um ou mais servidores de produção. A transição do servidor de teste (esteja ele local ou não)é uma tarefa que exige uma atenção especial e basicamente é composta de ações a serem tomadas em ordem cronológica para que de tudo certo. 
