Documentation

Add a single script tag to your site. The widget boots automatically, reads its configuration from data attributes, and injects an isolated UI into a closed Shadow DOM.

<script src="https://adawidget.store/ada.js"
        data-position="bottom-right"
        data-theme="#1A73E8"
        defer></script>

Two optional data attributes control the widget. Both fall back to sensible defaults if omitted.

data-position  bottom-right | bottom-left | top-right | top-left
data-theme     any hex color (default #1A73E8)

Sixteen tools across three categories. Each toggles a scoped class on the host document or an inline style, never touching the widget's isolated UI.

Vision:     High Contrast, Monochrome, Invert, Low/High Saturation
Typography: Text Resizing (+60%), Dyslexia Font, Line Height,
            Letter Spacing, Highlight Links, Highlight Headers
Assistance: Large Cursor, Reading Guide, Reading Mask,
            Pause Animations, Text-to-Speech

The trigger and panel are fully keyboard navigable. Focus is trapped inside the open panel, Escape closes it, and every control exposes correct aria-pressed / aria-modal state.

Enter / Space  — open or close the panel
Tab / Shift+Tab — move between controls (focus trapped)
Escape         — close the panel, return focus to trigger

User selections are auto-saved to localStorage under _ada_store_prefs and restored on every subsequent page load, so accessibility preferences persist across sessions.

localStorage key: _ada_store_prefs
value: JSON-serialized AdaPrefs object