Acessibilidade — Aumentar e Diminuir texto com JavaScript

É comum ver em sites aqueles botões de Acessibilidade para Aumentar ou Diminuir a fonte dos textos, que facilita a vida de pessoas com problemas de visão. Vamos ver como isso é feito utilizando Javascript e JQuery.

Utilizando funções simples da biblioteca JQuery

Antes de tudo vamos precisar da biblioteca JQuery. Este é um exemplo simples de como criar botões de acessibilidade para aumentar e diminuir o tamanho do texto em elementos do seu site através da linguagem JavaScript com a ajuda da biblioteca JQuery que sempre facilita o trabalho para nós desenvolvedores.

Botões para aumentar e diminuir o tamanho da fonte.

Começamos criando simples botões com uma função onClick() que irá aumentar ou diminuir o tamanho da fonte. Veja como é simples.

<button onClick="fonte('a');">+</button>
<button onClick="fonte('d');">-</button>

Função JavaScript para alterar o tamanho da fonte.

Vamos criar agora arquivo fonte.js, que deve conter a função que fará toda a mágica acontecer em nosso site.

Agora basta adicionar a class .acessibilidade aos elementos que devem ser afetados pela função.

<p class="acessibilidade">
Exemplo de texto com a class Acessibilidade;
</p>

Baixe um exemplo no GitHub

Para mais detalhes confira em meu GitHub o repositório que criei com a finalidade de tornar simples e fácil a implementação desta e outras funções de acessibilidade: https://github.com/lucianobragaweb/acessibilidade