How to Add a Free Accessibility Widget to Your Website (with Code Example)

2–5 min read

Website accessibility isn’t just a legal requirement — it’s good design.

A free accessibility widget is a small tool that lets visitors adjust your website’s visual settings to fit their needs — without changing your site’s content. It helps everyone — not just people with disabilities — experience your site comfortably in different environments.

In this guide, we’ll show you how to add a free accessibility widget to your website in under two minutes. You’ll get the code snippet, setup steps, and tips for customization.

Real-World Examples

Amina, who has low vision, uses the widget’s high-contrast mode and larger text option to read articles without zooming her entire screen.

Jonas, who lives with dyslexia, enables increased letter spacing and clean font mode to make long paragraphs easier to follow.

Elena, who experiences light sensitivity due to chronic migraines, switches to dark mode when browsing at night to reduce eye strain.

Situational Examples

Accessibility needs aren’t always permanent — sometimes they’re situational:

  • When you’re checking a website in bright sunlight, increasing contrast helps text remain readable through glare.
  • If you’re reading in the car at night, dark mode reduces eye strain.
  • When you’re multitasking on a phone while holding a child, larger buttons or keyboard navigation make it easier to interact.
  • On older or low-quality screens, boosting text size and spacing improves legibility instantly.

These adjustments make your site more usable for everyone, in every situation.

Still, it’s important to remember that widgets do not make a website fully WCAG compliant. They improve usability, but they can’t fix underlying code-level issues such as missing alt text, improper heading hierarchy, or inaccessible form labels.

Step-by-Step: How to Add A Free Accessibility Widget to Your Website

1. Create an Account

Start by creating a free account on GetWCAG.com. This gives you access to your personal dashboard, where you can manage widget settings, customize the theme, and track accessibility scans for your website.

2. Copy the Code

Once logged in, go to the Widget section and copy the installation code:

<script
  src="https://cdn.getwcag.com/widget.js"
  config-url="https://static.getwcag.com/configs/YOUR_ID/config.json"
></script>

3. Put Your Script Tag Between Your <body> Tags

To make the widget appear on your site, place the script right before your closing </body> tag. This ensures it loads after your main content and doesn’t affect performance.

<body>
  <script
    src="https://cdn.getwcag.com/widget.js"
    config-url="https://static.getwcag.com/configs/YOUR_ID/config.json"
  ></script>

  <main>
    YOUR CONTENT HERE
  </main>
</body>

4. Save and Refresh

After saving your changes, refresh your website. You’ll see a small accessibility icon appear — users can click it to adjust text size, color contrast, or switch to dark mode.

Why Free Accessibility Widgets Are Like Painting Over a Cracked Wall

Free Accessibility widgets are helpful — but they’re only a temporary layer on top of deeper accessibility problems. They’re like painting over a cracked wall — it looks better on the surface, but the foundation underneath is still damaged.

A widget can:

  • Increase text size — but not fix missing alt text.
  • Boost contrast — but not repair improper heading structure.
  • Highlight links — but not label buttons or form fields for screen readers.

Widgets improve usability — they make your website easier to navigate for users — but they don’t make it compliant with WCAG 2.1 or the European Accessibility Act (EAA 2025).

To truly make your website accessible, you need to find and fix the real issues in your code — such as missing labels, incorrect color contrast, or non-semantic HTML. That’s exactly what the GetWCAG Scanner is built for.

Scan Your Website for Real Accessibility Issues

Find accessibility errors, measure their impact, and get clear guidance on how to fix them — automatically in minutes.

 Run a Free WCAG 2.1 Scan →