See What Screens See: The ML-Powered Accessibility Scanner

Accessibility Scanner with ML (TensorFlow.js)

Your website might look beautiful. But is it invisible to millions of users?

You've spent hours perfecting your color palette. The contrast is stunning — on your monitor. But for someone with low vision, that "subtle" gray-on-gray text is completely illegible. You added alt text to your images — at least, you think you did. Did you miss one? Two? Twenty?

Now imagine clicking a single button and watching your website transform. Every accessibility issue glows in real time. Low-contrast text pulses red. Images without alt text flash orange. Elements with incorrect ARIA attributes highlight in yellow. Your focus order appears as numbered trail — tab, tab, tab — revealing exactly where keyboard users get trapped.

You fix one issue. The heatmap updates instantly. Within minutes, your site goes from "probably accessible" to certifiably compliant.

That's not a dream. That's the Accessibility Scanner with ML — a TensorFlow.js-powered audit tool that runs entirely in your browser, never sends your code to a server, and catches issues your eyes would miss.

What It Does: Instant, Private, Intelligent Accessibility Audits

Traditional accessibility scanners send your entire HTML to a cloud server for analysis. That's slow, expensive, and a privacy nightmare. Our scanner works locally — everything happens inside your browser.

What It Scans

Visual Heatmaps on a Virtual DOM

Scan results aren't just a list of errors. They're visual:

• Color contrast heatmap – Red overlay where text fails WCAG, green where it passes
• Missing alt heatmap – Orange rectangles over images without descriptions
• Focus order trail – Numbered blue dots showing your tab sequence (1, 2, 3, 42...)
• ARIA error overlay – Purple highlights on elements with invalid attributes
• Clickable area map – Shows actual hit targets vs. perceived targets

All rendered on a virtual DOM — we scan safely without modifying your live site.

Compliance Scoring

We provide per-page scores and site-wide aggregate (for multi-page scans).

The Modern Tech Stack: ML That Never Leaves Your Browser

TensorFlow.js: Local Machine Learning

TensorFlow.js is Google's library for running machine learning models directly in the browser. No servers. No API keys. Just your device's GPU or CPU.

What our models do:

total model size: ~23 MB (downloaded once, cached via PWA)ext

Inference time per page:

• Small page (<50 elements): 200-400ms
• Medium page (50-200 elements): 500-800ms
• Large page (200-500 elements): 1-2 seconds

All on your device. No waiting for cloud servers.

Shadow DOM: Safe, Isolated Scanning

We don't modify your live website. We create a Shadow DOM — a completely isolated copy of your page's structure.

Benefits:

• Your site remains untouched (no flickering, no mutations)
• We can inject our heatmap overlays without interfering with your CSS
• Scans run in a sandbox — if something crashes, your page is fine
• Multiple scans can run simultaneously without conflicts

Web Locks API: Conflict-Free Concurrent Scans

Scanning large sites with multiple tabs? The Web Locks API prevents race conditions.

javascript:

// Request a lock for scanning a specific URL
navigator.locks.request('accessibility-scan-example.com', async () => {
  // Only one scan runs at a time for this URL
  await performScan();
});

What this means: You can open 10 tabs, scan 10 different pages simultaneously, and our tool coordinates efficiently — no crashes, no corrupted results.

Local Storage + IndexedDB: Persistent Results

Scan results are saved locally:

• Comparison tracking – Scan today, scan next week, see improvements
• Exportable reports – JSON, CSV, HTML, PDF
• Historical trends – Chart your accessibility progress over time

Your Benefits: Why Local ML Scanning Changes Everything

Privacy-First (No Server Upload)

This is the killer feature. Your HTML never leaves your computer.

For enterprise users: This is GDPR and HIPAA compliant by default. Your proprietary code never touches our infrastructure.

Instant Feedback (No Waiting)

Cloud scanners take 5-30 seconds per page. Our scanner:

• Small page: 0.2 seconds
• Medium page: 0.5 seconds
• Large page: 2 seconds

Live editing mode: As you type HTML/CSS in our code editor, the scanner re-runs automatically. You see accessibility issues appear and disappear with every keystroke.

Scan Localhost and Development Sites

Most online scanners require a public URL. We don't.

Enter http://localhost:3000 (or any internal IP) and scan your development environment before deployment. Catch accessibility issues before they reach production.

Works with:

• localhost:3000, localhost:8080, any port
• 192.168.x.x (local network)
• file:// protocol (local HTML files)
• Staging environments behind VPNs

Great for Compliance Teams

Generate WCAG 2.1 AA compliance reports with:

• Executive summary (pass/fail by category)
• Detailed issue list with code snippets
• Screenshots with heatmap overlays
• Remediation suggestions (example fixes)
• Export as PDF, HTML, or CSV

Audit-ready documentation for legal and compliance teams.

Learn Accessibility by Doing

The scanner doesn't just tell you what's wrong — it teaches you why.

For each issue:

• Explanation: "Contrast ratio 2.3:1 fails WCAG 2.1 AA (minimum 4.5:1)"
• Impact: "Users with low vision cannot read this text"
• Fix suggestion: "Change text color from #888888 to #333333"
• Example code: How to fix it

Over time, you internalize accessibility best practices.

Continuous Integration (CI/CD)

Automate accessibility testing in your pipeline:

bash:

# CLI mode (headless Chrome)
npx accessibility-scanner scan https://staging.myapp.com --threshold 90

# Output:
# ✓ Homepage: 92/100 (A)
# ✓ Product page: 88/100 (B)
# ✗ Checkout page: 67/100 (C) - FAILED
# [ERROR] Accessibility threshold not met

Run on every pull request. Prevent accessibility regressions.

Real-World Scenarios (Try These Today)

Scenario 1 – The E-Commerce Accessibility Audit

Setup: Your online store has 500 products. You're not sure if all images have alt text.

Action: Run the scanner on your product listing page.

Result: Heatmap shows 47 images without alt text. 12 have generic alt="image". Scanner suggests alt text based on product names. You fix in 10 minutes instead of 10 hours.

Scenario 2 – The Design System Validation

Setup: Your team built a new design system. You want to ensure all components are accessible before rollout.

Action: Scan your component library (Storybook running on localhost).

Result: Button component passes contrast. Card component fails (low-contrast link text). Modal component has incorrect ARIA attributes. You fix before any developer uses them.

Scenario 3 – The Legal Compliance Nightmare

Setup: Your company received an ADA compliance demand letter. You need to prove you're fixing issues.

Action: Run the scanner on 100 critical pages. Generate PDF report.

Result: 47-page report with heatmaps, issue counts, and remediation plan. Legal team approves. You have documentation for the plaintiff.

Scenario 4 – The WordPress Plugin Audit

Setup: You manage 50 client WordPress sites. Each uses different plugins. You have no idea if any are accessible.

Action: Run the scanner on each site (saved URLs in your account).

Result: Three plugins are causing focus traps (keyboard users can't tab past a widget). You disable them and file bug reports with the authors.

Scenario 5 – The Live Coding Class

Setup: You're teaching web development. Students keep forgetting alt text.

Action: Share the scanner link. Students paste their HTML. Heatmap shows missing alt immediately.

Result: After one class, alt text omissions drop by 90%. Visual learners internalize the pattern.

How to Get Started

1. Open the Accessibility Scanner

Find "Accessibility Scanner" in your dashboard navigation.

2. Choose Your Input Method

3. Configure Scan Options

4. Click "Start Scan"

Watch the progress bar. For single pages, results appear in 0.5-2 seconds.

5. Review Results

• Summary dashboard – Score, issue counts by category
• Heatmap view – Visual overlay on your page
• List view – Sortable, filterable issue table
• Code view – See exactly which HTML elements are problematic

6. Fix Issues

Click any issue → See fix suggestion → Click "Copy fix" → Paste into your code editor → Re-scan to verify.

7. Export Report

• Executive summary (PDF) – For stakeholders
• Detailed audit (HTML) – For developers
• CSV data – For spreadsheets
• JSON – For custom tooling

Advanced Features (Power Users)

Automated Remediation Suggestions

For common issues, the scanner suggests exact fixes:

You can apply fixes directly in our code editor (for pasted HTML).

Batch Scanning (Multi-Page)

Enter a sitemap URL or list of URLs. The scanner crawls and audits:

• Up to 500 pages (free tier)
• Progress tracking
• Aggregate scores
• List of worst-performing pages

Continuous Monitoring

Schedule automatic scans:

• Daily, weekly, monthly
• Email alerts when score drops below threshold
• Integration with Slack, Teams, Discord

Regression Detection

Compare two scans to see what changed:

Previous scan (May 1):  87/100 (B)
Current scan (May 30):  92/100 (A) +5 points

Improvements:
+ Fixed 12 missing alt attributes
+ Improved contrast on primary button

Regressions:
- New modal missing ARIA labels (3 issues)

Team Collaboration

• Share scan results with team members
• Assign issues to specific developers
• Add comments to individual findings
• Track fix status (Open → In Progress → Fixed → Verified

Understanding Your Results (Interpretation Guide)

Score Breakdown

Issue Severity Levels

False Positives (What the ML Can't Know)

Automated tools catch ~30-40% of accessibility issues. The rest require manual testing.

Our scanner is honest about its limitations:

We flag manual review items clearly.

Privacy & Security (We Take This Seriously)

Your Code Never Leaves Your Device

• All ML inference runs locally via TensorFlow.js
• URLs and HTML are processed in your browser tab
• We don't log, cache, or transmit your content
• No analytics on what you scan

What We Do Collect (Anonymous)

• Feature usage (button clicks, not content)
• Scan duration (performance monitoring)
• Error rates (debugging)

We cannot see your code. We cannot share your code. Your code is yours

Enterprise Self-Hosted Option

For maximum security, self-host the entire scanner:

bash:

docker pull accessibility-scanner/self-hosted
docker run -p 8080:80 accessibility-scanner/self-hosted

Run on your internal network. Never touches the public internet.

Limitations (Honest Expectations)

Frequently Asked Questions

Q: How accurate is the ML model?

A: ~85-95% for automated checks (contrast, missing alt, ARIA syntax). ~70-80% for complex cases (image context classification). We prioritize low false negatives (catching real issues) over low false positives.

Q: Does this replace manual accessibility testing?

A: No. Automated tools catch ~30-40% of issues. Manual testing with screen readers and keyboard-only users is still required for full compliance. Our scanner is a force multiplier, not a replacement.

Q: Can I scan password-protected pages?

A: Yes. Provide basic auth credentials or cookies in the scanner settings.

Q: Is this free?

A: Yes. Free tier includes unlimited single-page scans, batch scans up to 10 pages, and standard reporting. Pro tier (coming soon) adds 500+ page batch scans, continuous monitoring, team collaboration, and API access.

Q: How is this different from Lighthouse?

A: Chrome's Lighthouse includes accessibility audits but is limited (fewer checks, no ML). Our scanner has 3x more audit rules, ML for complex cases, heatmap visualization, and batch scanning.

Q: Can I integrate this into my CI/CD pipeline?

A: Yes. CLI version available (npm package). Run on every pull request.

Q: Does it work with single-page apps (React, Vue, Angular)?

A: Yes. Our scanner waits for DOM mutations (via MutationObserver) before scanning. For SPAs, you may need to trigger a manual scan after navigation.

Q: What about iframes and shadow DOM?

A: Optional. Can scan iframes (same-origin only) and open shadow roots (if mode: 'open').

The Future of ML-Powered Accessibility

We're actively building:

• Screen reader simulation – Text-to-speech output for testing (client-side)
• Cognitive load analysis – Detects complex sentences, jargon, readability scores
• Motion sickness prediction – Flags potentially vestibular-triggering animations
• Mobile touch target optimization – Tests if buttons are large enough for thumbs
• Real-time code linting – Accessibility warnings as you type in our editor

Get Started in 60 Seconds

1. Open the Accessibility Scanner from your dashboard
2. Enter a URL (or paste HTML, or scan localhost)
3. Click "Start Scan"
4. Watch the heatmap appear – Red where text fails contrast, orange where alt is missing
5. Click any issue – See exactly where and how to fix it
6. Export your report – PDF for compliance, CSV for tracking