skills.rest
cosmicstack-labs
cosmicstack-labsOFFICIAL
Explore all skills by this author →
Website𝕏@cosmicstackGitHub

accessibility

Guides WCAG 2.1-compliant UI design with semantic HTML, ARIA patterns, and automated/manual testing workflows.

364|53|Updated May 9, 2026
Search Tags:#inclusive design#accessibility#keyboard navigation#color contrast#aria#screen reader testing#wcag 2.1
One-click install
npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill accessibility-cosmicstack-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/cosmicstack-labs/mercury-agent-skills/tree/main/categories/design/accessibility
Command: npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill accessibility-cosmicstack-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams reduce accessibility barriers by guiding inclusive design practices aligned to WCAG 2.1, including semantic structure, ARIA usage, keyboard/screen-reader support, and practical testing.

Core Features & Use Cases

  • WCAG-aligned POUR checklist: Maps accessibility work to Perceivable, Operable, Understandable, and Robust principles so you can evaluate real UI failures (e.g., missing alt text, weak focus states, unclear labels).
  • Inclusive design playbook: Covers color contrast targets, keyboard navigation rules, reduced-motion handling, and accessible content patterns that improve usability for all users.
  • Testing methodology: Combines automated checks (axe/Lighthouse/Pa11y) with manual keyboard and screen-reader verification to catch issues tools miss.
  • Real-world application: Use it to audit and upgrade a production UI before launch (e.g., ensuring modal focus management, live-region announcements, and error messaging are correct).

Quick Start

Apply the WCAG 2.1 POUR and conformance guidance to your UI by running automated checks in CI and then manually validating keyboard navigation, contrast, and screen-reader behavior for each key user flow.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make my web UI compliant with WCAG 2.1 accessibility standards?▼

To achieve WCAG 2.1 accessibility compliance, evaluate your UI against the POUR principles using semantic HTML, appropriate ARIA patterns, and specific testing workflows combining automated and manual checks.

What is the best way to test keyboard navigation and screen-reader support?▼

The best way to test keyboard navigation and screen-reader support combines automated checks using tools like axe or Lighthouse with manual keyboard verification across key user flows to catch issues automated tools miss.

How do I implement accessible modal focus management and error handling?▼

Implement accessible modal focus management and error handling by applying correct ARIA patterns, ensuring proper focus states, avoiding focus removal, and using live regions to announce dynamic updates.

When should I use ARIA roles in semantic HTML to avoid accessibility issues?▼

You should use ARIA roles only when semantic HTML is insufficient, avoiding ARIA overuse as a safety guardrail to prevent accessibility issues while ensuring screen-reader compatibility and dynamic update announcements.

Does this inclusive design approach cover color contrast and reduced-motion handling?▼

Yes, this inclusive design approach covers color contrast targets, keyboard navigation rules, reduced-motion handling, and accessible content patterns to improve web usability for all users.

Related Skills

Explore More Design & Creative Skills→
dragoscirjandragoscirjan

lang-html

Enforce semantic HTML, WCAG 2.1 AA accessibility, and keyboard navigability.

Community
Basic
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
rattamnoonrattamnoon

wcag-audit-patterns

Identify and remediate WCAG 2.2 accessibility violations on web content.

Community
Advanced