Skip to content

Plain HTML / JavaScript

One script tag and one call, with no build step. Or import it from npm in any bundler.

On this page
Packageopen-accessibility-widget(opens in a new tab)

Install

<script src="https://cdn.jsdelivr.net/npm/open-accessibility-widget@1.4.1/dist/open-accessibility-widget.global.js"
        integrity="sha384-dO9rT4vwimvvXQt0APugeYB/UVAs+WxY4DskABQA/kETXVreihc0vfYY0S0lSW9G" crossorigin="anonymous"></script>

Usage

<script src="https://cdn.jsdelivr.net/npm/open-accessibility-widget@1.4.1/dist/open-accessibility-widget.global.js"
        integrity="sha384-dO9rT4vwimvvXQt0APugeYB/UVAs+WxY4DskABQA/kETXVreihc0vfYY0S0lSW9G" crossorigin="anonymous"></script>
<script>
  A11yWidget.init({
    position: "right",
    theme: { primary: "#0f766e", onPrimary: "#ffffff" },
    statementUrl: "/accessibility",
  });
</script>

Notes

  • The script-tag build exposes every export on window.A11yWidget, for example A11yWidget.getAccessibilityWidget()?.open().
  • Calling init() again replaces the existing widget.
  • Pages that swap body (Hotwire Turbo, htmx hx-boost) are supported: the widget re-attaches itself and re-applies the visitor's settings.

Accessibility statement

Pass statementUrl to link your accessibility statement from the panel's footer.

Edit this page on GitHub