Accessibility — Increase and decrease text with JavaScript

It’s common see in sites those buttons of Accessibility for Increase or Decrease the font of texts, which facilitates the life of peoples with vision problems. let’s go see how it is done using JavaScript and JQuery.

Using simple functions of JQuery Library

Before all let’s go need of JQuery library. This is a example of how create buttons of Accessibility for Increase and Decrease the size of text in elements of your site through Javascript language with help of JQuery Library what ever facilites the work for us developers.

Buttons for Increase and Decrease the size of text

We started creating simple buttons with a onClick() function which will increase or decrease the font size. See how is simple.

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

JavaScript function for change the font size

Let’s go now create the font.js file, that should contain the function which will make all the magic to happen on our site.

function fonte(e){
	var elemento = $(".acessibilidade");
	var fonte = elemento.css('font-size');
	if (e == 'a') {
		elemento.css("fontSize", parseInt(fonte) + 1);
	} else if('d'){
		elemento.css("fontSize", parseInt(fonte) - 1);

Now just add the class .acessibility to the elements that should be affected by the function.

<p class="acessibilidade">
     Example of text with .acessibility class.

Download a example on GitHub.com

For more details check the repository in my GitHub what create with the finality of become simple and ease the implementation of this and other functions of accessibility: https://github.com/lucianobragaweb/acessibilidade

Thanks for read, and sorry my english.


Luciano Braga

Hi there, I'm Luciano Braga and I'm a Full Stack Developer and student of Computer Science. I use this website to post about code, web technologies and others things as algorithms for sample. You can see my projects on GitHub.

Read More