WCAG in Practice: An Accessibility Ecosystem for Developers and Designers
An accessibility ecosystem for developers and designers – built by a CPACC and PSM I Certified Technical Project Manager. Four free tools that work together: an interactive learning platform with 27 UI patterns and a dedicated designer section covering focus indicators, touch targets, color contrast, spacing, motion, and component specs; wcag-kit (an MCP server that brings WCAG knowledge into AI editors like Cursor and Claude); WCAG Lens (a VS Code extension with real-time diagnostics as you type); and a Claude skill for WCAG-aware AI workflows directly inside Claude Projects. Built to bridge the gap between WCAG compliance guidelines and real-world product implementation.
Navigating the Accessibility Implementation Gap
In the modern digital landscape, building inclusive products is critical, yet many cross-functional teams fail to meet basic compliance benchmarks because of four primary system barriers:
Theoretical Documentation Overload
Standard compliance documentation, such as the official WCAG framework guidelines, is highly descriptive but fundamentally dry and academic, making it difficult for creators to visualize practical engineering applications.
The "What Now" Reporting Barrier
Traditional automated compliance checkers are excellent at identifying site violations, but they output confusing error codes and abstract machine strings that leave developers and designers completely stranded regarding the exact code fixes required.
The Engineering Silo
Accessibility is frequently treated as a downstream engineering bug to be patched right before a product launch, rather than a shared design lifecycle priority that product managers, designers, and developers understand collectively.
Product Strategy: Architecting the Solution
To solve these multi-layered execution barriers, I acted as the Product Owner and Technical Project Manager to define a high-performance, education-first architecture. The strategy focused on reducing implementation friction through four clear objectives:
Side-by-Side Contextualization: A split-screen layout displays real-time interactive comparisons of broken UI patterns next to their accessible counterparts across 27 component sandboxes – from dropdown menus and modals to drag and drop, carousels, and ARIA live regions.
Developer Tool Integration: wcag-kit brings the platform’s pattern knowledge directly into AI editors via the Model Context Protocol. Developers ask natural language questions and get WCAG references and code fixes without leaving their editor. WCAG Lens brings the same knowledge into the editor itself – flagging violations as red underlines on every save.
Eliminating UX Onboarding Friction: No authentication, no paywalls, no setup. All 27 playground sandboxes, the page checker, wcag-kit on npm, and WCAG Lens on the VS Code Marketplace are free and immediately accessible.
- Designer-Specific Guidance: A dedicated section covering six visual accessibility principles – focus indicators, touch targets, color contrast, spacing, motion, and component specs – with interactive examples and developer handoff notes, requiring no code knowledge.
My Approach: CPACC-Driven Agile Product Delivery
Leveraging my technical project management background and CPACC expertise, I orchestrated an accelerated development timeline to deliver a production-ready application for Toronto Tech Week. I executed the product scope using a highly modular micro-sprint strategy:
27 Interactive UI Patterns: Shipped pattern sandboxes covering modal dialogs, dropdown menus, form validation, data tables, carousels, drag and drop, focus management, ARIA live regions, and more – each with broken and accessible side-by-side comparisons and copy-ready code.
wcag-kit MCP Server: Published a free open-source MCP server on npm with 27 patterns, 4 tools, and 17 check rules. Developers ask natural language questions in Cursor or Claude and receive WCAG references, broken examples, and accessible fixes. Socket.dev security score: 100/100.
WCAG Lens VS Code Extension: Published a free VS Code and Cursor extension on the VS Code Marketplace with 25 WCAG rules covering images, forms, links, ARIA misuse, and keyboard patterns. Real-time red underlines, hover messages with rule numbers and plain-English fixes, and 6 one-click quick fix actions.
- Claude Skill for WCAG-Aware AI Workflows: Published a free Claude skill on GitHub enabling WCAG 2.1 and 2.2 AA knowledge directly inside Claude Projects. Covers 9 reference areas with no MCP server or VS Code required. Free and public at github.com/jainishsoni2026/wcag-in-practice-skill.
- Accessibility for Designers Section: Built a dedicated learning section on wcaginpractice.com covering six visual accessibility principles – focus indicators, touch targets, color contrast, spacing, motion, and component specs – with interactive examples, live contrast checkers, and developer handoff notes. No code knowledge required.
CREDIBILITY & POSITIONING STATEMENT
WCAG in Practice is explicitly built as an interactive educational resource and foundational reference toolkit for digital product teams. It serves as a powerful utility to prevent common implementation mistakes, but it is not a structural replacement for comprehensive professional accessibility audits or live usability testing sessions conducted with individuals with disabilities.
- Claude (Ideation, PRD Creation, & Pair Programming)
- Cursor (Primary Development & AI Orchestration)
- React, Vite, TypeScript, Tailwind CSS (Primary Frameworks)
- Radix UI, Shadcn UI (Component Primitives)
- VS Code Extension API, vsce (WCAG Lens)
- @modelcontextprotocol/sdk, zod (wcag-kit)
- WAVE API, Axe DevTools (Auditing Infrastructure)
- Netlify, Netlify Functions, Git/GitHub (Deployment System)
- Agile Sprint Methodology, PMP Project Controls (Management Framework)
27 Patterns
Translated a complex product requirements document into a fully functional learning platform within an accelerated three week development sprint for Toronto Tech Week.
MCP Server Live
wcag-kit published on npm - bringing 27 patterns and 17 check rules into Cursor and Claude via natural language.
VS Code Extension Live
Interactive broken vs fixed sandboxes covering WCAG 2.1 and 2.2 AA criteria across forms, navigation, modals, tables, ARIA, and more.
Designer Section Live
Six visual accessibility principles with interactive examples, component specs, and developer handoff notes.
Claude Skill Live
WCAG 2.1 and 2.2 AA knowledge inside Claude Projects - 9 reference areas, no setup required.
The Spotlight Feature: The Plain-Language Automated Page Checker
The Problem
Standard web audit checkers generate abstract, compliance-heavy metrics and numeric codes that offer little guidance to non-engineering stakeholders, creating a major barrier for product managers and designers trying to prioritize remediation tasks.
The Execution
I implemented an automated Page Checker powered by a serverless fetch routine that securely queries the WebAIM engine and handles the incoming payload via a custom translation dictionary. This layer catches raw compliance error strings and instantly processes them into plain-English definitions accompanied by explicit, step-by-step correction instructions.
The Win
Users can paste any public URL to view an immediate accessibility profile. Instead of leaving users with a list of abstract errors, every single diagnostic finding automatically links to an interactive playground sandbox on our site, demonstrating the exact design configuration and copy-ready code needed to deploy a permanent fix.
The Spotlight Feature: The Developer Tool - wcag-kit MCP Server
The Problem
Developers using AI editors like Cursor and Claude have no reliable way to ask accessibility questions and get accurate, pattern-specific answers. General AI knowledge about WCAG is inconsistent and often outdated.
The Execution
I built and published wcag-kit - a free Model Context Protocol server that gives AI editors deep WCAG knowledge. It exposes four tools: list_patterns, get_pattern, check_component, and suggest_fix. Developers ask natural language questions and the AI calls the right tool automatically. No tool names needed, no WCAG expertise required.
The Win
wcag-kit is live on npm and connects to Cursor via a single JSON config entry. It covers 27 patterns and 17 check rules matching everything taught on wcaginpractice.com. Socket.dev security score: 100/100.
The Spotlight Feature: The Editor Extension - WCAG Lens for VS Code
The Problem
Developers catch accessibility violations too late — during audits, after launch, or not at all. Existing linters either have too many false positives or require manual configuration.
The Execution
I built and published WCAG Lens — a free VS Code and Cursor extension that watches HTML, JSX, and TSX files as you type. It runs 25 WCAG rules on every save and flags violations as red underlines. Hovering shows the WCAG rule number, a plain English explanation of who is affected, and a specific fix. Six rules support one-click quick fix actions via Cmd+. that apply the correct pattern automatically.
The Win
WCAG Lens is live on the VS Code Marketplace. It achieved 8 installs and a 66% conversion rate on day one. TSX and JSX scanning filters out false positives from comments and string assignments, flagging only real markup violations.
The Spotlight Feature: The AI Workflow Tool - WCAG in Practice Claude Skill
The Problem
Developers and PMs using Claude Projects have no reliable way to bring structured WCAG knowledge into their AI workflows without setting up an MCP server or installing a VS Code extension. The barrier to accessibility knowledge should be zero.
The Execution
I built and published a free Claude skill on GitHub that brings WCAG 2.1 and 2.2 AA knowledge directly into Claude Projects. It covers 9 reference areas including perceivable, operable, understandable, and robust criteria. No MCP server, no VS Code, no setup required - download once and attach to any Claude Project.
The Win
The skill is live and public at github.com/jainishsoni2026/wcag-in-practice-skill. Any Claude user can access structured WCAG guidance in a natural conversation without leaving their workflow.
The Spotlight Feature: Accessibility for Designers
The Problem
Most accessibility resources are written for developers. Designers are handed WCAG documentation that is academic, code-heavy, and impossible to act on in Figma. Accessibility failures are overwhelmingly introduced at the design phase, not the development phase.
The Execution
I built a dedicated designer section on wcaginpractice.com covering six visual accessibility principles: focus indicators, touch targets, color contrast, spacing and readability, color as the only differentiator, and animation and motion. Each section includes interactive broken vs fixed examples, a live contrast checker, a designer decision guide, and specific Figma handoff notes - with no code knowledge required.
The Win
Designers can now engage with WCAG requirements visually and interactively before handoff, reducing the accessibility debt that developers inherit. The section links directly to the relevant playground patterns so designers and developers share a common reference point.
