WCAG in Practice

About

About this site

About wcaginpractice.com

Why I built this

Most accessibility resources explain the rules. Very few show you what actually breaks and why it matters to real users. When I was learning WCAG and preparing for my CPACC certification, I kept running into the same gap: the standard tells you what to do, but not what failure looks like in practice or how to explain it to a designer or PM.

wcaginpractice.com is the resource I wished existed. Every pattern shows the broken version, explains who is affected, and gives you the accessible fix with copy-ready code.

Prefer a walkthrough? Check out the user guide.

Who I am

I am Jainish Soni, a PMP® (opens in a new tab) and CPACC certified (opens in a new tab) Technical Project Manager based in Toronto. I have a background in Computer Engineering and six years of experience working across digital agencies, eCommerce platforms, and marketing operations.

My day-to-day work involves translating complex technical constraints into clear outcomes for developers, designers, and business stakeholders. Accessibility has been part of that work since I started pursuing CPACC certification. The credential matters, but the practice matters more.

I built this site using React, Vite, and Cursor. I am not a full-time developer. I am a project manager who believes that understanding how things are built makes you a better person to lead the people building them.

Who this is for

wcaginpractice.com is for the people I work with every day:

  • Developers who know accessibility matters but want to see exactly what to change and why.
  • Designers who want visual guidelines for focus rings, touch targets, and contrast before anything gets built — see Accessibility for Designers.
  • Product managers and QA engineers who need to know what to look for in a design review or a sprint demo.

The playground, the page checker, and the learn section are all built with those three audiences in mind.

Dev tools

wcag-kit is a free, open-source MCP server for Cursor and Claude Desktop. Install the Claude Skill in any Claude Project for WCAG pattern knowledge during code review and component guidance - no editor setup required. WCAG Lens is live for VS Code - install from the Marketplace (opens in a new tab) for real-time diagnostics, red underlines on violations, and hover tooltips with WCAG rules and fix suggestions.

See the Dev tools install guide , download the Claude Skill (opens in a new tab) , or go directly to wcag-kit on npm (opens in a new tab) , wcag-kit on GitHub (opens in a new tab) , or WCAG Lens on the Marketplace (opens in a new tab).

What is coming next

Organizational accessibility guidance — laws, compliance frameworks, and how teams can audit themselves against AODA, ADA, and WCAG 2.2. Built for decision-makers, compliance officers, and project managers. Visual design guidance is already live in Accessibility for Designers.

Other projects

If you are interested in other things I have built, the Pocket AI Guide (opens in a new tab) is an interactive toolkit that helps non-technical professionals get practical value from AI tools. Same philosophy as this site: take something complex and make it immediately useful.

You can find my full portfolio and project case studies at jainishsoni.com (opens in a new tab).

Start here

Explore the site

Use Learn for disability context, Accessibility for Designers for visual guidelines, the page checker on a live URL, the playground when you implement UI, the WCAG 2.2 guide for what changed in the standard, CPACC prep for exam resources, Dev Tools (wcag-kit, Claude Skill, and WCAG Lens), or reach out if you have feedback.

Open playgroundCheck your pageVisit portfolio (opens in a new tab)

Questions? jainishsoni2024@gmail.com

Back to top