Fathom: See, Hear & Fix Web Accessibility Barriers

Paste any web page and Fathom shows it through color-blind and low-vision eyes, reads it aloud like a screen reader, then one-click fixes 28 WCAG 2.2 barriers. Runs 100% in your browser.

Comment

Watch the 2:36 narrated demo · Try Fathom

Try it in 60 seconds

  1. Open fathom-a11y.vercel.app and press Dive into a sample page.
  2. Watch the café page score 32 / 100 with 33 barriers, 8 of them blockers.
  3. In Through other eyes, flip on Deuteranopia, then Tunnel vision, then Keyboard only.
  4. Open Listen and press Play. This is an educational approximation, not NVDA or VoiceOver.
  5. Press Auto-fix everything safe. The score goes 32 → 100. Press Undo to compare.

Inspiration

WebAIM's 2026 scan of the top million home pages found detectable WCAG failures on 95.9% of them. I don't think that's because developers don't care. I think it's because we never feel a barrier. I've shipped sites with icon-only buttons and never once heard what a screen reader says about them ("button, button, button").

Technica's theme is Dare to Dive, so I built a diving mask for web pages: something that lets you see, hear and fix the barriers instead of reading a checklist about them.

What it does

What you get
See Protanopia, deuteranopia, tritanopia and no-color lenses (Machado 2009 matrices), low vision, glare and tunnel vision, phone/tablet/desktop widths, plus a keyboard-only view that numbers every tab stop and flags anything the keyboard can't reach.
Hear A DOM-based reading-order simulation, read aloud with ElevenLabs voices. You can play the before and after back to back.
Fix 28 automated rule families mapped to WCAG 2.2. Each finding names who is affected, the success criterion and a plain-English reason. One-click safe fixes re-audit live, with Undo, and contrast fixes pick the closest passing color.
Words Inclusive-language suggestions ("Click here" → "Select here", "Hey guys" → "Hi everyone") and a Flesch-Kincaid reading level.
Share Export the whole audit as a Markdown report, paste your own HTML, or audit Fathom itself.

HTML auditing runs locally in a sandboxed iframe. Scripts and inline handlers are neutralized and preview navigation is blocked. Remote images, styles, fonts or media in pasted HTML may still contact their hosts. Optional live voice sends up to 1,400 transcript characters to ElevenLabs; browser speech may use an OS speech service. Avoid confidential input.

How I built it

  • Engine: engine.js is a dependency-free rules engine (DOM in, findings out) with the scorer, color-vision matrices, transcript builder and fixer. The score is 100 · e^(−penalty/110), so one blocker hurts more than ten nitpicks and the number never goes negative.
  • UI: a no-build ES-module workbench, held to the standard it audits: keyboard-first, visible focus, prefers-reduced-motion, forced-colors, and a strict Content Security Policy. Fathom audited on its own page finds 0 barriers, and axe-core agrees.
  • Voice: pre-rendered ElevenLabs clips are matched by exact transcript. There is an optional serverless ElevenLabs proxy (api/voice.js, rate-limited) and a browser SpeechSynthesis fallback, so the Listen button never dead-ends.
  • Demo video: I recorded the real app with Playwright, composed it in HyperFrames (HTML + GSAP camera moves, callouts, captions), narrated it with ElevenLabs, and mixed in the app's real screen-reader audio with ffmpeg at deploy time on Vercel.
  • Testing: The repository includes a suite of 46 Playwright checks covering user flows, hostile-HTML sandbox attacks, edge-case input, seven viewport widths, reduced motion and forced colors, plus axe-core over five UI states.

Challenges I ran into

  • A fair score. A linear score let one missing alt text on a huge page look "fine". Exponential decay with severity weights fixed that.
  • Safe auto-fixes. Bulk fixes apply heuristics. Suggested labels, alternative text, language and table headers can change meaning and require human review. Undo is available. A score of 100 means this engine found no remaining issues; it does not certify WCAG conformance.
  • Rendering untrusted HTML. Users paste anything, so scripts had to be neutralized before parsing and restored on export without breaking their code.
  • Making an accessibility tool accessible. The irony would have been brutal, so Fathom audits itself in its own test suite.

Accomplishments that I'm proud of

  • A real page going 32 → 100 in one click, with every change shown and undoable.
  • A before and after you can hear, which lands harder than any chart.
  • 0 barriers on Fathom's own interface, confirmed independently by axe-core.

What I learned

Automated checks cover only a subset of accessibility problems. Fathom is a starting line and an empathy tool, not a certificate. I also learned that hearing a page read aloud teaches more in ten seconds than an hour of reading WCAG.

What's next for Fathom

  • A browser extension that audits any live page.
  • A GitHub Action that fails a PR when the score drops.
  • More languages for the inclusive-language checker, with Urdu first.
  • A classroom mode for teachers running intro web-dev courses.

AI disclosure: designed and built solo by me with Claude (Anthropic) as a coding partner. Voices by ElevenLabs. Video composed with HyperFrames.

Final submission review

The deployed café flow was rechecked: 32/100 → 100/100 → Undo → 32/100. The hosted 1920×1080 demo plays. An audio pause/resume bug was corrected with a focused regression check. These checks do not replace a fresh full-suite run or real assistive-technology testing. The Listen panel approximates DOM semantics; it does not read the OS accessibility tree. Pre-rendered ElevenLabs clips require an exact transcript match, so other layouts/content can use the browser fallback. Final review and corrections were assisted by OpenAI Codex.

Built With

Share this project:

Updates

Submission history