skills.rest
jacocanete
jacocaneteCOMMUNITY
Explore all skills by this author →
GitHub

review-accessibility

Audit React and Tailwind codebases for accessibility issues and generate a prioritized report.

Updated Apr 3, 2026
Search Tags:#accessibility#a11y#react#wcag#tailwind#code-review#aria
One-click install
npx skills add https://github.com/jacocanete/cebu-airsoft-hub --skill review-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-accessibility
Source: https://github.com/jacocanete/cebu-airsoft-hub/tree/main/.opencode/skills/review-accessibility
Command: npx skills add https://github.com/jacocanete/cebu-airsoft-hub --skill review-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The repository's UI can exclude keyboard and screen reader users, mobile touch users, and people with low vision due to missing labels, small touch targets, absent ARIA attributes, poor contrast, and unannounced dynamic updates. This Skill provides a structured review to find, document, and prioritize those accessibility regressions so they can be fixed systematically and verified against WCAG 2.1 AA criteria.

Core Features & Use Cases

  • Touch target verification: Calculate rendered sizes for icon buttons and interactive controls and recommend min-h-11/min-w-11 or increased padding to meet WCAG 2.5.5.
  • Label and ARIA audits: Ensure inputs have programmatic labels, icon-only buttons have aria-label, decorative icons are aria-hidden, and dynamic regions use aria-live where appropriate (WCAG 4.1.2).
  • Alt text and image semantics: Identify missing or non-descriptive alt attributes and mark decorative imagery as presentational.
  • Keyboard and focus behavior checks: Detect non-button clickable divs, missing tab stops, focus traps, and removed focus indicators without accessible replacements.
  • Contrast estimation: Flag low-contrast text and opacity variants that fail 1.4.3 and recommend accessible color alternatives or increased weight/size.
  • Screen reader behavior: Verify announcements for live updates, contextual labeling for counts (e.g., "47 upvotes"), and proper list semantics for nested comments.
  • Use Case: Run this pass on the Cebu Airsoft Hub to produce docs/code-review/pass-5-accessibility.md with file_path:line_number findings, prioritized fixes, and WCAG references.

Quick Start

Run a Pass 5 accessibility audit on the repository and produce docs/code-review/pass-5-accessibility.md containing file_path:line_number findings, impact ratings, and prioritized fixes.

Frequently Asked Questions about review-accessibility

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

FAQPage Schema
How do I run a WCAG accessibility audit on a React codebase?▼

Run a WCAG accessibility audit by scanning your React codebase for touch target sizes, ARIA attributes, keyboard navigation, and color contrast, generating a prioritized report with file paths and line numbers for each issue.

What's the best way to check Tailwind components for WCAG 2.1 AA compliance?▼

Check Tailwind components for WCAG 2.1 AA compliance by inspecting rendered touch sizes, estimating contrast ratios for opacity variants, and verifying form labels to produce a list of prioritized fixes.

How do I verify ARIA attributes and keyboard focus behavior in a React component library?▼

Verify ARIA attributes and keyboard focus by reading source files to detect missing programmatic labels, non-button clickable divs, absent tab stops, and removed focus indicators that violate WCAG 4.1.2.

Can I detect missing alt text and low contrast issues in my web UI automatically?▼

Yes, you can detect missing alt text and low contrast by analyzing source files to identify non-descriptive image attributes and estimating color contrast ratios against the 1.4.3 WCAG threshold.

Does this accessibility review work with base-ui React components?▼

Yes, this accessibility review applies directly to React projects and component libraries like @base-ui/react, evaluating UI components, forms, editor toolbars, and dynamic updates for screen reader compatibility.

How do I document screen reader behavior issues for dynamic live updates?▼

Document screen reader behavior issues by checking for missing aria-live regions on dynamic updates, verifying contextual labeling for interactive counts, and validating proper list semantics for nested comments.

Related Skills

Explore More Software Engineering Skills→
senior-sigansenior-sigan

index-repo-py

Generate a compact PROJECT_INDEX.md for Python FastAPI projects.

Community
Intermediate
Community-AccessCommunity-Access
387

markdown-csv-reporter

Convert markdown accessibility audit findings into structured CSV reports.

Official
Advanced
mauriciodelriomauriciodelrio
3

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

Community
Intermediate
CivicActionsCivicActions
2

accessibility-audit

Audit web pages and components for WCAG 2.1 AA and Section 508 compliance.

Official
Advanced