Accessibility Widget by QuickCasa GitHub

A free, open source accessibility toolbar for any website

Add one script tag and visitors can adjust contrast, text size, spacing, focus highlighting and motion on your site. It also adds a skip link that moves keyboard focus to your main content. You don't need an account or an API key. The script is about 6 KB gzipped and makes no network requests.

View the source

The round button in the bottom right corner is the widget itself, running on this page. Press Tab once from the top of the page to find the skip link.

What visitors get

  • Skip to main content

    The first tab stop on the page. It moves keyboard focus to your main content, so the next Tab starts from there.

  • Colour contrast

    Light text on dark or dark text on light, without breaking fixed or sticky headers.

  • Text size

    100, 115, 130 or 150 percent. It works like browser zoom, so text set in pixels scales too.

  • Text spacing

    The line, paragraph, letter and word spacing from WCAG success criterion 1.4.12.

  • Underline links

    Underlines text links and leaves image and icon links alone.

  • Highlight focus

    A two-tone focus ring, white inside black, so it stands out on light and dark backgrounds.

  • Reduce motion

    Stops animations and pauses autoplaying video and audio. It turns on by itself when the visitor's device is set to reduce motion.

  • Remembered choices

    Saved on the visitor's device and never sent anywhere.

What it doesn't do

This doesn't make your site WCAG or ADA compliant or reduce your legal exposure, and no script can. In 2025 the US Federal Trade Commission ordered one overlay vendor to pay $1 million for claiming its widget made websites WCAG compliant.

It doesn't generate alt text, rewrite your markup or try to fix your site automatically. Accessibility comes from how a site is built and tested.

Add it to your site

Download accessibility.js from the latest release, host it with the rest of your site, and add one tag to your <head>. Every attribute except src is optional. 

<script
  src="/accessibility.js"
  data-qc-accessibility
  data-position="bottom-right"
  data-accent="#5B1FE0"
  defer></script>

To try it before you host anything, point src at the copy on this site: https://quickcasa.github.io/accessibility-widget/v1/accessibility.js. It tracks the latest 1.x release.

Configuration

You configure the widget with data attributes on the script tag. An invalid value is ignored with a console warning.

Attribute Default Notes
data-main-content-selector automatic Where the skip link goes. Falls back to main, then [role="main"] and other common patterns.
data-position bottom-right Also bottom-left, top-right or top-left.
data-accent #6A24FF Hex only. Used for borders and focus rings, never behind text.
data-features all Comma-separated allowlist: skip-link, contrast, text-size, text-spacing, link-underline, focus-outline, reduce-motion.
data-button-label Accessibility options The accessible name of the trigger button.
data-storage-key qc_a11y_v1 The localStorage key, for keeping several sites on one origin apart.

Test pages

  • Stress test: a fixed header, a background-image hero, pixel-sized text, a looping animation and an image-only link.
  • Hostile configuration: no main element and deliberately invalid attributes, including an attempt to inject CSS.
  • Strict Content-Security-Policy: no inline styles, no inline scripts, no network requests and Trusted Types enforced.