P/07 · Open source · MIT · v0.1.0

# accesy: One line. Open source. Actually readable.

One-line accessibility preference widget. 12 controls, 6 profiles.

- Open source · MIT · v0.1.0

accesy adds a floating button to your page. Visitors get twelve reading controls and six one-tap profiles — stored in their own browser, nothing sent to a server. Free, MIT-licensed, and readable end to end.

accesy is a free, MIT-licensed accessibility preference widget. You drop it into any web project with one line of code. Visitors get 12 reading controls and 6 one-tap profiles — dyslexia, low vision, ADHD, colour-blind, motor-impaired, seizure-safe — saved in their own browser. No backend, no tracking, no subscription.

[Overlay Fact Sheet](https://overlayfactsheet.com/)

- Free forever
- MIT licensed — read every line
- One-line install
- No backend, no tracking

The problem

## Two options, both wrong.

When I wanted to add accessibility controls to my own projects, I kept hitting the same two options: build the panel from scratch every time, or drop in a paid overlay that charges a monthly subscription and makes compliance claims that disability advocates actively dispute.

Neither sat right. So I built the thing I wanted — a small, honest widget I could read end to end, drop into any project, and trust.

accesy adds a floating button to your page. A visitor clicks it (or hits alt+a) and a panel slides out with twelve reading controls and six ready-made profiles. Their choice is saved in their own browser. No account, no tracking, no backend. Entirely client-side.

Features

## Twelve controls. Six profiles. One line to install.

### Twelve reading controls

Visitor picks what helps them read. High contrast, invert colours; Bigger text, text spacing, line height; Legible fonts, dyslexia font; Pause animations, highlight links; Big cursor, hide images, saturation

### Six one-tap profiles

Right set of controls, one click. Dyslexia; Low vision; ADHD; Colour-blind; Motor-impaired; Seizure-safe

### One line to install

Zero-config default. <Accesy /> in React — zero configuration; One <script> tag for any other stack; Auto-detects your app root; No setup, no options required

### Preferences that persist

Stored in the visitor's browser. Choices saved to localStorage; Restored on the next visit automatically; No login, nothing leaves their device; No backend required

### Headless core

Full control when you want it. Engine is separate from the UI; Use the React panel as-is, or restyle with theme tokens; Drive from your own components with useAccesy(); Framework-agnostic headless core

### Built to behave

Works inside modern stacks. SSR-safe; React 18+ concurrent-safe; Keyboard-operable, closes on Escape; Small bundle, no dependencies dragged in. English and Spanish included. Adding a locale is a small, documented pull request.

Motivation

## Why I built it

The accessibility-overlay industry has a credibility problem, and it's earned. Widgets that promise "instant ADA compliance" have been the subject of lawsuits and the Overlay Fact Sheet, signed by over 700 accessibility professionals — because an overlay bolted onto an inaccessible site doesn't make it accessible. It just adds a button.

I didn't want to add to that. accesy isn't sold as compliance. It's a preference layer: it lets a visitor adjust how your page reads for them. That's genuinely useful, and it's honest about what it is. A clear, narrow promise paired with open code — that was the version worth shipping.

The other half is selfish. I wanted a widget I controlled — one I could drop into every project I ship, read in full, and never pay a subscription for. So I built it, and I open-sourced it in case it saves someone else the same trouble.

Honest limitations

## Better up front than in the small print.

### This is not a compliance product

An overlay cannot fix an inaccessible site. Real accessibility lives in your actual markup — semantic HTML, alt text, keyboard navigation, colour contrast in your real design. accesy gives users reading preferences on top of a site that's already doing that work. If anyone sells you a widget as 'instant legal compliance,' walk away.

### It's an early release

This is the first public version (0.1.0). The core is well-tested and the API is stable enough to build on, but there are rough edges I know about and am working through in the open.

### The legible-fonts option loads from a CDN

When a visitor turns on legible fonts, the typeface is fetched from jsDelivr. It's opt-in and CSS-only, but if you run a strict Content-Security-Policy, that's worth knowing before you ship it.

### Two languages so far

The panel ships with English and Spanish. Adding a locale is a small, well-documented pull request — but right now, that's what's in the box.

Stack

## For the curious

### Core

TypeScript, framework-agnostic, localStorage API, CSS custom properties

### React package

React 18+, concurrent-safe, SSR-safe, useAccesy() hook, theme tokens

### Distribution

headless core export

### Quality

MIT licensed, well-tested core, keyboard-accessible, no external dependencies

FAQ

## What people ask

## Free, open source, one line to drop in.

Read every line, fork it, send a pull request. Add it to your next project in one line — no signup, nothing to buy.

## faq

**Does this make my site accessible?**

No — and any widget that claims it does is lying. Real accessibility lives in your actual markup: semantic HTML, alt text, keyboard navigation, colour contrast. accesy gives your visitors preference controls on top of a site that's already doing that work. It's a preference layer, not a compliance shortcut.

**Is this for React only?**

No. There are three delivery options from one engine: a headless core, a React component (<Accesy />), and a single script tag for any other stack. The script tag version auto-detects your app root with no setup.

**Where are user preferences stored?**

In the visitor's own browser, via localStorage. Nothing is sent to a server. No account, no tracking, no backend required.

**What's the bundle impact?**

Small. No external dependencies are dragged into your app. The legible-fonts option loads one typeface from jsDelivr — opt-in and CSS-only, nothing auto-loaded.

**Can I customise the look?**

Yes. You can restyle the panel with theme tokens, or drive the whole thing from your own components using the useAccesy() hook. The headless core is separated from the UI specifically for this.

**Is it SSR-safe?**

Yes. accesy is SSR-safe and React 18+ concurrent-safe. It is keyboard-operable and closes on Escape, and it has no external runtime dependencies.

## stack

- TypeScript
- framework-agnostic
- localStorage API
- CSS custom properties
- React 18+
- concurrent-safe
- SSR-safe
- useAccesy() hook
- theme tokens
- headless core export
- MIT licensed
- well-tested core
- keyboard-accessible
- no external dependencies

Want to talk it through? Email [hello@fmillan.com](mailto:hello@fmillan.com) or see the [contact page](https://fmillan.com/contact/).

[previous project — P/06 Jooby](https://fmillan.com/projects/jooby/) [next project — P/08 Artkive](https://fmillan.com/projects/artkive/)

[← back to the workbench](https://fmillan.com/projects/) [open in the 3D site →](https://fmillan.com/#p-accesy)