skills.rest
bipinks
bipinksCOMMUNITY
Explore all skills by this author →
GitHub

accessibility-patterns

Apply WCAG 2.1 AA/AAA patterns to improve UI accessibility.

3|Updated Mar 5, 2026
Search Tags:#accessibility#a11y#wcag#aria#keyboard-navigation#focus-management
One-click install
npx skills add https://github.com/bipinks/ghost-office --skill accessibility-patterns-bipinks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-patterns
Source: https://github.com/bipinks/ghost-office/tree/main/.claude/skills/accessibility-patterns
Command: npx skills add https://github.com/bipinks/ghost-office --skill accessibility-patterns-bipinks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The lack of accessible UI patterns leads to poor usability and compliance gaps across products. This skill provides guidance on implementing and auditing accessibility patterns to meet WCAG 2.1 AA/AAA requirements.

Core Features & Use Cases

  • WCAG-compliant UI patterns covering semantic HTML, ARIA roles, keyboard navigation, color contrast, focus management, and screen reader support.
  • Use cases include auditing existing components, designing accessible components from scratch, and validating accessibility with automated tests and manual checks.

Quick Start

Analyze a UI component set for accessibility gaps and propose concrete fixes to reach WCAG 2.1 AA/AAA compliance.

Frequently Asked Questions about accessibility-patterns

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

FAQPage Schema
How do I make my web components WCAG compliant with proper ARIA roles and keyboard navigation?▼

To make UI components WCAG compliant, apply semantic HTML, correct ARIA roles, and full keyboard operability. This skill audits existing code and proposes concrete fixes to meet WCAG 2.1 AA/AAA standards for screen reader support.

What is the best way to audit existing UI components for accessibility gaps?▼

The best way to audit existing components for accessibility gaps is by validating semantic HTML, ARIA usage, and color contrast against WCAG 2.1 AA/AAA patterns. This skill analyzes your component set and proposes concrete fixes for compliance.

How does focus management work for screen reader compatibility in web applications?▼

Focus management works by ensuring logical keyboard navigation and interactive element focus order for screen reader compatibility. This skill enforces ARIA guidance and focus patterns to maintain operability throughout dynamic web application components.

Can I use this skill to design accessible components from scratch rather than just auditing?▼

Yes, you can use this skill to design accessible components from scratch. It provides WCAG-aligned UI patterns covering semantic HTML, ARIA roles, and keyboard navigation to build compliant frontend components from the start.

Why does my keyboard navigation fail WCAG color contrast and focus management checks?▼

Keyboard navigation fails WCAG checks when interactive elements lack visible focus states and sufficient color contrast ratios. This skill enforces focus management and color-contrast compliance to ensure UI components meet WCAG 2.1 AA/AAA operability requirements.

Related Skills

Explore More Software Engineering Skills→
xinge-jixinge-ji

web-design-guidelines

Compare frontend HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate
NITRR-OfficialNITRR-Official
4

Accessibility Auditor

Evaluate website accessibility against WCAG 2.1 AA/AAA standards and ARIA implementation.

Official
Advanced
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
sanky369sanky369
29

accessibility-excellence

Audit web applications for WCAG compliance and accessibility gaps.

Community
Basic