skills.rest
ryasrk
ryasrkCOMMUNITY
Explore all skills by this author →
GitHub

accessibility-patterns

Implement WCAG 2.1 AA accessibility patterns with ARIA roles and semantic HTML.

Updated Mar 12, 2026
Search Tags:#accessibility#a11y#web development#wcag#ux#aria
One-click install
npx skills add https://github.com/ryasrk/AgentBrokeTheMatrix-CopilotVersion --skill accessibility-patterns-ryasrk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-patterns
Source: https://github.com/ryasrk/AgentBrokeTheMatrix-CopilotVersion/tree/main/.github/skills/accessibility-patterns
Command: npx skills add https://github.com/ryasrk/AgentBrokeTheMatrix-CopilotVersion --skill accessibility-patterns-ryasrk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidance and code examples to ensure web applications are usable by everyone, regardless of ability, by adhering to accessibility standards.

Core Features & Use Cases

  • WCAG Compliance: Implements patterns for WCAG 2.1 AA compliance.
  • ARIA & Semantic HTML: Demonstrates correct usage of ARIA roles and semantic HTML elements.
  • Keyboard Navigation & Focus Management: Offers solutions for keyboard operability and focus control.
  • Use Case: When developing a new modal dialog, use this Skill to ensure it's properly announced by screen readers, navigable by keyboard, and traps focus within its boundaries.

Quick Start

Apply the accessible modal pattern to the provided React component.

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 modal dialog accessible with keyboard navigation and screen reader support?▼

To make an accessible modal dialog, use semantic HTML, correct ARIA roles, and focus management to trap keyboard navigation within boundaries and ensure screen reader support. This ensures keyboard operability and proper screen reader announcements.

What is the best way to implement WCAG 2.1 AA compliance for web interfaces?▼

The best way to implement WCAG 2.1 AA compliance is by following established web accessibility patterns using semantic HTML and ARIA roles. This approach guarantees inclusive web interfaces that meet accessibility standards for all users.

When do I need ARIA roles versus semantic HTML for web accessibility?▼

You need ARIA roles when semantic HTML elements cannot convey the required accessibility information, but semantic HTML is preferred for web accessibility. Correct usage of ARIA roles and semantic HTML elements ensures proper screen reader support.

How does focus management work for keyboard operability in dynamic web applications?▼

Focus management controls keyboard operability by explicitly moving focus within dynamic web applications using ARIA roles and semantic HTML. This ensures keyboard navigation remains logical and accessible for screen reader support.

Are there common accessibility anti-patterns I should avoid during a11y testing?▼

Yes, common accessibility anti-patterns include incorrect ARIA roles, missing keyboard navigation, and broken focus management. Reviewing a11y testing strategies and code examples helps identify and avoid these patterns for WCAG 2.1 AA compliance.

Can I use these accessibility patterns with React components?▼

Yes, you can apply accessible web patterns with React components by implementing semantic HTML and ARIA roles. Applying the accessible modal pattern to a provided React component ensures proper screen reader support and keyboard navigation.

Related Skills

Explore More Design & Creative Skills→
vladolaruvladolaru
6

accessible-frontend-dev

Implement ARIA, keyboard, and focus management patterns for React and HTML components.

Community
Advanced
zinohomezinohome
1

accessibility-auditor

Audit web pages for WCAG 2.1 compliance and implement accessibility fixes.

Community
Advanced
aagii9912aagii9912

developing-ui

Enforce brand tokens, accessibility, and component patterns in UI development.

Community
Basic
eventua11yeventua11y
1

fixing-accessibility-issues

Automates remediation of accessibility defects in UI code from linting tools.

Official
Advanced