accessibility-checklist

Identify and document accessibility issues in React/Next.js UI components.

1.4k|162|Updated Sep 5, 2025
One-click install
npx skills add https://github.com/inkeep/agents --skill accessibility-checklist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-checklist
Source: https://github.com/inkeep/agents/tree/main/.agents/skills/accessibility-checklist
Command: npx skills add https://github.com/inkeep/agents --skill accessibility-checklist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured accessibility review checklist to identify and document a11y issues across frontend UI components, helping teams ship more inclusive interfaces.

Core Features & Use Cases

  • Automated audit guidance: Checks for accessible names, proper ARIA usage, focus management, keyboard navigation, and semantic HTML across common patterns (forms, dialogs, tooltips, tables).
  • PR review companion: Guides reviewers on where to look during code reviews and what violations commonly occur in Radix/shadcn/ui implementations.
  • Compliance & risk reduction: Reduces risk of inaccessible components by surfacing actionable remediation steps.

Quick Start

Run the accessibility checklist against the latest PR or codebase and record any issues found, then address them following the guidance in the document.

Frequently Asked Questions about accessibility-checklist

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

FAQPage Schema
How do I check my Radix UI components for accessibility issues during a code review?

To check Radix UI components for accessibility issues during a code review, use a structured checklist to identify missing accessible names, improper ARIA labeling, and keyboard navigation defects. This surfaces actionable remediation steps for common patterns like dialogs and forms.

What common accessibility issues occur in shadcn/ui forms and dialogs?

Common accessibility issues in shadcn/ui forms and dialogs include missing accessible names, icon-only controls without aria-labels, improper focus-trap behavior, and incorrect semantics in tables. Reviewing these patterns ensures proper screen-reader support and keyboard navigation.

How do you manage focus trapping and keyboard navigation in React dialogs?

Managing focus trapping and keyboard navigation in React dialogs requires checking that focus remains within the component boundaries and validating responsive focus outlines. Reviewing focus-trap behavior ensures that keyboard users interact safely with modals and tooltips.

Can this accessibility checklist be used for React and Next.js projects?

Yes, this accessibility checklist is designed specifically for React and Next.js projects using Radix UI or shadcn/ui. It applies to frontend code reviews and pull requests to document and resolve a11y issues across UI components.

What is the best way to document missing aria-labels on icon-only controls?

The best way to document missing aria-labels on icon-only controls is to run an accessibility review that identifies missing accessible names and records the violations. This provides actionable guidance to add proper ARIA labeling during pull requests.