Getting started

Use your package manager, or load one script from a CDN with no build step. The CDN tag pins an exact version with its integrity hash.

npm install open-accessibility-widget

Call init() once, in the browser, after the page loads. It mounts the launcher on body and returns the widget. In React and Next.js, render the component in your root layout instead.

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

// Once, in the browser, after the page loads. Calling it again replaces the widget.
const widget = init();

Using Vue, Angular, Svelte, Astro or a CMS? See the setup for your framework

Every option is optional. Pass your brand color, the side of the screen, your logo and a starting language, and remove the controls you don't want to offer.

init({
  position: "right",                                   // "left" (default) or "right"
  theme: { primary: "#0f766e", onPrimary: "#ffffff" }, // your brand color
  icon: "/logo.svg",                                   // launcher logo
  language: "ar",                                      // start in Arabic (RTL)
  features: { hideImages: false },                     // remove controls you don't offer
});

Every option is listed in the API reference

If your site has an accessibility statement, link it from the panel's footer. Only http, https and relative URLs are accepted.

init({ statementUrl: "/accessibility" });