Contraste de cores – Acessibilidade na web

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).

por Orivelton Cesar 01/02/2017 Comentários

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.

html5-css-javascript-logos

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;

contraste-de-cores

  • Então…

ThomasCook_tagline_hori_cmyk


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.


<!DOCTYPE html>
<html lang="pt-BR">
 <head>
 <meta charset="utf-8">
 <title>Artigo contraste de cores</title>
 <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 <div class="row row-header">
 <div class="container">
 <nav>
 <ul>
 <li>
 <a href="#content" title="Ir para o Conteúdo">Ir para o Conteúdo</a>
 </li>
 <li>
 <a href="#" title="Ir para o Topo">Ir para o Topo</a>
 </li>
 <li>
 <a href="#footer" title="Ir para o Rodapé">Ir para o Rodapé</a>
 </li>
 <li>
 <a href="#" data-contraste="0" title="Sem Contraste">Sem Contraste</a>
 </li>
 <li>
 <a href="#" data-contraste="1" title="Contraste Branco">Contraste Branco</a>
 </li>
 <li>
 <a href="#" data-contraste="2" title="Contraste Preto">Contraste Preto</a>
 </li>
 <li>
 <a href="#" data-contraste="3" title="Contraste Azul">Contraste Azul</a>
 </li>
 </ul>
 </nav>
 </div>
 <!-- End - .container-->
 </div>
 <!-- End - .row-->
 <div class="row row-top">
 <div class="container">
 <strong>Front End Developer</strong>
 </div>
 </div>
 <div class="row row-banner">
 <div class="container">
 <h1>Hi my names is <span>Orivelton</span></h1>
 <img src="img/avatar.png" alt="Avatar Front End" class="avatar">
 <img src="img/avatar-preto.png" alt="Oculos do avatar" class="oculos">
 </div>
 </div>
 <div class="row row-content">
 <article class="container" id="content">
 <div class="box">
 <h2>Html5</h2>
 <i>★★★★★</i>
 <p>
 Mussum Ipsum, cacilds vidis litro abertis. Manduma pindureta quium dia nois paga.
 Nec orci ornare consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis.
 Si num tem leite então bota uma pinga aí cumpadi! Atirei o pau no gatis, per gatis num morreus.
 </p>
 </div>
 <div class="box">
 <h2>Css3</h2>
 <i>★★★★★</i>
 <p>
 Mussum Ipsum, cacilds vidis litro abertis. Manduma pindureta quium dia nois paga.
 Nec orci ornare consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis.
 Si num tem leite então bota uma pinga aí cumpadi! Atirei o pau no gatis, per gatis num morreus.
 </p>
 </div>
 <div class="box">
 <h2>Javascript</h2>
 <i>★★★★</i>
 <p>
 Mussum Ipsum, cacilds vidis litro abertis. Manduma pindureta quium dia nois paga.
 Nec orci ornare consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis.
 Si num tem leite então bota uma pinga aí cumpadi! Atirei o pau no gatis, per gatis num morreus.
 </p>
 </div>
 <div class="box">
 <h2>Typescript</h2>
 <i>★★★★</i>
 <p>
 Mussum Ipsum, cacilds vidis litro abertis. Manduma pindureta quium dia nois paga.
 Nec orci ornare consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis.
 Si num tem leite então bota uma pinga aí cumpadi! Atirei o pau no gatis, per gatis num morreus.
 </p>
 </div>
 </article>
 </div>
 <footer id="footer">
 Copyright (c) 2016 Copyright Holder All Rights Reserved.
 </footer>
 <script type="text/javascript" src="js/contraste.js"></script>
 </body>
</html>

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 \0/.

Esse Javascript modularizei em três blocos.

//Selecionando os links de contraste
var linksContraste = document.querySelectorAll('nav a[data-contraste]');

//Function click passando o valor do data-contraste para a function contraste setar o Id no body
linksContraste.forEach(linksContraste => linksContraste.addEventListener('click', function() {
 var dataContraste = this.dataset.contraste; // pegando o data-contraste da tag 'a'
 contraste(dataContraste); // Chamando a function contraste com um parâmetro passado pelo data-contraste da tag 'a'
 }
));

2 – A Função de setar o contraste.

function contraste(dataContraste) {
 var setId;
 //Verificação de qual contraste foi selecionado
 if (dataContraste == 1) {
 setId = 'contrasteBranco';
 } else if (dataContraste == 2) {
 setId = 'contrastePreto';
 } else if (dataContraste == 3) {
 setId = 'contrasteAzul';
 } else {
 setId = '';
 }
 // setando o ID do contraste escolhido no body
 document.querySelector("body").setAttribute("id", setId);
 // Guardando o cookie do contraste
 document.cookie = "contraste=" + setId + "";
}
// Verificação do cookie
var cookieContrasteBranco = document.cookie.indexOf('contrasteBranco');
var cookieContrastePreto = document.cookie.indexOf('contrastePreto');
var cookieContrasteAzul = document.cookie.indexOf('contrasteAzul');

//Verificando o cookie setado anteriormente
var cookieTrue = '';
if (cookieContrasteBranco != -1) {
 cookieTrue = 1;
} else if (cookieContrastePreto != -1) {
 cookieTrue = 2;
} else if (cookieContrasteAzul != -1) {
 cookieTrue = 3;
} else {
 cookieTrue = '';
}
//Chamando a function contraste com o valor do cookie guardado
contraste(cookieTrue);

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;

npm install http-server -g

Pronto, o resultado será esse;

capture

Agora navegando com o Node até a pasta do seu projeto;

http-server

Ok, você já tem um servidor no ar, utilize um dos endereços http listados e abra no seu navegador de preferência (Chrome);

capture

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

capture

Com esse valor guardado no cookie o passo 3 vai funcionar perfeitamente, setando o contraste escolhido anteriormente ao recarregar a página.


Veja o projeto completo no codepen e no github.