Easy Website Accessibility with a11y-widget

The a11y-widget is a lightweight accessibility tool built with vanilla JavaScript and CSS.

It adds a floating button that opens a panel of essential accessibility features for your users.

All Accessibility Options Included:

• Increase Text
• Decrease Text
• Line Height
• Letter Spacing
• Dyslexic Font
• Invert Colors
• High Contrast
• Increase Saturation
• Decrease Saturation
• Read Screen
• Summarize Web Content
• Image Alt Checker
• Highlight Links
• Big Cursor
• Toggle Images

How to use it:

1. Include the main script ‘script.js’ on your webpage and the library will take care of the rest.

<script src="/script.js"></script>

2. Once included, a floating toggle button appears on your webpage. Users simply click this button to open the accessibility options panel and customize their browsing experience.

Changelog:

06/08/2025

• Improved the accessibility of the widget’s toggle button to ensure better compatibility with screen readers and keyboard navigation.

04/28/2025

• refactor: remove debug log for position attribute in script.js

03/29/2025

• feat: add reset all settings button and functionality to restore default accessibility options

02/19/2025

• chore: remove unused variables and clean up code for better readability

The post Easy Website Accessibility with a11y-widget appeared first on CSS Script.