WCAG 2.1 Compliant

Accessibility for everyone

A drop-in widget that gives every visitor control over their reading experience — text size, contrast, motion, dyslexia font, and more. No configuration required.

npm i @pigmilcom/a11y View on GitHub →

Animated elements Toggle Reduce Motion ↘ to freeze instantly.

Three ways to integrate

jsDelivr CDN recommended — global edge network

<script
  src="https://cdn.jsdelivr.net/npm/@pigmilcom/a11y/dist/a11y.cdn.js"
  data-position="bottom-right"
  data-lang="en"
></script>

Served via npm registry. Always the latest published version.

Self-hosted pigmil CDN — pin your version

<script
  src="https://cdn.pigmil.com/a11y/dist/a11y.cdn.js"
  data-position="bottom-right"
  data-lang="es"
></script>

Hosted endpoint you control. Ideal for pinned deployments.

npm — React Next.js · Vite · CRA

import a11y from '@pigmilcom/a11y';
import '@pigmilcom/a11y/styles';

const A11y = a11y;
<A11y className="fixed bottom-5 right-5" lang="fr" />

React stays a peer dep. Fully tree-shakeable ESM + CJS.

Override widget styles with a <style> tag

CDN & React — Custom CSS target stable a11y-widget-* class names

<style>
  /* Make the trigger button square instead of round */
  .a11y-widget-btn {
    border-radius: 8px !important;
    background: rgba(30, 30, 60, 0.9) !important;
  }

  /* Tint the dialog border */
  .a11y-widget-dialog {
    border-color: rgba(99, 102, 241, 0.4) !important;
  }

  /* Custom toggle row hover */
  .a11y-widget-toggle-btn:hover {
    background: rgba(99, 102, 241, 0.06) !important;
  }
</style>

The widget exposes stable a11y-widget-* class names as a public API. Place your <style> tag after the widget script to override built-in styles.

Open the widget ↘ to try every feature live

High Contrast

Applies a 1.6× CSS contrast filter — WCAG AA & AAA targets met with one click.

Invert Colors

Flips the entire palette while re-inverting media so images stay natural.

Reduce Motion

Strips every animation and transition — essential for vestibular and photosensitive users.

Highlight Links

Adds visible 2px outlines to every anchor and role="link" for link-discovery users.

ADHD Friendly

Kills motion and helps users with attention difficulties focus on content.

Dyslexia Font

Switches to a high-readability system font stack with generous word and letter spacing.

Text Spacing

Applies WCAG 1.4.12 spacing — letter-spacing, word-spacing, and line-height — page-wide.

Persistent

Every preference saved to localStorage. No loss across navigation or page reloads.

Sample reading content

Enable Text Size, Dyslexia Font, or Text Spacing — changes apply in real time.

Web accessibility ensures that websites are usable by as many people as possible, including those with visual, auditory, motor, or cognitive disabilities. The WCAG 2.1 guidelines provide a framework built on four core principles: Perceivable, Operable, Understandable, and Robust.

Over 1.3 billion people worldwide live with some form of disability. Inaccessible websites exclude a significant share of your audience — and in many jurisdictions they carry legal consequences. Enabling accessibility features at the client layer is a zero-cost way to start closing that gap today.

This widget handles the most impactful preferences with zero server-side changes. Install once, benefit all users — preferences persist across reloads via localStorage.