Accessibility Flow Analyzer

01 — Context

Summary

A self-initiated tool built to put my own accessibility claims to the test. Enter any public URL or paste a component snippet, and it analyzes the code against WCAG and KWCAG standards — then overlays the focus flow directly on the page so you can see, not just read, how a screen reader or keyboard user would move through it.

02 — Challenge

Problem

Accessibility audits are usually either too abstract (a checklist of rules) or too disconnected from the actual interface (a report you read separately from the page). I wanted to see the focus order the same way a user experiences it — visually, in context — rather than inferring it from a list of violations.

03 — Approach

What I Did

• Built dual input modes: full URL analysis for any public website, and direct snippet analysis for in-progress component code.
• Implemented WCAG and KWCAG rule checks to evaluate semantic structure, ARIA usage, and keyboard accessibility.
• Designed a focus-flow overlay that renders directly on top of the analyzed page, visually tracing the tab order step by step instead of presenting it as a disconnected report.

04 — Outcome

Result

Live and open source — built end-to-end with Claude Code as both a personal tool and a way to validate accessibility decisions on real interfaces, including my own portfolio.