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, reading mask, focus highlight, stop animations, skip to content, page structure navigator. One-tap profiles, and your settings are remembered across pages.
Dwell (hover-to-click), on-screen keyboard, hands-free auto-scroll, bigger click targets, target spacing, accidental-click guard, and sticky menus.
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 | ✓ |
| Bigger Click Targets & Spacing | ✓ |
| Dwell / Hover-to-Click | ✓ |
| On-Screen Keyboard | ✓ |
| Hands-Free Auto-Scroll | ✓ |
| Accidental-Click Guard | ✓ |
| 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 some of the popular accessibility tools to our website. One 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.