Open-source accessibility toolkit

Make the web accessible for everyone.

A free, open-source widget and toolkit that lets any website offer real-time accessibility adjustments — contrast, text size, screen reader support, and more — with a single script tag.

WCAG 2.1 A/AA

100% client-side

Web Accessibility Auditor

Scan any live webpage URL or paste custom HTML code markup to audit conformance against 15+ WCAG A/AA/AAA guidelines instantly.

Widget Customizer

Customize your embedded widget

Configure style settings and get your MIT open source script snippet.

Customize your widget

Tweak, then copy the generated snippet.

Position

Button size: 56px

Bottom offset: 20px

Button label

Panel title

Panel subtitle

Show A11yLens branding

Turn off for a fully whitelabel widget.

Theme color

Visible sections

Full snippet

<!-- A11yLens accessibility widget -->
<script>
  window.A11YLENS_CONFIG = {
  "position": "right",
  "offsetBottom": 20,
  "buttonSize": 56,
  "color": "#7c3aed",
  "buttonLabel": "Open accessibility options",
  "title": "Accessibility",
  "subtitle": "Adjust this page",
  "branding": true,
  "sections": [
    "profiles",
    "text",
    "color",
    "colorblind",
    "typography",
    "structure",
    "spacing",
    "reading"
  ]
};
</script>
<script src="https://accessibilitywidget.vercel.app/embed.js" async></script>

Quickest install

No config required — works out of the box.

HTML

<!-- A11yLens accessibility widget -->
<script src="https://accessibilitywidget.vercel.app/embed.js" async></script>

JS

// Programmatic control via the global API
A11yLens.open();                          // open the panel
A11yLens.set("highContrast", true);      // toggle an adjustment
A11yLens.set("textScale", 1.2);           // resize text
A11yLens.reset();                         // clear all adjustments
A11yLens.destroy();                       // full cleanup / remove

Shadow-DOM isolation — your styles stay untouched.
Settings persist per visitor in localStorage.

The floating button in the bottom-right corner of this page runs the same engine.

1.3B+

People with disabilities worldwide

96%

of home pages with WCAG failures

cost to integrate A11yLens

Why We Exist

Accessibility is a right, not a premium feature

1.3 billion people

Over 1 in 6 people worldwide live with a disability. Many rely on assistive technology.

Existing tools are expensive

Most accessibility widgets charge $400–$1,000+ per year. Small sites and nonprofits are left out.

Free and open source

MIT-licensed. Drop one script tag. No signup, no credit card.

Make every website accessible by default. Accessibility is a right, not a premium feature.

Features

Everything you need for web accessibility

A complete toolkit to make any website accessible — from scanning to remediation.

WCAG scanner

Audit any page against WCAG 2.1 A/AA rules

Instant adjustments

Font size, spacing, contrast, night mode

Read aloud

TTS reader with word highlighting

Auto-remediation

Fix alt text, empty labels, broken headings

Profiles

Presets for blind, dyslexic, ADHD, color-blind

AI assistant

Ask WCAG, ARIA, HTML-a11y questions

Compliance docs

Generate Accessibility Statements and VPAT docs

Developer tools

Contrast checker, heading analyzer, link checker, alt-text inspector

Embed anywhere

One script tag, any framework

Open source

MIT-licensed, transparent, auditable

Browser extension

Audit localhost, intranets, authenticated pages

Accessibility Profiles

Built for every need

8 pre-configured profiles to serve diverse accessibility requirements.

Blind Users

Screen reader + TTS + large cursor

Low Vision

High contrast + dyslexia fonts + reading aids

Dyslexia

Custom spacing + specialized fonts

ADHD

Simplified layout + reduced motion

Cognitive Disabilities

High readability + simple navigation

Color Blind

Grayscale + contrast enhancement

Motor Impairment

Large cursor + keyboard navigation

Seizure Safe

Dark mode + animation controls

Comparison

UserWay vs A11yLens

See how A11yLens compares to the leading paid accessibility widget.

Feature	UserWay	A11yLens
Pricing	$490–$1,490/year	FREE (MIT)
License	Proprietary	MIT Open Source
Self-Hosted	❌ SaaS only	✅ Docker / static file
Data Privacy	Your data on their servers	✅ 100% on your server
GDPR Compliant	Requires agreement	✅ No data leaves your server
White-Label	$750+/year plan	✅ Built-in, free
Custom CSS	Limited	✅ Full CSS + config API
Integrations	WordPress, Shopify, etc.	✅ One script tag, any platform
JavaScript API	Limited	✅ Full A11yLens.* API
Widget Position	Right only	✅ Left / Right / Custom
Profiles	6	✅ 8 (ADHD, Seizure Safe, Motor, etc.)
Headings Analyzer	❌	✅ Detects gaps, skips, structure
Link Checker	❌	✅ Validates link text quality
Alt Text Inspector	❌	✅ Live image audit
Contrast Checker	✅ Basic	✅ WCAG 2.1 AA/AAA
Color Blind Simulator	❌	✅ Protanopia, Deuteranopia, Tritanopia
Reading Mask	❌	✅ Focused reading guide
Reading Guide	❌	✅ Line-by-line highlighter
Big Cursor	❌	✅ 48px+ oversized cursor
Focus Highlight	❌	✅ Amber ring on focus
Hide Images	❌	✅ Shows alt text instead
Pause Animations	❌	✅ Stops all motion
Dyslexia Font	❌	✅ OpenDyslexic font
Readable Font	❌	✅ System sans-serif
Mute Sounds	❌	✅ Mute all audio
Auto-Fix	✅ limited	✅ One-click page fix
AI Alt Text Gen	❌	✅ Vision model integration
AI Chat Assistant	❌	✅ Gemini / Claude / REST
AI Remediation	❌	✅ Auto-generate alt text
Analytics Dashboard	✅ Basic	✅ Usage stats, charts, export
Scan Engine	❌	✅ axe-core integration
VPAT / ACR	❌	✅ Auto-generated VPAT docs
Compliance Statement	❌	✅ Generated statement
Open Source Stack	❌	✅ Next.js, shadcn, Prisma

Integration

How it works

Add accessibility to any website in three simple steps.

Paste script before </body>

<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

Configure (optional)

data-a11ylens="position:right;autoFix:false"

Done

Widget appears on every page

Configuration Options

Option	Default	Description
position	"right"	Panel side: "right" or "left"
offsetBottom	20	Distance from bottom in px
offsetSide	20	Distance from side in px
autoFix	false	Auto-fix issues on page load
theme	"system"	"light", "dark", or "system"

Integrations

Works on every platform

Add A11yLens to your site in one minute with these platform-specific installation guides.

HTML / CSS

Paste before </body> in your HTML

Universal script tag for any static HTML page or basic website template.

<!DOCTYPE html>
<html>
<body>
  <!-- Your page content -->
  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

Next.js / React

app/layout.tsx or pages/_document.tsx

Add inside useEffect in your root layout, or use next/script in _document.

// app/layout.tsx
"use client";
import { useEffect } from "react";

export default function RootLayout({ children }) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://accessibilitywidget.vercel.app/embed.js";
    script.defer = true;
    document.body.appendChild(script);
  }, []);

  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

WordPress

footer.php or functions.php

Paste into your active theme's footer.php, or use functions.php to inject safely.

<!-- Option 1: Add directly to footer.php before </body> -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Option 2: functions.php (recommended) -->
<?php
add_action('wp_footer', function() {
    echo '<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>';
});
?>

Shopify

theme.liquid before </body>

Add to theme.liquid before </body>, or use Online Store > Themes > Edit code.

<!-- theme.liquid -->
<!DOCTYPE html>
<html>
<head>
  <!-- head content -->
</head>
<body>
  {{ content_for_header }}
  {{ content_for_layout }}

  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

Wix

Settings > Tracking & Analytics

Add in Settings > Tracking & Analytics > Custom Code with body-end trigger.

<!-- Wix Custom Code snippet -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Or via Wix Site Manager -->
<!-- Settings > Tracking & Analytics > Custom Code > Add Code > Body-end -->

Squarespace

Settings > Advanced > Code Injection

Inject in Settings > Advanced > Page Header Code Injection, or site-wide in Code Injection.

<!-- Squarespace Footer Injection -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Go to Settings > Advanced > Code Injection -->
<!-- 2. Paste in the Footer section -->
<!-- 3. Save and publish -->

Weebly

Theme > Edit HTML > Footer

Insert in Theme > Edit HTML > Footer, or use the Header/Footer Code element.

<!-- Weebly Theme Footer -->
<!DOCTYPE html>
<html>
<body>
  {{ content }}

  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

<!-- Or use: Header/Footer Code element in Weebly editor -->

Joomla

Template index.php or Custom HTML module

Add via template index.php or a Custom HTML module positioned in the footer.

<!-- Joomla index.php (templates/yourtemplate/index.php) -->
<!DOCTYPE html>
<html>
<body>
  <jdoc:include type="component" />
  <jdoc:include type="modules" name="footer" />

  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

PrestaShop

Theme .tpl footer block

Insert in themes/classic/templates/layouts/layout-full-width.tpl or footer hook.

<!-- PrestaShop layout-full-width.tpl -->
<!DOCTYPE html>
<html>
<body>
  {block name="content"}{/block}

  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

<!-- Or via hook: displayFooter in module -->

Magento

default.xml or footer.phtml

Add in your theme's default.xml layout or footer.phtml before closing body tag.

<!-- Magento 2 default.xml -->
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <body>
    <referenceContainer name="footer">
      <block class="Magento\Framework\View\Element\Template"
             name="a11ylens.embed"
             template="Magento_Theme::a11ylens.phtml"/>
    </referenceContainer>
  </body>
</page>

<!-- footer.phtml -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

Umbraco

Master template or partial view

Render in master template or inject with a partial view shared across layouts.

<!-- Umbraco Master Template -->
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
<!DOCTYPE html>
<html>
<body>
  @RenderBody()

  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

<!-- Or use Partial View: @Html.Partial("A11yLensScript") -->

Drupal

html.html.twig or library attachment

Use html.html.twig or attach the script through a library in your .libraries.yml.

<!-- Drupal html.html.twig -->
<!DOCTYPE html>
<html {{ html_attributes }}>
<body {{ body_attributes }}>
  {{ page_content }}
  {{ scripts }}
  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

<!-- Or via .libraries.yml -->
a11ylens_embed:
  version: 1.x
  js:
    https://accessibilitywidget.vercel.app/embed.js: {}

SpaceCraft

Page Settings > Footer Scripts

Paste into Page Settings > Advanced > Footer Scripts for site-wide deployment.

<!-- SpaceCraft Footer Scripts -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Go to Page Settings > Advanced -->
<!-- 2. Find Footer Scripts section -->
<!-- 3. Paste and save -->

Webflow

Project Settings > Custom Code

Add in Project Settings > Custom Code > Footer Code section and publish.

<!-- Webflow Footer Code -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Project Settings > Custom Code > Footer Code -->
<!-- 2. Paste before closing </body> tag -->
<!-- 3. Save and Publish -->

BigCommerce

Storefront > Script Manager

Insert in Footer Scripts via Storefront > Script Manager, set location to Footer.

<!-- BigCommerce Script Manager -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Storefront > Script Manager > Create a Script -->
<!-- 2. Name: A11yLens, Location: Footer -->
<!-- 3. Paste and Save -->

Duda

Site Settings > HTML Head

Add in Site Settings > HTML Head > Place code before </body>.

<!-- Duda HTML Head > End of Body -->
<!DOCTYPE html>
<html>
<body>
  <!-- Site content -->

  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

HubSpot

Site Settings > Footer HTML

Paste in Site Settings > Advanced > Footer HTML or use the Tracking Code field.

<!-- HubSpot Footer HTML -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Site Settings > Advanced > Footer HTML -->
<!-- 2. Paste the script -->
<!-- 3. Save changes -->

Tilda

Site Settings > HTML code > Footer

Add in Site Settings > HTML code > Footer block for every page automatically.

<!-- Tilda Footer HTML -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Site Settings > HTML code -->
<!-- 2. Scroll to Footer section -->
<!-- 3. Paste and Save -->

Dreamweaver

Template or page before </body>

Insert before </body> in your template or individual pages to apply globally.

<!-- Dreamweaver Template -->
<!DOCTYPE html>
<html>
<body>
  <!-- Page content -->
  <script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>
</body>
</html>

<!-- Use template to apply to all pages -->

Google Tag Manager

Custom HTML tag on All Pages

Trigger a Custom HTML tag firing on All Pages with advanced settings set to support document write.

<!-- Google Tag Manager Custom HTML Tag -->
<script>
  // Paste this inside a Custom HTML tag in GTM
  (function() {
    var script = document.createElement('script');
    script.src = 'https://accessibilitywidget.vercel.app/embed.js';
    script.defer = true;
    document.body.appendChild(script);
  })();
</script>

<!-- Steps: -->
<!-- 1. Tags > New > Custom HTML -->
<!-- 2. Paste the code above -->
<!-- 3. Trigger: All Pages -->
<!-- 4. Save and Submit -->

Moodle

Theme footer renderer or mustache template

Add to theme's footer renderer or boost/templates/footer.mustache for theme-level injection.

<!-- Moodle theme/footer.mustache -->
{{> theme_boost/footer }}

<!-- Add before closing </body> -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Or via theme settings.php -->
<?php
$THEME->add_end_of_body_html() .= 
  '<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>';
?>

CMS Max

Site Settings > Footer injection

Paste in Site Settings > Footer injection point or global scripts manager.

<!-- CMS Max Footer Injection -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Admin > Site Settings > Footer Scripts -->
<!-- 2. Paste the code -->
<!-- 3. Save and clear cache -->

Strikingly

Settings > Custom Code > Footer

Insert in Settings > Custom Code > Footer to load across the entire site.

<!-- Strikingly Footer Custom Code -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Site Settings > Custom Code -->
<!-- 2. Paste in Footer section -->
<!-- 3. Save -->

Elementor

Elementor > Custom Code

Use Elementor > Custom Code > Before </body> and set display conditions to Entire Site.

<!-- Elementor Custom Code -->
<script src="https://accessibilitywidget.vercel.app/embed.js" defer></script>

<!-- Steps: -->
<!-- 1. Elementor > Custom Code > Add New -->
<!-- 2. Paste in Before </body> -->
<!-- 3. Display Conditions: Entire Site -->
<!-- 4. Priority: low, Location: Before </body> -->

Cost Savings

3-Year Total Cost of Ownership

See how much you save with A11yLens at any scale.

Scenario	UserWay	A11yLens
Single site, basic	$1,470	$0 (free)
5 sites, premium	$7,350+	$0 (free)
50 sites, white-label	$37,500+	$0 (free)
Agency (100 sites)	$75,000+	$0 (free)