accessibility/component

Identify accessibility issues in React components and generate remediation reports.

Updated Aug 23, 2026

Search Tags:#accessibility #a11y #react #validation #components #aria #web-standards

Ready to run

npx skills add https://github.com/f-campana/bifrost --skill accessibility-component

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility/component
Source: https://github.com/f-campana/bifrost/tree/main/skills/accessibility/accessibility-component
Command: npx skills add https://github.com/f-campana/bifrost --skill accessibility-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill identifies accessibility issues in React components, enabling teams to address semantic and ARIA gaps before deployment.

Core Features & Use Cases

Reads a component file and its specification to identify accessibility gaps.
Generates a remediation-focused report to guide fixes and ensure compliance.
Use Case: QA engineers can run this during reviews to ensure new components meet accessibility standards.

Quick Start

Assign the accessibility/component skill to a React component to verify its compliance.

Frequently Asked Questions about accessibility/component

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

FAQPage Schema

How do I check my React component for accessibility issues?▼

To check React component accessibility, assign the skill to a component file. It evaluates semantic HTML, ARIA attributes, focus management, and React Aria integration, then outputs a structured markdown remediation report.

What is the best way to validate ARIA attributes in React components?▼

Validating ARIA attributes in React components involves checking semantic HTML and focus management against web standards. This skill reads component files and specifications to identify ARIA gaps and generate remediation guidance.

Does this accessibility validation work with standard React component libraries?▼

Yes, this accessibility validation targets interactive widgets like buttons, dialogs, lists, and form fields across typical React component libraries. It enforces web standards and React Aria integration checks for these components.

How do I audit focus management in my React dialogs and form fields?▼

Auditing focus management in React dialogs and form fields requires evaluating interactive widgets against web standards. This skill identifies focus management gaps and produces a structured report to guide remediation fixes.

What accessibility issues are commonly found in React component libraries?▼

Common accessibility issues in React component libraries include missing semantic HTML, incorrect ARIA attributes, and poor focus management. This skill identifies these gaps in interactive widgets and outputs a remediation-focused report.