Simple Plugin to Help Add Accessibility to Your Webpage | Accessibility.js

Accessibility WebPage is a small JavaScript plug-in for web accessibility that enables the user to increase, decrease, and reset the font size of web content.

It is a simple plugin to help you implement accessibility features in your webpage.

Must Read: A Robust Table for Angular Built with Accessibility | shark-ng-table

How to make use of it:

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

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

2. Create Increase/Decrease/Reset buttons on the web 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 parts whose font-size property can be adjusted in line with user’s wants.

<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>

Must Read: Step-by-step Progress Indicator Accessibility In Vue

See Demo And Download