https://github.com/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.
https://github.com/prabothcharith/accessibility-plugin

accessibility accessibility-plugin accessibility-service accessibility-toolbar accessibility-tools accessibilityservice free-accessibility free-plugin javascript javascript-library no-dependencies plugin plugins

Last synced: about 1 month ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/prabothcharith/accessibility-plugin
• Owner: PrabothCharith
• License: gpl-3.0
• Created: 2024-04-19T10:02:25.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-02T02:16:39.000Z (11 months ago)
• Last Synced: 2025-04-10T00:07:23.940Z (about 1 month ago)
• Topics: accessibility, accessibility-plugin, accessibility-service, accessibility-toolbar, accessibility-tools, accessibilityservice, free-accessibility, free-plugin, javascript, javascript-library, no-dependencies, plugin, plugins
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/accessibility-plugin
• Size: 193 KB
• Stars: 12
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# Accessibility Plugin

[![npm version](https://badge.fury.io/js/accessibility-plugin.svg)](https://badge.fury.io/js/accessibility-plugin)

## Preview

[click here to see preview](https://prabothcharith.github.io/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


>[!tip]

> ### OR

> You can use this `CDN` easily.

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

> 


> 





After installation, you can link the `javascript` file _normally_ using



### OR

You can use `min.js` file _as your requirement_



>[!important]

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