Accessibility Widget
Accessibility tools for every visitor
Add one line of code to your website and give every visitor tools to adjust text size, contrast, spacing and more, without changing your design.
Try it now: open the accessibility button in the bottom-right corner of this page.
How it works
How does it work?
You add one line of code. Your visitors get a panel of tools to adjust the page.
Step 1: Paste one line of code
Add your website in the dashboard and copy its script tag into your site. No plugins to install and no design changes.
Step 2: Visitors open the panel
A button appears in the corner of every page. It works with a mouse, a touch screen, a keyboard and screen readers.
Step 3: They adjust the page
Each visitor turns on the tools they need. Their choices are saved in their own browser and stay on across pages and visits.
Features
What tools does it include?
12 tools for reading, color and navigation. You choose which ones your visitors see.
Text size
Make all text larger in three steps, without zooming the whole page.
Line height
Add space between lines so paragraphs are easier to follow.
Letter spacing
Spread out letters and words so they are easier to tell apart.
Readable font
Switch the page to a plain, highly legible font.
Highlight links
Make every link stand out with a bright, underlined highlight.
Contrast
Choose dark, light or inverted colors for stronger contrast.
Saturation
Lower, raise or remove color to suit how you see it.
Read aloud
Click any text to hear it read out loud.
Reading guide
A guide bar follows the pointer to help you keep your place.
Big cursor
A larger mouse pointer that is easy to spot.
Focus outline
A bold outline shows where keyboard focus is.
Stop animations
Pause motion and animation that distracts or causes discomfort.
Who it helps
Who does it help?
Everyone reads the web differently. These tools help people adjust your site without leaving it.
Low vision
Larger text, stronger contrast and a bigger cursor make pages easier to see.
Dyslexia
A readable font, extra spacing and a reading guide make text easier to follow.
Color blindness
Contrast modes and color adjustments help when colors are hard to tell apart.
Motion sensitivity
Stop animations pauses movement that can cause distraction, dizziness or nausea.
Older visitors
Bigger text, clearer links and read aloud help when reading on screen gets tiring.
Keyboard users
A strong focus outline shows exactly where you are on the page.
Install
How do I add it to my website?
Paste this line just before the closing </body> tag, or into your platform's custom code setting.
<script src="https://accessibility.octopi-digital.com/widget.js" defer
data-site-id="YOUR_SITE_ID"></script>Your dashboard gives you the exact line for each website. It works with WordPress, Shopify, Webflow, Wix, Squarespace and custom sites.
Straight answers
What does it do, and what doesn't it do?
The widget helps visitors adapt your pages. It is one part of accessibility, not all of it.
What it does
- Gives every visitor tools to adjust text, color, spacing and motion
- Remembers each visitor's choices in their own browser
- Works on any website with one line of code
- Can be used with a keyboard and a screen reader
- Lets you choose its color, position and which tools appear
What it doesn't do
- Fix problems in your site's code, like missing alt text or unlabeled forms
- Make your site WCAG or ADA compliant on its own
- Replace screen readers or other assistive technology
- Replace an accessibility audit or testing with real users
Pricing
How much does it cost?
Simple plans based on how many websites you run. Cancel any time.
Starter
For one personal or small business website.
Free
- 1 website
- All 12 visitor tools
- Choose the button color and position
- Email support
Pro
Most popularFor growing businesses with a few websites.
$19per month
- Up to 3 websites
- All 12 visitor tools
- Choose which tools visitors see
- Widget usage stats for each site
- Priority email support
Business
For agencies and teams that manage many websites.
$49per month
- Up to 10 websites
- Everything in Pro
- Up to 10 websites in one account
- Priority email support
FAQ
Common questions
What is this accessibility widget?
It is a small script you add to your website that gives every visitor a button for adjusting the page to their needs. Visitors can enlarge text, add spacing, raise contrast, switch to a readable font, have text read aloud and more. Each visitor's choices are saved in their own browser, so they stay on as they move between pages.
How do I add the widget to my website?
You paste one line of code into your site. Create an account, add your site's domain, and copy the script tag from your dashboard. Paste it just before the closing </body> tag, or into your platform's custom code setting. The button appears on your site straight away.
Will the widget slow down my website?
No, it is built to stay out of the way. The script is about 6 KB compressed, loads after your page content, and does nothing until a visitor opens the panel and turns on a tool.
Does the widget make my website WCAG or ADA compliant?
No. The widget gives visitors tools to adjust how your pages look and behave, but it cannot fix problems in your site's own code, such as missing image descriptions, unlabeled form fields or a confusing heading structure. To meet WCAG, those issues need to be fixed in your code. We recommend an accessibility audit and testing with people who use assistive technology.
Which websites and platforms does it work with?
It works on any website where you can add custom code, including WordPress, Shopify, Webflow, Wix, Squarespace and sites you build yourself with React, Next.js, Vue or plain HTML.
Give every visitor the tools they need
Create an account, add your website and preview the widget in minutes.
Get started