Live demo

Accessibility widget you can drop into any site

This page ships with wcag-widget.js, a single script that injects a floating control so visitors can resize type, increase text spacing, switch contrast, highlight links, cut motion, enable a reading guide, invert colors, and even switch to a big cursor.

View embed snippet Try toggling options in the corner

What the widget changes

Typography controls

Visitors can enlarge type (up to 160%), add letter spacing, and boost line-height. It tweaks root CSS variables so most layouts follow along.

  • Font scaling persists across pages
  • Readable font stack toggle

Color + focus

Presets for low-light and high-contrast reading, optional link highlighting, and a grayscale mode to calm noisy palettes.

  • Applies to the host page via `` classes
  • Widget UI stays legible with namespaced styles

Motion

Users can stop animations and smooth scrolling for a calmer experience. All preferences are stored locally.

  • Reduce-motion applies instantly
  • Reset button to return to defaults

Guides & pointers

Extras like a reading guide that follows the cursor, bold focus halos, and an enlarged cursor to improve discoverability.

  • Reading bar can be toggled on/off
  • Big cursor + focus halo for clarity

Embed the widget

Copy the script to your static assets, then drop this near the end of your page:

<script src="/path/to/wcag-widget.js"></script>

The widget initializes itself. Need to script it? Call WCAGWidget.open(), WCAGWidget.close(), or WCAGWidget.reset().

To hide the floating button and mount it yourself, set showFab:false and click the launcher below:

Content to test against

Article excerpt

Accessibility is not a premium feature—it is table stakes. Simple options like larger text, calmer motion, and better contrast help more people reach your content faster. This widget gives them that control without sending them away.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee

Form sample

Quick specs

  • Zero dependencies
  • Persists settings via localStorage
  • Keyboard friendly & ESC to close
  • Namespaced CSS (`wcagw-` prefix)
  • Extras: invert colors, big cursor, reading guide

Use the controls in the bottom-right to see everything update live.

Media samples

Images include alt text and should respond to contrast/invert toggles.

Abstract teal gradient with soft circles
Warm yellow gradient with translucent blocks