06In developmentApache-2.0
Screenreader Empathy
A local-first empathy tool that walks the reading order of your HTML, plays it back aloud node by node, and flags what is confusing — deterministically, with optional AI commentary.
Awaiting real capture — /media/screenreader-empathy/playback.mp4
Screen recording: the page is read aloud node by node with the current element highlighted and the transcript scrolling alongside.
Playback. Each element is highlighted as it is read, and the transcript follows.
The problem
Sighted developers and designers rarely experience their work the way a screen reader user does. Compliance scanners produce rule violations as a checklist, but they do not convey what it feels like to navigate a page blind. A missing alt attribute is a line item, not a three-second silence where an image should have been described. Actual screen readers are authoritative but have steep learning curves — most designers trying VoiceOver for the first time give up before hearing a single word of their page.
Awaiting real capture — /media/screenreader-empathy/transcript.avif
The transcript panel showing a numbered reading order with deterministic flags marked on entries that have issues.
The transcript. Flags are rule-based and reproducible — no model involved.
How it works
It walks the reading order, not the source.
The traversal follows the same sequence a screen reader would: DOM order, resolved roles, computed accessible names, landmark boundaries. The output is a numbered transcript, not a rule report.
It speaks what it finds.
Each entry is read aloud the way a screen reader would announce it — role first, then name, with pauses where information is missing. An image without alt text is not a line item; it is a silence you hear.
It flags without guessing.
Twelve deterministic flag types — missing accessible names, heading-level skips, generic link text, positive tabindex, and more — are detected by rules, not by a model. They are reproducible and will never hallucinate.
It explains, if you ask.
Optional AI commentary describes what a screen reader user would experience at each flagged entry, in plain language. The commentary is clearly labelled, never blended with the deterministic data, and runs locally via WebGPU.
It runs without a browser, too.
The headless core entry point has zero runtime dependencies and works with jsdom in Node or CI. No audio, no AI — just the traversal sequence and the flags, usable as a test assertion or a report.
What it does and does not do
Detected automatically
- The full reading order sequence as a screen reader would traverse it, with computed accessible names and resolved roles.
- Twelve deterministic flag types applied by rules — missing names, heading skips, generic link text, duplicate IDs, and more.
- A page-level summary: landmark count, heading structure, and flag counts by type.
Needs a human
- Whether a missing accessible name matters. Some elements are intentionally unnamed; the tool flags them all.
- Whether the reading order is correct. The tool reports what a screen reader would do, not what it should do — those are different questions.
- Whether the AI commentary is accurate. It is generated by a small local model and may mischaracterise the user experience at a flagged entry.
100% local.
The deterministic core runs entirely in memory with zero network calls — in the browser or in Node. The browser layer downloads a TTS model (~82 MB) and optionally an LLM (~500 MB) from Hugging Face on first use; both are cached locally. After that, there is no fetch call. There is no account, no analytics, and no telemetry.
- License
- Apache-2.0
- Status & roadmap
- Core package in development with 122 passing tests. The headless analysis function and the TTS playback class are functional. Next: the Vue component for embedding, and a hosted demo for this site.