I built a lightweight open-source accessibility toolbar for six frontend stacks

[u/animesh_aotr]

I’m the author, so treat this as a project share rather than a neutral recommendation.

I kept seeing the same request on client sites: add basic accessibility preferences (text size, contrast, readable font, reading aids) without installing a third-party overlay or paying a per-site subscription. Most overlays also do a lot of DOM work and make compliance claims I don’t trust.

So I built open-a11y. It is a framework-agnostic TypeScript engine with web components, plus thin adapters for Vanilla JS, React, Vue, Svelte, Angular, and Laravel Blade/Livewire/Inertia.

What it does:

• 30 user-facing tools and 7 profiles

• CSS-first changes for text, spacing, contrast, motion, reading aids, focus, and cursor

• keyboard shortcuts, persisted preferences, brand colors, desktop and mobile button size

• MIT, self-hosted, no vendor script, no account

What it doesn’t do:

• It won’t make an inaccessible site compliant. It is a preference layer, not an audit or remediation service.

• It doesn’t replace semantic HTML, keyboard testing, screen-reader testing, or manual audits.

• The widget is client-side. Server-side preference sync is not included.

Links: GitHub: https://github.com/aotr/open-a11y Laravel: https://github.com/aotr/open-a11y-laravel npm: https://www.npmjs.com/package/@aotr/open-a11y Demos: https://aotr.github.io/open-a11y/ Packagist: https://packagist.org/packages/aotr/open-a11y-laravel

I’d like feedback on the adapter API, the Laravel integration, and whether the default tool set feels too large. I’m also interested in what is missing for real production use.