Nesse post vou explicar uma das opções de como fazer um contraste de cores, existe diretrizes de acessibilidade da WCAG 2.0 que explica o nível aceitável de contraste de cores esperadas em um site, veja nesse link.
Proposta
Criar um contraste de cores em três níveis (Branco, Preto e Azul) usando HTML5, CSS3, Javascript (Puro), Node e o Cookie do navegado para guarda o contraste escolhido.
Como será feito
- Em uma página teremos quatro links em que o usuário vai escolher (Preto, branco, azul ou sem contraste).
- No evento de click vamos passar para o javascript um valor do atributo ‘data-contraste’.
- Vai ser adicionar na tag ‘body’ um ‘id’ para o CSS fazer toda a mágica de trocar as cores da página.
- Vai ser guardado no cookie a opção selecionada.
Veja como vai ficar;
- Então…
HTML
O HTML para esse tipo de projeto é de extrema necessidade ser no mínimo validado pelo W3C e ter nível “AAA” em alguma ferramenta de análise de acessibilidade, no caso eu usei o Accessmonitor, já usando a WCAG 2.0.
A atenção na contrução do HTML vai determinar se o usuário acessível vai ter uma boa experiência no seu site ou não.
Umas das recomendações da WCAG 2.0 é que o primeiro link do site leve para o conteúdo principal, com isso você já ganha uns pontinhos na ferramenta de análise de acessibilidade.
CSS
O CSS é muito importante, se possível não usar CSS inline, a utilização de unidades relativas (EM, %, REM) na escrita do CSS melhora a acessibilidade. Validar o CSS vai apontar erros que deixamos passar, para isso temos a ferramenta de análise da W3C o CSS Validation Service. Não vou postar aqui o CSS, mas logo abaixo vou deixar o link do projeto completo ;).
Javascript
Nesse post resolvi usar javascript puro, pois se trata de uma aplicação simples e não haveria a necessidade de usar JQuery ou alguma lib ou Framework e também eu amo javascript puro, acho bem desafiador /.
Esse Javascript modularizei em três blocos.
1 – A escolha do contraste no click do link
2 – A Função de setar o contraste.
3 – A verificação do cookie gravado
Node + Cookie
Node? sim, usaremos o Node para subir um servidor, pois não da pra guardar cookie sem um servidor, vamos precisar usar o Node, mas é super simples.
Não sabe usar? Não sabe o que é? tem um poste aqui muito bom que vai te dar o caminho das pedras, nesse link.
No site NPMJStemos um servidor em que iremos utilizar, abra seu Node e manda essa;
Pronto, o resultado será esse;
Agora navegando com o Node até a pasta do seu projeto;
Ok, você já tem um servidor no ar, utilize um dos endereços http listados e abra no seu navegador de preferência (Chrome);
Já está tudo pronto, com o servidor no ar já podemos gravar no cookie a escolha do contraste selecionada pelo usuário, isso vai evitar que o usuário atualize a página e carregue a página sem o contraste escolhido.
já podemos verificar o cookie guardado depois do click no link
Com esse valor guardado no cookie o passo 3 vai funcionar perfeitamente, setando o contraste escolhido anteriormente ao recarregar a página.
