Live Demo
DOCUMENTATION

Embedding Guide

Integrate AccessEase into any website, web application, CMS (WordPress, Shopify, Webflow), or custom stack with a single line of code.

Quick Embed

Copy and paste this snippet right before the closing </head> tag of your HTML document, and upload the widget bundle to your own server.

embed-snippet.html
<script src="/accessease.js" async data-position="bottom-right" data-lang="en-US"></script>

What to upload

  1. Build the bundle with npm run build:widget (or copy widget-build/accessease.js from this repository).
  2. Upload it so it is reachable at the path used in src above.
  3. Optionally upload fonts/OpenDyslexic-Regular.woff2 to a fonts/ folder next to the bundle. If you skip this, the dyslexia font is loaded from a CDN fallback instead.

Not hosted publicly yet: there is no AccessEase CDN build. Earlier versions of this page showed https://cdn.accessease.io/…, which never resolved. Use the self-host steps above — they work today.

Configuration Attributes

All attributes are optional and are read from the <script> tag that loads the widget.

AccessEase widget configuration attributes
Attribute Type Description
data-position string Where the floating button sits: bottom-right (default), bottom-left, top-right, top-left.
data-accent hex Overrides the accent colour used by the button and the active tool states, e.g. #ff6b6b.
data-lang string Language for speech recognition and speech synthesis, e.g. hi-IN. Falls back to the page's lang attribute.
data-storage-key string localStorage key used for the visitor's saved preferences. Change it if another script on your site uses the default.

JavaScript API

The bundle exposes a small window.AccessEase handle for opening the panel from your own UI.

api.js
AccessEase.open(); // open the panel AccessEase.close(); // close the panel AccessEase.settings(); // current settings object AccessEase.config; // resolved data-* attributes AccessEase.defaults; // default settings

The widget mounts after the DOM is ready, so check AccessEase.ready if you call it very early.

Frequently Asked Questions

The full widget bundle is about 47 kb unminified and loads asynchronously, so it never blocks rendering. It ships no dependencies and adds no network requests beyond the optional font.
AccessEase gives visitors user-controlled assistive tooling: reading aids, speech output, voice input, and contrast options. No overlay can make an inaccessible site conformant on its own, so treat this as one part of a WCAG 2.1 AA/AAA effort — not as a replacement for accessible markup, semantics, and testing with real users.
Yes. Pass an accent colour with data-accent, or override the widget's CSS custom properties (--ae-cyan, --ae-teal, --ae-surface) from your own stylesheet.
Only in the visitor's own browser, under the localStorage key accessease_settings_v2 (changeable with data-storage-key). Nothing is sent to a server, and "Reset All Settings" clears it.