Add 33+ Accessibility Features to Your Site With One Line of Code

Text-to-speech for visitors who struggle to read. A dyslexia-friendly font. Colour-blind filters. Dark mode, bigger text, highlighted links, a reading guide. Individually, each of these is a feature request your site will probably never get to. Together, they're one script tag.

This is the five-minute setup guide for Cocoon A11y — our free, open-source accessibility widget — plus honest notes on what a widget does and doesn't do for you.

What You Get

One floating accessibility button on your site opens a panel of 33+ user-side adjustments, including:

• Reading support: text-to-speech, dyslexia font, reading guide, line and letter spacing, text scaling
• Vision support: colour-blind filters (protanopia, deuteranopia, tritanopia), high contrast, dark mode, saturation controls, big cursor
• Focus support: link highlighting, pause animations, hide images, reading mask

Every setting is chosen by the visitor and remembered for them. That's the point of a widget: it serves the needs you can't predict from your side of the screen.

The Setup (Genuinely Five Minutes)

1. Visit the A11y Widget page and copy the embed line — a single <script> tag.
2. Paste it before the closing </body> tag of your site. On WordPress, any header/footer-scripts plugin (or your theme's footer template) does it; on Shopify, theme.liquid; on Webflow/Framer, the project's custom code settings; on a hand-built site, the HTML itself.
3. Reload. The accessibility button appears. Click it, try the dyslexia font and a colour filter, confirm settings persist across pages.

That's the entire installation. No account, no API key, no build step.

Why This One (a Fair Question)

The accessibility-widget market is crowded with paid overlays, some charging hundreds per month. Three things make ours different, and they're all verifiable:

• Free means free. No tiers, no feature gates, no trial clock. It exists because accessibility is Cocoon's social sustainability commitment (the same programme as SignBridge and the Alt Text Writer), not a revenue line.
• Open source. The code is inspectable. You are not loading a black box onto your visitors.
• No tracking. The widget doesn't phone home about your visitors. Preferences are stored client-side. Many commercial overlays can't say this; check theirs.

The Honest Part: What a Widget Can't Do

A widget adds a layer of user-side adaptation. It cannot repair broken foundations — missing alt text, keyboard traps, unlabelled forms, grey-on-white text. If your site has those problems, fix them first (the priority list: The 7 Fixes That Help the Most People) and treat the widget as the finishing layer, not the fix. The overlay industry has earned criticism for selling the opposite story — we've written our candid take in Do Accessibility Widgets Actually Work?

Foundations plus widget is the combination that genuinely serves visitors: the site works for assistive tech, and each visitor can tune it to their own eyes and attention.

Five Minutes From Now

Your site can offer text-to-speech, dyslexia support and colour-blind filters before your coffee cools. Grab the one line of code here — and if it helps your visitors, the repo accepts stars and contributions; that's the whole business model.