Web accessibility made effortless.
A free, open-source, zero-dependency accessibility widget for your website. Improve visibility, focus, and reading experience with a single line of code.
AccessWidget is a pure vanilla JavaScript tool. No NPM packages, no complex bundlers, and absolutely zero dependencies.
Just add this snippet to the <head> or <body> of your website:
<script src="https://accessibility.dippan.com.np/accessibility.js" data-color="#4f46e5" data-position="bottom-right" defer></script>That's it! The widget will automatically load and attach itself to your page.
- 🛡️ Isolated Styling: Renders perfectly inside a Shadow DOM, guaranteeing it will never conflict with your site's CSS.
- ⚡ Lightning Fast: Clean vanilla JavaScript and CSS optimized for speed. No frameworks, no massive bundles.
- 🔒 Privacy First: We don't track your users. All preferences are saved securely in local storage on the user's device.
- 🎨 Customizable: Easily match your brand by customizing the widget's position and accent color via HTML attributes.
- ⌨️ Keyboard Accessible: Fully operable via keyboard. Tab through all features smoothly with visible focus rings.
- 🔊 Screen Reader Optimized: Built with ARIA labels and semantic HTML to ensure compatibility with screen readers.
- Display: Text resizing, Text spacing, Readable fonts, Dyslexia fonts, Text alignment.
- Appearance: Dark mode, Light mode, High contrast, Invert colors.
- Color & Filters: Blue filter, Monochrome, Colorblind profiles (Protanopia, Deuteranopia, Tritanopia, Achromatopsia).
- Focus & Reading: Reading mask, Reading guide, Big cursor, Hide images, Highlight links, Highlight focus, Read Aloud.
You can configure the widget directly via data- attributes on the script tag:
| Attribute | Type | Default | Description |
|---|---|---|---|
data-color |
String (Hex) |
#4f46e5 |
Sets the primary accent color of the widget button and active elements. |
data-position |
String |
bottom-right |
The corner where the widget will stick. Options: bottom-right, bottom-left, top-right, top-left. |
data-lang |
String |
en |
The language code used for the text-to-speech (Read Aloud) tool. |
If you want to contribute or modify the widget yourself:
- Clone the repository:
git clone https://github.com/kdippan/AccessWidget.git
- Open the directory:
cd AccessWidget - Since it's vanilla JS/CSS, simply open
index.htmlin your browser, or start a local server:npx serve .
We welcome contributions! Please see our Contributing Guide for more details.
For vulnerability reporting, please review our Security Policy.
This project is licensed under the MIT License - see the LICENSE file for details.
Created with ❤️ by Dippan Bhusal