eG Access — accessibility preferences widget

Install

One line, added once, at the end of the client's <body>:

<script src="https://eg-id.com/a11y/widget.js" data-site="client-id" defer></script>

That is the whole integration. Everything else — colour, position, wording, which controls appear — is changed from the admin afterwards, with no second visit to the client's site.

It works with no `data-site` at all

Drop the tag on with nothing else and the widget still runs: it reads the page's own brand colour, builds its gradient from it, and saves the visitor's choices locally. Add the data-site when you want to steer it centrally.

Per-page overrides

Anything in the admin can also be set on the tag, which is useful for a one-off page or a site you have not registered:

<script src="https://eg-id.com/a11y/widget.js"
        data-accent="#0f766e"
        data-position="bottom-left"
        data-statement="/accessibility"
        data-feedback="/contact"
        defer></script>

Script tag attributes
Attribute	Default	Notes
`data-site`	—	Loads central config for this client.
`data-accent`	auto	Any CSS colour. Blank = detect from the page.
`data-position`	`bottom-right`	`top/middle/bottom` × `left/right`.
`data-offset-x` / `-y`	`20`	Pixels from the edge. Use to clear a chat bubble.
`data-size`	`md`	`sm` 48px · `md` 58px · `lg` 68px.
`data-icon`	`person`	`person`, `wheelchair`, `eye`, `dot`.
`data-statement`	—	URL of the accessibility statement.
`data-feedback`	—	URL where a visitor can report a barrier.
`data-shortcut`	`alt+0`	Blank to disable.
`data-nonce`	—	Only needed on a site with a strict CSP `style-src`.
`data-credit`	`true`	`false` removes the eG Access line.

What it gives the visitor

Text — size in six steps, line height, letter and word spacing, a readable or dyslexia-friendly font, and an option to undo justified text.
Contrast — high-contrast dark, high-contrast light, inverted, plus muted, greyscale and vivid colour.
Focus and motion — a strong focus outline, paused animations, hidden images, highlighted links and headings.
Reading aids — a guide line and a reading mask, both of which follow the keyboard as well as the mouse.
Cursor — large dark or large light.
Presets — six one-tap combinations for common needs.

Choices are kept in localStorage for that browser. No cookies, no accounts, nothing sent anywhere.

What it is not

This does not make a site WCAG or ADA conformant, and it must never be sold as if it does.

Accessibility overlays that advertised automatic compliance have been the subject of regulatory action and a large volume of litigation, and a site carrying one is not thereby protected — in practice, overlay vendors' own customers have still been sued. eG Access therefore claims exactly one thing: it gives visitors controls over how the page is presented, and remembers what they chose. That is real and it is useful. It is not a substitute for headings, alt text, labels, colour contrast, keyboard order and focus management in the site itself.

When a client asks about compliance, the honest answer is a three-part one: fix the site, add an accessibility statement with a contact route, and offer this panel as a convenience on top. Selling the panel as the fix is what creates the liability.

How it behaves on a client's site

All of its own UI lives in a shadow root, so the client's CSS cannot leak in and its CSS cannot leak out.
Contrast filters are applied to the root element, never to <body> — a filter on <body> would detach every fixed header and chat bubble on the page and send them scrolling away.
Stylesheets are constructed CSSStyleSheet objects, so a strict style-src policy does not block them. data-nonce covers the fallback path.
Text scaling measures each element's real size and multiplies it, rather than scaling the root font size — which does nothing on a px-based site and wrecks the layout of a rem-based one.
It fails open. If the config request is blocked or the database is unreachable, the widget runs on detected defaults rather than disappearing.
No dependencies, one request, and nothing is loaded from a third-party CDN.

The widget's own accessibility

It is held to the standard it is offering: dialog semantics with a focus trap, Escape to close with focus returned to where the visitor was, every control a real button with aria-pressed, a live region announcing each change, 44px minimum targets, visible focus rings, no state signalled by colour alone, usable at 320px and at 400% zoom, and it honours prefers-reduced-motion and Windows High Contrast.

JavaScript API

window.__egidA11y.open()            // open the drawer
window.__egidA11y.close()
window.__egidA11y.reset()           // back to site defaults
window.__egidA11y.state()           // what the visitor has chosen
window.__egidA11y.set({textScale: 1.5, contrast: 'dark'})

document.addEventListener('egid-a11y:ready', e => { /* e.detail === the API */ })

Handy when a client wants their own “Accessibility” link in the footer to open the panel.