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 (5)

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.

Collapse
 
aethelsoftware profile image
Aethel Software •

Thanks for the feedback! You're absolutely right that axe DevTools and SiteImprove are excellent, battle-tested, and reliable tools.

Here's what makes AccessFix different (and why we're building it):
We're not trying to replace axe or SiteImprove - we're building on top of them. AccessFix actually uses axe-core under the hood for scanning accuracy.

What we plan on adding that existing tools don't have:

  • GitHub-native integration - Automatic PR comments with inline annotations on exact lines, not just general reports. Creates GitHub Issues automatically for critical violations.
  • AI-powered context-aware fixes - in the future we want to use AI to analyze your codebase and generate fixes that match your coding patterns, not just generic suggestions.
  • Approachable for non-experts - this is a large design factor, we want people to have plain English explanations instead of cryptic WCAG codes, visual code snippets with line numbers, actionable fixes instead of just audits.

Beta's rough right now, but the vision is: catch issues in PR review, get AI fixes, merge clean code. Not another manual testing tool.

Collapse
 
getsetgopi profile image
GP •

Just to let you know, Axe is currently developing an integration with AI and Jira. Axe University provides a clear and straightforward explanation of the problem and its solution in simple English. However, accessing this information requires a valid license.

Collapse
 
js402 profile image
Alexander Ertli •

Hey,

I think I found some bugs.
I hope this helps.

When I click on "Start Scan" on a new record, the scan-accessibility returns a CORS error.

Also, there were some issues with the signup; I found no way to use the code provided as an alternative to the account activation link.

Clicking on the link twice redirected to http://localhost:3000/#error=access_denied&error_code=otp_expired&error_description=Email+link+is+invalid+or+has+expired instead of an error page.

I know, authentication (auth) is quite hard to get right, but I'm sure you'll figure it out.
Or just reach out to me.

Collapse
 
aethelsoftware profile image
Aethel Software •

Hi!

Thanks you for finding these errors. I was in the process of adding Github integration, and misplaced the link.

It should work now. I appreciate your feedback!