review-accessibility_skill

This skill helps you review UI code for accessibility, ensuring screen readers, keyboard navigation, color contrast, and semantic structure meet WCAG

Shell

0

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 shotaiuchi/dotclaude --skill review-accessibility

SKILL.md2.1 KB

Overview

This skill performs accessibility-focused code reviews for UI code, identifying issues that affect screen reader users, keyboard-only navigation, color contrast, and semantic structure. It flags WCAG A/AA violations, ranks findings by severity, and suggests targeted fixes to make interfaces inclusive and compliant.

How this skill works

The review inspects markup, attributes, ARIA usage, styling, scripts that modify the DOM, and mobile accessibility properties. It evaluates screen reader labels, keyboard focus behavior, contrast ratios, heading structure, form labeling, and mobile touch targets, then classifies each finding as Blocker, Major, Minor, or Enhancement.

When to use it

Before a public release to ensure WCAG A/AA compliance
During PR reviews for UI components or pages
When adding dynamic content or client-side navigation
When auditing mobile apps for iOS and Android accessibility
When improving usability for assistive technology users

Best practices

Treat missing accessible labels and unlabeled form fields as blockers and fix immediately
Prefer native semantic elements over ARIA when possible (use <button>, <nav>, <main>)
Verify keyboard tab order matches visual order and that focus is visibly styled
Measure color contrast and avoid conveying information by color alone
Test dynamic updates with a screen reader and ensure proper aria-live regions
Include alternative interactions for gesture-only controls on mobile

Example use cases

Review a login form to ensure inputs have labels, error messages are announced, and focus moves to the first invalid field
Audit a single-page app to confirm route changes update focus and screen readers are informed
Check a data table for proper headers, keyboard sortable columns, and row selection announcements
Validate a marketing page for contrast issues, heading hierarchy, and non-text content descriptions
Assess a mobile screen for adequate touch target size and platform-specific accessibility properties

FAQ

Findings map to severity: Blocker for WCAG A failures, Major for WCAG AA breaches, Minor for assistive tech usability issues, and Enhancement for suggested improvements.

Do you replace manual testing with screen readers and keyboard checks?

No. Automated inspection and code review surface many issues, but manual testing with real assistive technologies and keyboard-only interaction is required to validate behavior.