DEV Community

Cover image for I Built an Accessibility Checker in a Week (Beta Launch - Feedback Wanted)
Aethel Software
Aethel Software

Posted on

I Built an Accessibility Checker in a Week (Beta Launch - Feedback Wanted)

#a11y #webdev #programming #ai

The Problem I Was Trying to Solve

Accessibility always gets pushed to the end of the development cycle.

Not because developers don't care, but because:

  • Existing tools are hard to interpret (WCAG codes aren't beginner-friendly)
  • Checking takes time we don't have
  • Fixing issues manually is tedious
  • It's easy to forget until someone complains

So I built AccessFix — a free accessibility checker that scans your site and tells you exactly what to fix.

⚙️ What It Does (Beta Version)

Current Features

  • Paste your website URL (or upload HTML/code)
  • Scans for 15+ common accessibility issues
  • Shows you exactly where the problem is (line numbers)
  • Gives you the recommended fix
  • Displays code snippets with before/after examples

What It Checks

✅ Missing alt text on images

✅ Form inputs without labels

✅ Buttons without accessible text

✅ Links without text content

✅ Missing lang attribute on HTML

✅ Iframes without title attributes

✅ Tables missing header cells

✅ Heading hierarchy issues

✅ Empty alt attributes on meaningful images

✅ And more...

Each issue includes:

  • Severity level: critical / warning / info
  • WCAG criteria reference
  • Line number in your code
  • Recommended fix
  • Before/After code snippet

🧠 The Tech Stack

Frontend

  • React + Vite
  • TypeScript
  • Supabase (auth + database)

Backend

  • Supabase Edge Functions (Deno)
  • HTML parsing with regex (yep, it works for beta)
  • Custom scanning logic

Why I Chose This Stack

  • Fast to build
  • Supabase handles auth, database, and storage
  • Easy deployment on Vercel
  • No complex infrastructure

🚀 What's Coming Next (Post-Beta)

Phase 2: GitHub Integration

  • Connect your GitHub repo
  • Scan your entire codebase automatically
  • Track accessibility issues over time

Phase 3: AI-Powered Fixes

  • AI analyzes your code
  • Auto-generates pull requests with fixes
  • You review and merge

Phase 4: Continuous Monitoring

  • Schedule regular scans
  • Get notified of new issues
  • Track your accessibility score over time

🧩 The Challenges I Faced

1. Parsing HTML Is Harder Than I Thought

Started with simple regex… but HTML is chaos.

Nested tags, self-closing tags, inline styles — a mess.

Current version works for most cases, but a real parser is coming.

2. False Positives

Some images should have empty alt text (decorative).

Some buttons use aria-label instead of text.

Balancing accuracy vs. over-reporting is tricky.

3. Making It Actually Useful

Tools like Lighthouse, axe DevTools, and WAVE already exist.

My differentiator:

  • Simpler language (no cryptic WCAG codes)
  • Line-by-line fixes, not just “you have 10 issues”
  • Future: Auto-PR generation (nobody does this simply)

🖼️ Screenshots

AccessFix Dashboard

  • Dashboard with scan input and output
  • Individual issue detail with code snippet
  • Severity breakdown

🧪 Try It Yourself

AccessFix (Beta): https://accessfix.vercel.app

It’s completely free — just create an account, paste your website URL or upload HTML to start scanning.

💬 I Need Your Feedback

This is a beta launch — it’s far from perfect.

I’d love your input on:

  • 🐛 Bug reports: what broke?
  • ⚠️ False positives: what was flagged incorrectly?
  • ✨ Feature requests: what’s missing?
  • 💭 Honest feedback: is this useful or redundant?

Specific Questions

  • Would you use this over Lighthouse/axe? Why or why not?
  • What would make the AI-powered PR generation valuable?
  • Should there be a paid tier for teams, or stay free?

🧠 Lessons Learned

What Worked

  • Shipping fast (2 days) instead of over-building
  • Using Supabase to skip backend boilerplate
  • Focusing on one pain point (a11y scanning)

What I’d Do Differently

  • Validate with 10+ devs before coding
  • Use a proper HTML parser from the start
  • Add better test coverage

💡 The Backstory (Why I Built This)

I’m a starting developer.

This is my third product attempt this year:

  1. React component kit → 900 views, $0 sales
  2. Web design guide → 25 views, $0 sales
  3. Now this → ???

The first two failed because I built things nobody needed.

This time, I’m building with feedback first, not after.

If AccessFix helps even 10 developers make their sites more accessible, that’s a win.

🔮 What’s Next for Me

This Week

  • Fix bugs from beta feedback
  • Add GitHub integration
  • Start building AI-powered fixes

Long-Term

  • If AccessFix gains traction → scale into full product
  • If not → pivot, learn, and try again

I’m building in public.

Follow along if you want to see a teenager figure out how to ship products people actually use.

🔗 Links

Thanks for reading. Now go make your websites more accessible 🚀

P.S. – If you find bugs, please be gentle. I’m learning as I go.

Top comments (1)

Collapse
 
getsetgopi profile image
GP •

I value the hard work you have put into developing open-source accessibility checker tool. That said, there are established tools such as Deque AxeDev Tools, SiteImprove, and several others that have been thoroughly tested and proven effective over time, and they continue to perform reliably.