PrabothCharith / accessibility-plugin

The Accessibility Plugin is a JavaScript library that helps improve the accessibility of your web applications. It provides a set of utility functions and components that can be easily integrated into your project.

Accessibility Plugin

Description

The Accessibility Plugin is a JavaScript library that helps improve the accessibility of your web applications. It provides a set of utility functions and components that can be easily integrated into your project.

Features

• Invert Colors: Inverts the colors of the page to improve readability for users with visual impairments.
• Grayscale: Converts the page grayscale to improve readability for users with visual impairments.
• Low Saturation: Reduces the saturation of the page to improve readability for users with visual impairments.
• High Saturation: Increases the saturation of the page to improve readability for users with visual impairments.
• Link Highlight: Highlights all links on the page to make them easier to identify for users with visual impairments.
• Font Size: Increases the font size of the page to improve readability for users with visual impairments.
• Line Height: Increases the line height of the page to improve readability for users with visual impairments.
• Letter Spacing: Increases the letter spacing of the page to improve readability for users with visual impairments.
• Text Alignment: Changes the text alignment of the page to improve readability for users with visual impairments.
• Low Contrast: Reduces the contrast of the page to improve readability for users with visual impairments.
• High Contrast: Increases the contrast of the page to improve readability for users with visual impairments.
• Extra Contrast: Increases the contrast of the page even further to improve readability for users with visual impairments.
• Hide Images: Hides all images on the page to improve readability for users with visual impairments.
• Hide Videos: Hides all videos on the page to improve readability for users with visual impairments.
• Big Circle Cursor: Changes the cursor to a big circle to improve visibility for users with visual impairments.
• Reading Mask: Highlights the current line of text being read to improve focus for users with visual impairments.
• Reading Guide: Makes it easier to read long lines of text by Long Highlight Cursor.
• Reset: Resets all accessibility settings to their default values.
• Close: Closes the accessibility menu.
• Change Position: You can change the position of the accessibility menu to left, right, top or bottom as User needs.
• Save Settings: Save the current settings to the local storage and load them when the page is reloaded.

Installation

You can install the Accessibility Plugin using npm. Run the following command in your project directory:

npm i accessibility-plugin

OR

You can use this CDN easily.

https://cdn.jsdelivr.net/gh/PrabothCharith/accessibility-plugin@main/accessibility-menu.min.js

<script src="https://cdn.jsdelivr.net/gh/PrabothCharith/accessibility-plugin@main/accessibility-menu.min.js"></script>

After installation, you can link the javascript file normally using

<script src="node_modules/accessibility-plugin/accessibility-menu.js"></script>

OR

You can use min.js file as your requirement

<script src="node_modules/accessibility-plugin/accessibility-menu.min.js"></script>

Tip

Link the Javascript file after all javascript for better output

Customization

Change Position

• In the js file, you can find the first div with id as accessibility-modal
• In this div, you can find class right by default. You can change it to left, right, top or bottom as you need

Preview

Accessibility.Plugin.mp4