frontend-accessibility

Enforce WCAG 2.1 AA compliance and i18n parity in TypeScript React frontends.

2|Updated Jun 30, 2026
One-click install
npx skills add https://github.com/Canhada-Labs/ceo-orchestration --skill frontend-accessibility-canhada-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-accessibility
Source: https://github.com/Canhada-Labs/ceo-orchestration/tree/main/.claude/skills/frontend/frontend-accessibility
Command: npx skills add https://github.com/Canhada-Labs/ceo-orchestration --skill frontend-accessibility-canhada-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires typescript, react, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers and reviewers ensure accessibility and internationalization standards are met in their frontend applications, covering a wide range of accessibility patterns and i18n requirements.

Core Features & Use Cases

  • Accessibility Compliance: Implements WCAG 2.1 AA standards, including ARIA patterns, keyboard navigation, and screen reader compatibility.
  • Internationalization Support: Manages i18n parity across locales, locale-aware formatting, and RTL readiness.
  • Use Case: When building or reviewing a data-rich application, use this Skill to ensure your UI is accessible to all users and adheres to internationalization standards.

Quick Start

Load the frontend-accessibility skill and initiate a check for WCAG 2.1 AA compliance on the 'Project Alpha' frontend.

Frequently Asked Questions about frontend-accessibility

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

FAQPage Schema
How do I check my React application for WCAG 2.1 AA compliance?

You can ensure WCAG 2.1 AA compliance by running this Skill to automatically scan your React components for ARIA patterns, keyboard navigation, and screen reader compatibility. It identifies accessibility violations and suggests the correct implementation patterns.

What is the best way to manage i18n parity and locale-aware formatting in a TypeScript frontend?

To manage i18n parity, this Skill analyzes your TypeScript frontend to enforce locale-aware formatting and verifies right-to-left (RTL) readiness across all locales. It ensures internationalization standards are consistently met without manual cross-checking.

Does this frontend accessibility checker work without a TypeScript and React stack?

No, this accessibility checker requires a TypeScript and React stack to function. It specifically analyzes React components and TypeScript code structures to apply WCAG patterns and internationalization checks effectively.

How do I implement keyboard navigation and ARIA patterns for a data-rich React UI?

To implement keyboard navigation and ARIA patterns in a data-rich React UI, this Skill examines your component logic and applies standard WCAG 2.1 AA patterns. It ensures all interactive elements are fully navigable via keyboard and properly announced to assistive technologies.

Why does my frontend internationalization fail to provide RTL readiness across different locales?

Internationalization often fails RTL readiness due to missing locale-aware formatting or hardcoded text directions. This Skill addresses this by checking i18n parity across all locales and enforcing proper layout adjustments for right-to-left language support.