skills.rest
mbelenmontoya
mbelenmontoyaCOMMUNITY
Explore all skills by this author →
GitHub

accessibility-patterns

Provide WCAG 2.1 AA patterns for accessible React components.

Updated Dec 28, 2025
Search Tags:#accessibility#a11y#keyboard navigation#react#wcag#aria
One-click install
npx skills add https://github.com/mbelenmontoya/hara --skill accessibility-patterns-mbelenmontoya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-patterns
Source: https://github.com/mbelenmontoya/hara/tree/main/.claude/skills/accessibility-patterns
Command: npx skills add https://github.com/mbelenmontoya/hara --skill accessibility-patterns-mbelenmontoya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers build accessible user interfaces for React applications, ensuring compliance with WCAG 2.1 Level AA standards and improving usability for all users, including those with disabilities.

Core Features & Use Cases

  • WCAG 2.1 AA Compliance: Provides guidelines and code examples for creating accessible interactive elements, forms, modals, and navigation.
  • Semantic HTML & ARIA: Emphasizes the correct use of HTML semantics and ARIA attributes to enhance screen reader compatibility.
  • Focus Management: Details strategies for managing keyboard focus within components like modals and bottom sheets.
  • Use Case: When developing a new modal dialog in the Hará Match app, use this Skill to ensure it has proper ARIA attributes, traps focus, and is navigable via keyboard.

Quick Start

Ensure all interactive elements have accessible names and are keyboard navigable.

Frequently Asked Questions about accessibility-patterns

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

FAQPage Schema
How do I make a React modal accessible with keyboard navigation?▼

Accessible React modals require focus trapping to confine keyboard navigation within the dialog, proper ARIA attributes for screen reader compatibility, and interactive elements with accessible names to meet WCAG 2.1 Level AA guidelines.

What WCAG 2.1 Level AA requirements apply to React interactive elements?▼

WCAG 2.1 Level AA requirements for React interactive elements mandate keyboard navigability, correct semantic HTML usage, and proper ARIA attribute application to ensure accessible names and screen reader compatibility.

When should I use ARIA attributes in React components?▼

Use ARIA attributes in React components when semantic HTML is insufficient to convey accessibility information, ensuring screen reader compatibility and WCAG 2.1 Level AA adherence for interactive elements, forms, and modals.

How do I manage focus in a React bottom sheet component?▼

Manage focus in a React bottom sheet by implementing focus trapping strategies that contain keyboard navigation within the component, ensuring usability and compliance with WCAG 2.1 Level AA accessibility guidelines.

Does this accessibility skill work without external React libraries?▼

This accessibility skill operates without external dependencies, providing React component patterns using semantic HTML, ARIA attributes, and focus management strategies to achieve WCAG 2.1 Level AA compliance natively.

What is the best way to build accessible React forms?▼

Building accessible React forms requires semantic HTML for inputs, correct ARIA attributes for screen reader compatibility, and full keyboard navigability to meet WCAG 2.1 Level AA standards.

Related Skills

Explore More Software Engineering Skills→
hpsgdhpsgd

component-from-spec

Implement React components from specifications with TDD and accessibility standards.

Official
Advanced
haabehaabe

a11y-check

Audits web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
vecearvecear

modal-drawer-system

Create accessible React TypeScript modal and drawer components with focus trapping and ARIA attributes.

Community
Advanced
TamtitamTamtitam

aria-accessibility-fixer

Review and correct ARIA attributes in frontend HTML for WCAG compliance.

Community
Intermediate