skills.rest
etylsarin
etylsarinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility-standards

Apply WCAG 2.2 AA patterns to React, HTML, and CSS code.

59|12|Updated Feb 26, 2026
Search Tags:#accessibility#wcag#semantic-html#screen-reader#color-contrast#keyboard-navigation#inclusive-language
One-click install
npx skills add https://github.com/etylsarin/opencastle --skill accessibility-standards-etylsarin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-standards
Source: https://github.com/etylsarin/opencastle/tree/main/src/orchestrator/skills/accessibility-standards
Command: npx skills add https://github.com/etylsarin/opencastle --skill accessibility-standards-etylsarin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

WCAG 2.2 AA accessibility patterns are often omitted, leading to unusable interfaces for keyboard and screen-reader users. This Skill provides a reusable set of patterns to improve accessibility across React, HTML, and CSS codebases.

Core Features & Use Cases

  • Accessible keyboard navigation and focus management patterns for interactive components.
  • Semantics, ARIA usage, and inclusive language guidance to improve screen-reader experience.
  • Color contrast and visual clarity recommendations applicable to forms, navigation, and content.

Quick Start

Apply WCAG 2.2 AA patterns to new and existing UI components and pages.

Frequently Asked Questions about accessibility-standards

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

FAQPage Schema
How do I make my React components meet WCAG 2.2 AA accessibility standards?▼

To meet WCAG 2.2 AA accessibility standards, apply semantic HTML, proper ARIA usage, and keyboard navigation patterns to React components. This ensures interactive elements are operable and screen-reader compatible.

What's the best way to implement keyboard navigation and focus management for interactive UI elements?▼

Implement keyboard navigation and focus management by applying WCAG 2.2 AA patterns to your interactive UI elements. This ensures components across React and HTML are fully keyboard operable and screen-reader accessible.

Why does my screen reader skip over my custom HTML forms and navigation?▼

Screen readers skip custom HTML forms and navigation when semantic HTML and ARIA attributes are missing. Applying inclusive language and WCAG 2.2 AA accessibility patterns improves screen-reader compatibility and navigation.

How do I check color contrast for WCAG 2.2 AA compliance in CSS?▼

Check color contrast for WCAG 2.2 AA compliance by applying visual clarity recommendations to your CSS. This ensures forms, navigation, and content meet required contrast ratios for accessible user interfaces.

Can I apply these accessibility patterns to existing HTML and CSS codebases?▼

Yes, you can apply these WCAG 2.2 AA accessibility patterns to existing HTML and CSS codebases. They are designed to integrate into development workflows across components, forms, tables, and all user-facing elements.

Related Skills

Explore More Software Engineering Skills→
RB-chrismandichRB-chrismandich
1

a11y-audit

Audit web projects for WCAG 2.2 AA accessibility issues with ARIA and semantic HTML checks.

Community
Advanced
7a336e6e7a336e6e
1

ensuring-accessibility

Ensure WCAG 2.2 AA compliance for UI components and web pages.

Community
Intermediate
fellipeutakafellipeutaka
33

accessibility-a11y

Guides developers in implementing WCAG-compliant web accessibility standards including semantic HTML, ARIA roles, and color contrast optimization.

Community
Advanced
veerababumanyamveerababumanyam

accessibility

Validate UI components against WCAG 2.1 AA accessibility standards.

Community
Basic