Increase & Decrease Font Size To Improve Page Accessibility – Accessibility.js

Preview:

Description:

A tiny JavaScript plugin for web accessibility that enables the user to increase, decrease, and reset the font size of your web content.

How to use it:

1. Load the plugin’s JavaScript and CSS files in the document.

<link rel="stylesheet" href="css/acessibilidade.css" />
<script src="plugin/accessibility.js"></script>

2. Create Increase/Decrease/Reset buttons on the page.

<button id="increase-plugin-ac">A+</button>
<button id="normal-plugin-ac">A</button>
<button id="decrease-plugin-ac">A-</button>

3. Add the CSS class accessibility-plugin-ac to elements whose font-size property will be adjusted according to user needs.

<p class="accessibility-plugin-ac">
  <span><strong>This paragraph HAVE class CSS <code>.accessibility-plugin-ac</code></strong></span>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Est accusantium quo fugit assumenda itaque ullam, adipisci voluptatum officiis deserunt non reprehenderit perferendis iusto architecto. Molestias eius aliquam facere harum voluptate!
</p>