AccessWidget Documentation
Welcome to the official documentation for AccessWidget. This guide will show you how to integrate the widget into your website, explain why it's beneficial for your users, and detail all the features it provides.
Why Use AccessWidget?
Web accessibility is crucial for ensuring that all users, regardless of their physical or cognitive abilities, can interact with your content. AccessWidget helps bridge the gap by providing user-facing tools that empower visitors to customize their own browsing experience.
- Inclusivity: Makes your content readable for users with visual impairments, dyslexia, or color blindness.
- Zero Hassle: Unlike rebuilding your entire site for specific high-contrast edge cases, this widget provides an immediate set of tools that users can toggle at will.
- Safe to Use: Our Shadow DOM architecture ensures that the widget's internal CSS will never conflict with your website's design.
- Privacy First: The widget does not load tracking scripts, analytics, or send any user data to external servers.
How to Install
Installing AccessWidget is designed to be as simple as possible. There are no npm packages to install or build steps required. Simply copy the following script tag and place it just before the closing </body> tag on your website.
<script src="https://accessibility.dippan.com.np/accessibility.js" defer></script>By using the defer attribute, the widget will load without blocking the rest of your website's content, ensuring optimal performance.
Configuration
You can customize the visual appearance of the widget's trigger button using data-* attributes directly on the script tag.
Positioning
Change where the widget button floats using data-position. Available options: bottom-right (default), bottom-left, top-right, top-left.
<script src="..." data-position="bottom-left" defer></script>Accent Color
Match the widget to your brand using data-color. Accepts any valid CSS color hex code.
<script src="..." data-color="#ff0000" defer></script>Features Available
AccessWidget bundles numerous tools categorized into logical sections for the user.
Smart Profiles
1-click presets for specific needs: Better Visibility, Less Motion, Focus Mode, and Dyslexia Friendly.
Text & Typography
Adjust font size up to 200%, increase letter spacing, and switch to highly readable or Dyslexia-specific system fonts.
Color Adjustments
High contrast modes, dark modes, monochrome filters, and specialized color blindness filters (Protanopia, Deuteranopia, etc.).
Reading Guides
A horizontal reading line or a focused reading mask that dims the rest of the screen to help users maintain focus.
Highlighting
Options to aggressively highlight all interactive links or emphasize the currently focused element for keyboard navigators.
Read Aloud (TTS)
Integrated text-to-speech. When active, clicking on any text paragraph will read it aloud using the native browser speech engine.
Privacy & Data
The accessibility.js widget operates entirely on the client-side. User preferences are saved in the browser's localStorage under the key accesswidget:prefs. No external network requests are made, and no tracking analytics are bundled within the script.