The free, open-source accessibility widget for any website.
One line of code. Zero dependencies. No tracking. No paywalls. No region blocks. Built in Sri Lanka, for the world.
<script src="https://cdn.jsdelivr.net/gh/ammarahamed/cocoon-a11y@latest/a11y.min.js" defer></script>
The green ♿ button in the bottom-right corner of this page IS the widget. Click it and explore every feature — text-to-speech, dark mode, color blind filters, dyslexia font, and more.
Everything your users need — in one tiny, self-contained widget.
Read the entire page or selected text aloud. Adjustable speed. Works on every browser.
High contrast, dark mode, light mode, desaturate. 3 color blind filters (protanopia, deuteranopia, tritanopia).
Bigger text (120% or 150%), text spacing, line height, dyslexia-friendly font, highlight all links, monospace mode.
Reading guide, focus highlight, stop animations, skip to content, page structure heading tree, tab navigator.
Position (4 corners), custom accent color, button size, i18n labels, RTL support, optional localStorage persistence.
Zero cookies. Zero tracking. Zero external requests. 100% client-side. GDPR compliant by design.
Everything included. Free forever. No catches.
| Feature | Included |
|---|---|
| Price | Free forever |
| Open Source (MIT License) | ✓ |
| Zero Dependencies | ✓ |
| Size (gzipped) | <10KB |
| Works in Every Region | ✓ |
| Text-to-Speech (Read Aloud) | ✓ |
| Dark Mode & Light Mode | ✓ |
| Color Blind Filters (3 types) | ✓ |
| Dyslexia-Friendly Font | ✓ |
| Reading Guide & Focus Highlight | ✓ |
| Text Sizing, Spacing & Line Height | ✓ |
| Highlight Links | ✓ |
| Stop Animations | ✓ |
| Big Cursor & Hide Images | ✓ |
| Zero Tracking / No Cookies | ✓ |
| GDPR Compliant by Design | ✓ |
| Chrome Extension Available | ✓ |
Three ways to add Cocoon A11y to your website.
<script src="https://cdn.jsdelivr.net/gh/ammarahamed/cocoon-a11y@latest/a11y.min.js" defer></script>
/* 1. Download a11y.min.js from GitHub */
/* 2. Place it in your project */
<script src="/js/a11y.min.js" defer></script>
npm install cocoon-a11y
/* Then in your HTML or entry file: */
import 'cocoon-a11y';
Customize with data attributes. All optional.
/* Position: bottom-right (default), bottom-left, top-right, top-left */
<script src="a11y.min.js" data-position="bottom-left" defer></script>
/* Custom accent color */
<script src="a11y.min.js" data-color="#6366f1" defer></script>
/* Button size: 56 (default), or any px value */
<script src="a11y.min.js" data-size="48" defer></script>
/* Enable localStorage persistence */
<script src="a11y.min.js" data-persist="true" defer></script>
We tried to add UserWay to our website. It said: "No access for your region." We're in Sri Lanka. So we built our own — and made it free for everyone. Accessibility shouldn't have a paywall or a border.