Skip to content
v1.4.1 · MIT

Let every visitor adjust your site to their needs

A free accessibility preferences menu for any website: text size, contrast, spacing, reading aids and motion, in English and Arabic. No dependencies, no tracking, about 24 KB.

Get startedGitHub(opens in a new tab)
npm install open-accessibility-widget

Or press Alt + A on any page of this site.

Works with

  • 0 dependencies

    Nothing else to install; TypeScript types included

  • ~23 KB

    The whole widget, gzipped, in one script

  • axe-core

    Every release tested with axe-core and keyboard-only scripts

  • EN · AR

    English and Arabic built in, right-to-left ready

Playground

Change the widget on this page

Every control below changes the real widget in the corner of this page. Open it to see the result, and copy the code that matches.

Position

Brand color

The launcher's icon turns black or white, whichever has more contrast.

#0f766e
56px
Widget language

These changes last until you leave the page. Your own adjustments in the widget, like text size or contrast, are separate: the widget saves them in this browser.

TypeScript
import { init } from "open-accessibility-widget";

init({
  position: "right",
  theme: { primary: "#0f766e", onPrimary: "#ffffff" },
  buttonSize: 56,
});

Features

Everything visitors expect from an accessibility menu

And what you need to ship it: your brand, your languages, a strict CSP and no tracking.

  • Accessible itself

    The panel is a WAI-ARIA dialog with a focus trap, and the page behind it is inert. Switches, radio groups and sections work with the keyboard and screen readers, in Windows High Contrast and with reduced motion.

    • WAI-ARIA
    • axe-core
    • forced-colors
    • prefers-reduced-motion

  • Your brand, your logo

    Set theme.primary and the launcher, header and active states follow. Change colors, radius, font and the launcher's logo, from JavaScript or with CSS variables.

    • theme.primary
    • --a11yw-primary
    • icon
    • logo

  • 23 adjustments, 7 profiles

    Text size, spacing, contrast, saturation, reading line, focus window, read mode, stopping animations and more, plus quick profiles that switch on a few at once.

  • Arabic and RTL

    English and Arabic built in, and you can add your own. The panel mirrors right to left and starts in the page's language.

  • Any website

    Plain HTML, WordPress, React, Next.js, Vue, Angular, Svelte, Astro. Safe with server rendering, and it re-attaches when a page swaps its body.

  • Small, no dependencies

    About 23 KB gzipped. Adjustments are classes and CSS variables on html, and destroy() removes every one of them.

  • Strict CSP, Trusted Types

    No eval, no innerHTML, no inline scripts. Pass a nonce for its style tags and it runs under a strict Content Security Policy.

  • Private by default

    No network requests, no cookies, no analytics. Preferences stay in the visitor's browser, and persist: false stores nothing at all.

Honest by design

A preferences menu, not a compliance tool

Accessibility overlays are often sold as a fix for lawsuits. This widget isn't one, and it doesn't pretend to be.

What it is

  • A menu that lets each visitor change text size, spacing, colors, motion and reading aids on your pages.
  • A small, open-source script that runs only in the browser and stores preferences only there.
  • Accessible itself: tested with axe-core and keyboard-only scripts in every release.
  • A convenience to offer on top of an accessible site.

What it is not

  • It doesn't make a website ADA, EAA, EN 301 549 or WCAG compliant.
  • It doesn't scan, repair or rewrite your markup: missing alt text, labels and contrast still need fixing at the source.
  • It isn't a legal defence, and it shouldn't be advertised as one.
  • It doesn't replace testing with real users and assistive technology.

Read the limitations

Frameworks

Works with your stack

One small package for every framework, CMS and plain HTML page. Pick yours for the setup code.

All frameworks

Add it to your site in five minutes

One package, one call. Free and open source under the MIT license: no license key, no tracking, no cloud service.

Get startedStar on GitHub(opens in a new tab)View on npm(opens in a new tab)