accessgen-a11y-widget 0.0.0-stage → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -2
- package/dist/a11y-widget.min.js +384 -0
- package/package.json +24 -4
package/README.md
CHANGED
|
@@ -1,3 +1,62 @@
|
|
|
1
|
-
#
|
|
1
|
+
# A11y Widget
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Standalone accessibility overlay you can drop onto any page. Users open a floating launcher and adjust vision, reading, motion, and navigation settings. Preferences persist in the browser.
|
|
4
|
+
|
|
5
|
+
No build step and no runtime dependencies. The widget is two static files: `src/a11y-widget.js` and `src/a11y-widget.css`.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
**Profiles** — one-click presets: Vision, Motor, Cognitive, Senior, Focus, Dyslexia.
|
|
10
|
+
|
|
11
|
+
**Vision** — dark / light mode, high or low contrast, invert, grayscale, desaturate, color-blindness filters (protanopia, deuteranopia, tritanopia), link and heading highlights, hide images, stronger focus ring.
|
|
12
|
+
|
|
13
|
+
**Reading** — font size, spacing, dyslexia-friendly type, readable line width, alignment, and related text controls.
|
|
14
|
+
|
|
15
|
+
**Motion** — pause or reduce animations.
|
|
16
|
+
|
|
17
|
+
**Navigate** — reading guides, masks, cursor, and keyboard-oriented helpers.
|
|
18
|
+
|
|
19
|
+
Open the panel with the floating button or **Alt+A**. Close it the same way, with the panel close control, or Escape.
|
|
20
|
+
|
|
21
|
+
## Quick start
|
|
22
|
+
|
|
23
|
+
You need a local HTTP server so the module script can load. From the project root:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm start
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
That runs `npx serve .`. Open the URL it prints (usually `http://localhost:3000`) and use:
|
|
30
|
+
|
|
31
|
+
- `index.html` — full demo with contrast, forms, tables, images, and animation cases
|
|
32
|
+
- `test-widget.html` — minimal page for checking that the launcher appears
|
|
33
|
+
|
|
34
|
+
You can also open the files through any other static server.
|
|
35
|
+
|
|
36
|
+
## Embed on a site
|
|
37
|
+
|
|
38
|
+
Link the stylesheet and load the script as a module:
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<link rel="stylesheet" href="/path/to/a11y-widget.css" />
|
|
42
|
+
<script type="module" src="/path/to/a11y-widget.js"></script>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
The script injects the launcher and panel into the page. Keep the CSS and JS URLs in sync so styles match the markup the script inserts.
|
|
46
|
+
|
|
47
|
+
## Project layout
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
a11y-widget/
|
|
51
|
+
├── index.html Demo / edge-case page
|
|
52
|
+
├── test-widget.html Minimal smoke-test page
|
|
53
|
+
├── package.json npm start helper
|
|
54
|
+
├── src/
|
|
55
|
+
│ ├── a11y-widget.js Widget logic and injected markup
|
|
56
|
+
│ └── a11y-widget.css Widget styles
|
|
57
|
+
└── .kiro/specs/ Design and requirements notes
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## License
|
|
61
|
+
|
|
62
|
+
MIT
|