The free, open-source accessibility widget for any website. One line of code. Zero dependencies. No tracking.
Add one line to your HTML:
<script src="https://cdn.jsdelivr.net/npm/cocoon-a11y/a11y.min.js"></script>That's it. A floating accessibility button appears on your site with 33+ features.
The panel itself is keyboard- and screen-reader-operable (real buttons with aria-pressed, dialog semantics, focus management, live announcements) — an accessibility tool that is, itself, accessible.
One tap applies a sensible combination of settings — most users don't know which individual toggles they need.
| Profile | Turns on |
|---|---|
| Low Vision | Largest text, high contrast, big cursor, highlight links, focus highlight |
| Dyslexia | Dyslexia font, bigger text, text spacing, line height, reading guide |
| Motor | Bigger targets, target spacing, click guard, sticky menus |
| ADHD Focus | Reading mask, stop animations, stop auto-moving content |
| Seizure Safe | Stop animations, stop auto-moving content, desaturate |
| Feature | Description |
|---|---|
| Read Entire Page | Text-to-speech for all visible page content, in document order |
| Read Selected Text | Speak only highlighted text |
| Sentence Highlighting | The sentence being spoken is highlighted and scrolled into view (karaoke-style) |
| Click-to-Read | While reading, click any paragraph to jump reading there |
| Natural Voice | Ranks and picks a natural-sounding voice, follows the page language |
| Speed Control | 0.5x to 2x slider |
| Reliable Stop | Chunked speech with a session guard so Stop actually stops (plus Chrome keep-alive) |
| Feature | Description |
|---|---|
| High Contrast | Increases page contrast |
| Dark Mode | Inverts colours (excludes images and the widget) |
| Light Mode | Forces a white background with dark text |
| Desaturate | Full greyscale |
| Red / Green / Blue-Blind Aids | Daltonization-style correction filters (protan / deutan / tritan) that shift lost-channel information into visible channels |
| Big Cursor | Large high-visibility cursor |
| Hide Images | Fades out images to reduce distraction |
| Feature | Description |
|---|---|
| Bigger Text / Largest Text | 120% or 150% enlargement |
| Text Spacing | Increased letter and word spacing |
| Line Height | Opens up line spacing |
| Dyslexia Font | Loads OpenDyslexic |
| Highlight Links | Underlines and outlines every link |
| Monospace | Switches to a monospace font stack |
| Feature | Description |
|---|---|
| Page Structure | Lists all headings and ARIA landmarks; click to jump and move focus there |
| Reading Guide | A horizontal ruler that follows your cursor |
| Reading Mask | Dims the page except a band that follows your cursor |
| Focus Highlight | Enhanced focus outlines for keyboard navigation |
| Stop Animations | Pauses CSS animations and transitions |
| Skip to Content | Adds a skip link (visible on Tab) |
| Feature | Description |
|---|---|
| Bigger Targets | Enlarges clickable elements to a 44px minimum |
| Target Spacing | Adds spacing between interactive elements |
| Dwell Click | Rest the pointer on a target to auto-click it |
| Auto-Scroll | Hands-free continuous scrolling with speed control |
| Click Guard | Ignores accidental double-clicks on the same target |
| Stop Auto-Move | Pauses videos/audio and auto-moving content |
| Sticky Menus | Holds hover-revealed menus open briefly after the pointer leaves |
| On-Screen Keyboard | Click-to-type keyboard for pointer-only users |
Settings persist across pages (localStorage). Heavyweight overlays (on-screen keyboard, auto-scroll, dwell, page-structure) intentionally do not auto-restore, so they never take over the screen on a fresh page load.
All configuration is via data- attributes on the script tag (or a window.COCOON_A11Y object):
<script
src="a11y.js"
data-position="bottom-left"
data-size="60"
data-color="#3b82f6"
data-persist="false"
data-labels='{"title":"Accessibilité","reset":"Réinitialiser"}'
></script><script>window.COCOON_A11Y = { position: 'bottom-left', size: 60, color: '#3b82f6', persist: false };</script>
<script src="a11y.js"></script>| Attribute | Values | Default | Description |
|---|---|---|---|
data-position |
bottom-right, bottom-left, top-right, top-left |
bottom-right |
Launcher corner (auto-flips to bottom-left on RTL pages) |
data-size |
36–96 (px) |
52 |
Launcher button diameter |
data-color |
Any hex colour | #1dda63 |
Accent colour (validated; invalid values are ignored) |
data-persist |
true, false |
true |
Remember preferences across pages |
data-labels |
JSON string | English | Translate any UI text, e.g. {"title":"Accessibilité"} — unknown keys ignored, values escaped |
| Shortcut | Action |
|---|---|
Alt + A |
Toggle the accessibility panel |
Escape |
Close the panel (focus returns to the launcher) |
| Click outside | Close the panel |
| Feature | Cocoon A11y | Other Tools |
|---|---|---|
| Price | Free | $49/mo–$490/yr+ |
| Open Source | Yes (MIT) | Proprietary |
| Dependencies | 0 | Usually many |
| Panel itself keyboard/SR accessible | ✅ | Partial |
| One-tap profiles | ✅ (5) | Sometimes |
| Text-to-Speech + highlighting | ✅ | Sometimes |
| Colour-blind correction | ✅ (3) | Sometimes |
| Dyslexia Font | ✅ | Sometimes |
| Page Structure navigator | ✅ | Rarely |
| No Tracking | ✅ | Often tracks usage |
| GDPR by Design | ✅ | Partial |
| No Region Blocking | ✅ | Some regions blocked |
| Size (min) | ~34KB | ~120–200KB+ |
- Chrome 80+, Firefox 78+, Safari 14+, Edge 80+
- Mobile browsers (responsive panel)
Features that need a specific API (Web Speech) degrade gracefully — controls simply do nothing if unsupported.
An overlay widget helps — it doesn't make a site "fully accessible." Real accessibility lives in a site's own semantic HTML, contrast, and keyboard support. This widget is for the many sites that ship with nothing, and for giving visitors quick adaptations (bigger text, read-aloud, dark mode) on any site. It is not a compliance shortcut. Feedback and contributions — especially from people who rely on assistive tech — are genuinely wanted.
- Pure vanilla JavaScript — zero runtime dependencies
- Namespaced — UI lives under
#cocoon-a11y-*IDs anda11y-*classes, and page-wide effects use:not(#cocoon-a11y-panel)guards so the widget never restyles itself - Accessible by construction — the panel is a
role="dialog"of real<button>s witharia-pressed, focus is managed on open/close, and changes are announced via a polite live region - 100% client-side — no external requests except the OpenDyslexic font (only when Dyslexia Font is enabled), no cookies, no tracking
- RTL aware — the launcher auto-flips position on
dir="rtl"pages - GDPR compliant — by architecture, not by policy
Some accessibility tools are blocked in Sri Lanka and other regions. Others cost hundreds per year. Most free alternatives are limited or abandoned.
Accessibility shouldn't be paywalled. Every website deserves to be accessible, regardless of budget or geography.
npm install cocoon-a11y<script src="node_modules/cocoon-a11y/a11y.min.js"></script>Or use a CDN:
<script src="https://cdn.jsdelivr.net/npm/cocoon-a11y/a11y.min.js"></script>
<script src="https://unpkg.com/cocoon-a11y/a11y.min.js"></script>- Fork the repo
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please follow the existing code style and add comments for new features.
MIT License. See LICENSE for details.
Free and open source — use it anywhere, including commercially. A credit to Cocoon is appreciated but not required.
Built by Cocoon — making the web accessible for everyone.