Código super simples em JavaScript puro para acessibilidade.
Com o intuito de ajudar a quem precisa criei essa classe super simples em JavaScript puro para ser usada em qualquer projeto WEB.
1. Inicie os Arquivos
Para começar a usar, inicie os arquivos CSS e JS.
<head>
<title>Acessibilidade</title>
<!-- STYLE E CONTRASTE -->
<link rel='stylesheet' id='styleContraste' href="css/style.css" type='text/css' media='all' />
<!-- ACESSIBILIDADE JS -->
<script src="js/acessibilidade.js"></script>
</head>OBS: Use o ID para poder mudar o CSS que será alterado.
DICA: Para não precisar escrever duas folhas de estilo, geralmente uso dois css um abaixo do outro. Sendo o primeiro o CSS DEFAULT e o segundo o css de contraste sobrescrevendo apenas as cores do arquivo DEFAULT.
2. Inicie a Função de Cookie
Para que os textos e cores sejam sempre ajustados conforme o salvo no COOKIE.
<body onload="checkCookie()">3. Adicione os Botões de Fonte
Para que as fontes possam ser alteradas e salvas no COOKIE utilize a base abaixo. Você pod estilizar da forma que quiser.
<span class="font-con">
<button Onclick="mudaFonte('menos'); return false;">A-</button>
<button Onclick="mudaFonte('padrao'); return false;">A</button>
<button Onclick="mudaFonte('mais'); return false;">A+</button>
</span>4. Adicione o Botão de Contraste
Ultilize o BUTTON abaixo para mudar o estilo css para o contraste. Para que altera a LABEL do botão use o ID.
<span class="font-con">
<button id="mudaEstilo" onClick="mudaContraste()">PRETO</button>
</span>5. Adicione a Classe de Formatação
Para poder aumentar e diminuir suas fontes use a classe "txtFontC", ou altere no arquivo JS para a que melhor lhe atender.
<div class="txtFontC">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit, amet...</p>
</div>Veja abaixo alguns sites que usam esses mesmo códigos:
https://www.senadorcanedo.go.gov.br/