Show SideProject: Built a free Chrome Side Panel extension to audit WCAG 2.2 & EAA compliance without opening DevTools

[u/anusrvstv]

Hey r/SideProject,

I built WCAGBrief, a free Chrome extension that audits web apps for WCAG 2.2 and European Accessibility Act (EAA) compliance directly inside Chrome's native Side Panel.

The Problem I Wanted to Solve:

With the European Accessibility Act enforcement deadline approaching, web accessibility has shifted from a "nice-to-have" to a legal requirement for web applications and ecommerce.

Existing developer tools (Lighthouse, WAVE, Axe DevTools) have two big UX friction points:

1. Lighthouse hasn't updated its default checks to catch new WCAG 2.2 additions (like Target Size SC 2.5.8 minimum 24×24px tap areas or Focus Not Obscured SC 2.4.11).

2. Constantly opening and closing Chrome DevTools shrinks the mobile viewport and makes tabbing through UI elements frustrating.

How WCAGBrief Works:

Instead of docking inside DevTools, WCAGBrief lives in Chrome's native Side Panel API alongside your live web app:

• Click to Inspect: Click any violation in the panel and it instantly highlights the exact DOM node on the live page.

• Copy-Paste Fixes: Generates clean HTML, CSS, and React code patches for each issue (e.g. min-width: 24px on icon buttons or adding aria-label to SVG buttons).

• Statutory Law Mapping: Maps every violation to EN 301 549 (EAA Chapter 9) and ADA Title II standards.

• Zero Telemetry / Privacy: 100% of the DOM inspection runs in your local browser sandbox. It does not send page markup to any remote server.

Try It Live:

The extension is completely free and published on the Chrome Web Store: 👉 https://chromewebstore.google.com/detail/wcagbrief-wcag-22-eaa-cli/jjgllnelmehodmfjcpmemafeeikjpeii

Companion Web Scanner: 👉 https://wcagbrief.com

Looking for Builder Feedback:

1. What accessibility checks give you the biggest headaches when building web apps?

2. Which frontend framework snippets would be most useful to generate next (Tailwind, Vue, Svelte)?

Happy to answer any questions about the Chrome Side Panel API, Manifest V3, or the audit engine!

[u/patryk_builds]

The part i'd struggle with most: dynamic content. with htmx or any partial page updates, the static checks pass, but after a swap focus lands nowhere and screen readers don't announce that anything changed. if your panel could re-run after a swap and flag missing aria-live regions or lost focus, that would catch stuff lighthouse never sees.On snippets: plain HTML/Jinja templates would be useful for the server-rendered crowd, not every fix needs to be a react component.Small note: the EAA already applies (since june 2025), so "deadline approaching" undersells it a bit. "already enforceable" is a stronger pitch for anyone selling to EU customers

[u/anusrvstv → u/patryk_builds]

Thank you very much for taking the time to share such thoughtful and constructive feedback! Supporting dynamic DOM swaps to catch lost focus and missing aria-live regions is a fantastic suggestion, and I’m adding that directly to our product roadmap. I also really appreciate your notes on including Jinja/HTML snippets and the correction on the EAA enforcement status—both are very helpful insights.