accessibility-auditing_skill

This skill helps you conduct comprehensive accessibility audits across code, ARIA, keyboard navigation, and screen reader compatibility for WCAG compliance.

23

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill charlesjones-dev/claude-code-plugins-dev --skill accessibility-auditing

SKILL.md54.2 KB

Overview

This skill guides developers through comprehensive accessibility audits to find WCAG compliance gaps and barriers to inclusive design. It focuses on semantic HTML, ARIA correctness, keyboard navigation, screen reader compatibility, color contrast, and form accessibility. Use it to produce prioritized, actionable findings and remediation steps tied to exact code locations when available.

How this skill works

I inspect the provided codebase, HTML snippets, accessibility tree, screenshots, or live URL and evaluate against WCAG 2.1/2.2 success criteria and ARIA Authoring Practices. Where code elements are present, I identify exact offending elements and list precise remediation examples; where code is missing or visual-only, I flag the absence with clear guidance. I include keyboard and screen reader checks, contrast measurements, and recommendations for testing with Playwright MCP when a live URL is available.

When to use it

Before release or during feature reviews to ensure WCAG 2.1/2.2 compliance
When a user reports accessibility barriers (keyboard, screen reader, focus issues)
To validate ARIA use in custom components or widgets
For form audits: labels, error handling, and autocomplete
When measuring color contrast, touch targets, or mobile/responsive behavior

Best practices

Use native semantic HTML before adding ARIA roles
Provide one clear h1 per page and maintain heading hierarchy
Ensure every interactive element has an accessible name and keyboard handlers
Return focus after closing modals and trap focus while open
Measure contrast on rendered pixels and test focus indicators at actual sizes

Example use cases

Audit a React component library for missing labels and incorrect ARIA roles
Scan a public URL with Playwright MCP to capture accessibility tree and focus order
Review forms for missing label associations and inaccessible error messaging
Verify keyboard access and focus management in modal dialogs and custom dropdowns
Assess mobile touch target sizes, zoom behavior, and orientation handling

FAQ

No. The skill produces a detailed audit with exact element locations and suggested code changes; developers apply the fixes.

What do you need to run a full audit?

Provide the code or HTML snippets, accessibility tree or screenshots, and preferably a live URL for Playwright MCP testing. If elements are missing from the code, I will explicitly state that.