skills.rest
gitkraken
gitkrakenOFFICIAL
Explore all skills by this author →
Website𝕏@gitkrakenGitHub

a11y-flow-audit

Audit composed views for WCAG 2.1 AA compliance across landmarks, headings, and focus flow.

9.9k|1.8k|Updated Aug 8, 2016
Search Tags:#wcag#focus management#aria# accessibility#landmarks#a11y audit#Code review
One-click install
npx skills add https://github.com/gitkraken/vscode-gitlens --skill a11y-flow-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-flow-audit
Source: https://github.com/gitkraken/vscode-gitlens/tree/main/.claude/skills/a11y-flow-audit
Command: npx skills add https://github.com/gitkraken/vscode-gitlens --skill a11y-flow-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Accessibility bugs often only appear when individually accessible components are composed into a page or view: duplicate unlabeled landmarks, skipped heading levels, modals that strand keyboard focus, and live regions that race each other. This Skill audits that composition layer for WCAG 2.1 AA compliance, which single-component audits cannot see.

Core Features & Use Cases

  • Composition-Level Detection Spine: Enumerates the view boundary, component tree, landmarks, heading sequence, and focus-management patterns before writing any findings.
  • Safety-First Fix Rules: Applies 8 flow-level rules (single main, unbroken heading hierarchy, labeled repeated landmarks, complete modal focus handoff, skip links, DOM-based tab order, name collision checks, live-region single ownership) and refuses to emit fixes that would create new accessibility bugs.
  • Structured Three-Layer Report: Produces a Layer 1 summary for stakeholders, a Layer 2 findings table numbered F1/F2/F3, and Layer 3 detailed findings with Design Decision blocks for fixes that require human judgment.
  • Use Case: An engineer auditing a VS Code webview or React route runs the skill to get a report distinguishing safely-shippable fixes from design-blocked items, ready to hand off to a remediation planning workflow.

Quick Start

Ask the AI to run an a11y flow audit on a specific view or route, for example: audit the composition of src/routes/dashboard/settings for WCAG 2.1 AA compliance.

Frequently Asked Questions about a11y-flow-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit a page for WCAG 2.1 AA compliance at the composition level?▼

Run the flow audit on the view's route or entry file. It enumerates the component tree, landmarks, headings, and focus patterns, then produces a three-layer report with severity-graded findings and fixes scoped to the composition, not component internals.

What is the difference between a flow audit and a component accessibility audit?▼

A flow audit checks how components compose: landmark structure, heading hierarchy across components, focus handoffs between a modal and its trigger, and live-region conflicts. A component audit checks a single component's internals. Use the flow audit for pages and views.

Does this work with VS Code webviews and React Router routes?▼

Yes. The detection spine explicitly supports VS Code webviews created with createWebviewPanel or WebviewViewProvider, React Router routes, SvelteKit layouts and pages, Vue Router, Angular routes, and single HTML pages as view boundaries.

Can static analysis verify tab order and focus restoration?▼

No. Static analysis detects likely causes such as positive tabindex, CSS reordering, and portals, but runtime tab order, focus landing position, and live-region timing require browser verification. These are listed separately as Items Requiring Runtime Tooling.

Why does the audit refuse to emit certain fixes?▼

Safety rules ban partial fixes that could create new accessibility bugs, such as adding a second main element, proposing positive tabindex, or specifying only part of a modal focus handoff. Such cases are escalated to a Design Decision block requiring human input.

What frameworks and patterns does the focus-flow reference cover?▼

It covers focus-trap libraries like focus-trap, react-focus-lock, and Radix Dialog, the native dialog element with showModal, autoFocus guidance, route-change focus restoration, live-region ownership, and shadow DOM focus boundaries including delegatesFocus behavior.

Related Skills

Explore More Software Engineering Skills→
marcoguillermazmarcoguillermaz
3

ui-audit

Automated audits ensuring consistent UI implementation across your entire project.

Community
Intermediate
Community-AccessCommunity-Access
387

markdown-csv-reporter

Convert markdown accessibility audit findings into structured CSV reports.

Official
Advanced
jshsakurajshsakura
22

accessibility-tester

Identify UI accessibility defects including keyboard navigation, focus management, labeling, ARIA semantics, and color contrast; document them with remediation steps and validation criteria for runtime testing.

Community
Intermediate
Community-AccessCommunity-Access
387

Testing Coach

Guide accessibility testing for web applications with screen readers and automated tools.

Official
Intermediate