accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

14|2|Updated Nov 7, 2025
One-click install
npx skills add https://github.com/kennedym-ds/copilot_orchestrator --skill accessibility-wcag-kennedym-ds
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-wcag
Source: https://github.com/kennedym-ds/copilot_orchestrator/tree/main/.github/skills/accessibility-wcag
Command: npx skills add https://github.com/kennedym-ds/copilot_orchestrator --skill accessibility-wcag-kennedym-ds

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accessibility gaps in modern web applications hinder users with disabilities. This guide provides practical patterns and checklists to help developers and designers achieve WCAG 2.1 AA compliance, reducing gaps across components and pages.

Core Features & Use Cases

  • ARIA attributes and roles guidance to improve semantic markup and assistive technology compatibility.
  • Keyboard navigation patterns and focus management for interactive widgets and dynamic content.
  • Color contrast and readable content checks to support visual accessibility across themes and devices.
  • Accessibility audits and POUR principle validation across components, pages, and UI states.

Quick Start

Audit a sample UI component for semantic HTML, ARIA labeling, and keyboard navigation, and implement fixes to meet WCAG 2.1 AA criteria.

Frequently Asked Questions about accessibility-wcag

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

FAQPage Schema
How do I make my web components meet WCAG 2.1 AA accessibility standards?

To meet WCAG 2.1 AA accessibility standards, evaluate frontend components for semantic HTML structure, correct ARIA roles and labels, sufficient color contrast ratios, and robust keyboard navigation compliance.

What is the best way to implement ARIA attributes for screen reader compatibility?

Implement ARIA attributes by applying correct roles and labels to improve semantic markup, ensuring interactive widgets and dynamic content are fully compatible with assistive technologies like screen readers.

How do I add keyboard navigation to interactive web widgets for accessibility?

Add keyboard navigation by implementing focus management patterns tailored for interactive widgets and dynamic content, ensuring users can navigate web applications without a mouse for WCAG compliance.

How do I check color contrast for visual accessibility across different themes?

Check color contrast by validating that foreground and background color ratios meet WCAG requirements, ensuring readable content and visual accessibility across various UI themes and devices.

When should I validate web app accessibility using the POUR principle?

Validate web app accessibility using the POUR principle during component and page audits to ensure interfaces are Perceivable, Operable, Understandable, and Robust across all UI states.

Does semantic HTML alone fix keyboard navigation issues in web apps?

Semantic HTML provides foundational structure for accessibility, but fixing keyboard navigation also requires explicit focus management and ARIA attributes for dynamic content and interactive widgets.