a11y

Accessibility tools for any web app

Profiles, filters, reading mask — plus an optional self-hosted dashboard to hide tools, read usage stats, and manage many websites.

Get started Dashboard

By Ahmed Nemreen

Everything in one toolbar

Tap the floating button to try the live widget. Settings persist in localStorage.

Quick profiles Epilepsy-safe, visually impaired, cognitive, motor, colorblind, dyslexia, ADHD
Adjust Font size, dyslexia font, highlights, reading mask, motion, spacing
Visual filters Contrast, monochrome, saturation, deuteranopia
Bilingual Arabic & English UI, RTL-aware panel

Control panel

Optional and self-hosted. Pair each app with a site key. Skip it and the widget still works with the full shelf. Always free — unlimited websites, no fees.

Customize the shelf Hide or show any control, style the floating button (color, icon, shape), add custom links.
Usage dashboard Users, shelf opens, and top tools (e.g. visually impaired, color). Filter All websites or one site.
Many apps, one panel Each website gets its own site key. Same panel URL. Stats stay tagged by source.
First-run wizard Install on your server, create username / email / password, then copy the mount snippet.

Pair with a site key

Shelf editor with floating button color and icon options — Shelf — floating button, tools, live preview

Accessibility.mount({
  panelUrl: 'https://a11y.your-server.tld',
  siteKey: 'a11y_site_…', // one key per app
});

Run the dashboard

Server: Docker Engine, 1 CPU / 512 MB RAM, port 8787 (or 80/443 with TLS), a data volume for SQLite. No GitHub. No extra database.

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

Open that URL — first visit is the install wizard. No Docker: npx @a.nemreen/a11y-panel. Widget: npm install @a.nemreen/a11y.

Sample content

Enlarge this text, highlight links, pause motion, or enable the reading mask. Headings respond to highlight-titles mode.

Readable experience

The quick brown fox jumps over the lazy dog. الحمد لله رب العالمين — sample Arabic for RTL and dyslexia-friendly checks.

Related: DGA UI Related: loggo

Install

npm install @a.nemreen/a11y

Plain HTML / any framework

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

Accessibility.mount({ position: 'end' });
Accessibility.createSkipLink({ href: '#main' });

Angular / React / Vue

Mount once at the app root (same API). No framework peer dependencies — the widget is vanilla DOM.

// e.g. main.ts / App.tsx / main.js
Accessibility.mount();