Acessibilidade — Aumentar e Diminuir texto com JavaScript

Luciano Braga Web
Jul 26, 2017 · 2 min read

É 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

lucianobragaweb

Programador Web Luciano Braga

Luciano Braga Web

Written by

Full Stack Developer

lucianobragaweb

Programador Web Luciano Braga

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade