@a.nemreen/a11y

@a.nemreen/a11y

Framework-agnostic Accessibility Tools widget — quick profiles, readable experience controls, visual filters, and a reading mask.
Works with Angular, React, Vue, and plain HTML. Zero framework peers.
Optional self-hosted dashboard. Always free. Unlimited websites.
By Ahmed Nemreen · Made in KSA

Install the widget (npm)

npm install @a.nemreen/a11y

import { Accessibility } from '@a.nemreen/a11y';
import '@a.nemreen/a11y/styles.css';

Accessibility.mount({
  position: 'end', // end | start | left | right
  stack: 0,
  locale: 'auto',  // auto | ar | en
});

Mount once at the application root — same API in Angular, React, Vue, and plain HTML. Omit the control panel options and the shelf stays the full catalog, with no network calls.

Headless (controller only)

const a11y = Accessibility.mount({ headless: true });
a11y.setMode('high-contrast', true);

Control panel (optional, self-hosted)

The dashboard is not a paid SaaS. Install it from npm / Docker Hub — no GitHub access required. Pair each app with a public siteKey. Always free — unlimited websites, no fees, no caps.

What you get

Server requirements

Docker (recommended): Docker Engine; 1 CPU / 512 MB RAM (1 GB comfortable); ~200 MB image plus a SQLite volume; port 8787 or 80/443 behind TLS; outbound Docker Hub on first pull. Sites that embed the widget must reach this URL. No extra database, Redis, or mailer.

Without Docker: Node.js 18+, npm, and native build tools (python3, make, g++ / Xcode CLT). Same port and disk.

Install the dashboard (Docker Hub)

You do not need a Dockerfile or a git clone. Docker pulls nemreen/a11y-panel:

docker run -d --name a11y-panel --restart unless-stopped \
  -p 8787:8787 \
  -v a11y-panel-data:/data \
  -e PORT=8787 \
  -e DATA_DIR=/data \
  -e A11Y_PANEL_ORIGIN=http://YOUR_SERVER:8787 \
  nemreen/a11y-panel:latest

Open http://YOUR_SERVER:8787. The first visit is the wizard. Create a website, copy the snippet:

Accessibility.mount({
  panelUrl: 'http://YOUR_SERVER:8787',
  siteKey: 'a11y_site_…',
});

No Docker: npx @a.nemreen/a11y-panel. Package: @a.nemreen/a11y-panel.

Use a different siteKey per app. Same panelUrl. Localhost origins are allowed automatically during development.

Features

• Profiles: epilepsy-safe, visually-impaired, cognitive-disability, motor-impaired, colorblind, dyslexia-friendly, adhd-friendly
• Adjust: font size, dyslexia font, highlight titles/links, reading mask, pause motion, text align, line/letter/word spacing
• Filters: boost contrast, monochrome, high contrast, high/low saturation, deuteranopia
• AR / EN UI, RTL-aware panel, localStorage persistence, live region announcements
• Shelf follows the host page theme (data-theme="dark", .dark, color-scheme)
• Floating button cosmetics from the dashboard (color, icon, shape, size)
• Optional control panel: wizard, shelf, stats, unlimited sites, always free

Demo

https://nemreen.info/a11y

Architecture

arc42 (what to document) and C4 (how to visualize it) — goals, context, building blocks, runtime, decisions, and known risks.

License

MIT © Ahmed Nemreen · Made in KSA