AccessWidget/llms.txt at main · kdippan/AccessWidget · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# AccessWidget

> Free, Open-Source Web Accessibility Widget

AccessWidget is a lightweight, zero-dependency, open-source accessibility widget built in vanilla JavaScript. It is designed to be easily embeddable into any website to improve visibility, focus, and the reading experience for users.

## Features

- **Isolated Styling:** Renders inside a Shadow DOM to prevent CSS conflicts with the host website.
- **Zero Dependencies:** Pure vanilla JS and CSS. No frameworks required.
- **Privacy First:** User preferences are saved locally using `localStorage`. No data is tracked or transmitted.
- **Keyboard Accessible:** Fully operable via keyboard with visible focus rings.
- **Screen Reader Optimized:** Built with semantic HTML and appropriate ARIA labels for compatibility with assistive technologies.
- **Visual Tools:** High contrast, Dark Mode, Invert Colors, Monochrome, Blue Filter, Colorblind filters (Protanopia, Deuteranopia, Tritanopia, Achromatopsia), and Link/Focus Highlighting.
- **Reading Tools:** Dyslexia-friendly fonts, Text alignment, Text scaling, Letter spacing, Reading Mask, Reading Guide, and Read Aloud (via Web Speech API).

## Installation

Add the following script tag to the `<head>` or `<body>` of your HTML document:

```html
<script src="https://accessibility.dippan.com.np/accessibility.js" data-color="#4f46e5" data-position="bottom-right" defer></script>
```

### Configuration Options

You can customize the widget using `data-` attributes on the script tag:

- `data-color`: Sets the primary accent color (Hex code, e.g., `#4f46e5`).
- `data-position`: Sets the position of the widget button. Options: `bottom-right`, `bottom-left`, `top-right`, `top-left`.

## Author

Created by Dippan Bhusal.
- Website: https://dippan.com.np
- GitHub: https://github.com/kdippan
- License: MIT License