skills.rest
AbsolutelySkilled
AbsolutelySkilledOFFICIAL
Explore all skills by this author →
GitHub

accessibility-wcag

Implement WCAG 2.2 and ARIA best practices for accessible web components.

207|31|Updated Mar 14, 2026
Search Tags:#accessibility#a11y#wcag#keyboard#screen-reader#aria
One-click install
npx skills add https://github.com/AbsolutelySkilled/AbsolutelySkilled --skill accessibility-wcag-absolutelyskilled
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-wcag
Source: https://github.com/AbsolutelySkilled/AbsolutelySkilled/tree/main/skills/accessibility-wcag
Command: npx skills add https://github.com/AbsolutelySkilled/AbsolutelySkilled --skill accessibility-wcag-absolutelyskilled

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Accessibility and WCAG conformance are critical to building inclusive web experiences; this skill provides structured guidance, actionable rules, and examples to implement ARIA, keyboard interactions, color contrast, and focus management.

Core Features & Use Cases

  • Provides a concise set of WCAG-aligned patterns (ARIA roles, states, properties) for common widgets.
  • Includes practical examples and references to APG patterns to aid accessibility auditing and development.
  • Suitable for design reviews, frontend development, and QA validation to ensure accessible interfaces.

Quick Start

Audit a sample page by adding appropriate ARIA attributes and keyboard interactions to demonstrate compliant components.

Frequently Asked Questions about accessibility-wcag

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

FAQPage Schema
How do I implement WCAG 2.2 conformance for web components?▼

You audit web components for accessibility by applying WCAG and ARIA best practices. This process involves evaluating ARIA roles and states, validating keyboard interactions, and checking color contrast to ensure inclusive interfaces.

How do I add ARIA attributes and keyboard interactions to web components?▼

To add ARIA attributes and keyboard interactions, apply WCAG-aligned patterns for common widgets. This enforces proper focus management and screen-reader compatibility using APG examples as structural references.

What ARIA roles and states do I need for screen-reader compatibility?▼

Screen-reader compatibility requires applying correct ARIA roles, states, and properties to UI elements. Following APG patterns provides the specific attributes needed to convey semantic meaning and interactive states.

Can I use this for accessibility auditing of existing frontend code?▼

Yes, you can use this for accessibility auditing of existing frontend code. It validates interfaces by checking WCAG 2.2 conformance, ARIA implementation, and keyboard navigation within design reviews and QA validation.

Does this cover focus management and color contrast rules?▼

Yes, this covers focus management and color contrast rules. It provides structured guidance to implement these accessibility properties, ensuring UI components remain navigable and readable for all users.

Related Skills

Explore More Design & Creative Skills→
gaiastudio-aigaiastudio-ai
2

gaia-review-a11y

Identify WCAG 2.1 accessibility issues and generate a Markdown findings report.

Official
Advanced
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate