What accessibility standards does this skill support?

This skill focuses on Web Content Accessibility Guidelines (WCAG) version 2.1, supporting Level A, AA (Standard), and AAA (Highest) requirements.

Does it help with screen reader compatibility?

Absolutely. It generates semantic HTML structures and appropriate ARIA (Accessible Rich Internet Applications) attributes to ensure assistive technologies can correctly interpret dynamic content.

How does it improve keyboard navigation?

It provides standardized patterns for focus management, including skip-to-content links, visible focus indicators, and JavaScript-based focus traps for modals and menus.

Is this skill limited to specific CSS frameworks?

No, the accessibility patterns are framework-agnostic and can be applied to vanilla HTML/CSS, React, Vue, Tailwind CSS, or any other frontend stack.

Can it perform automated accessibility audits?

Yes, the skill provides configurations and scripts for integrating automated testing tools like axe-core and Google Lighthouse into your development pipeline.

Accessibility Design Skill

Name: Accessibility Design Skill
Author: Protagonistss

byProtagonistss

0•

Design Tools

Implements WCAG-compliant web interfaces with advanced keyboard navigation, screen reader optimization, and automated accessibility testing.

The Accessibility Design Skill empowers developers to build inclusive digital products by integrating Web Content Accessibility Guidelines (WCAG 2.1) directly into the development workflow. It provides comprehensive patterns for semantic HTML, ARIA attributes, focus management, and color contrast compliance. Whether you are building complex forms or interactive dashboards, this skill helps identify accessibility gaps through automated audits and manual testing checklists, ensuring your applications are usable by everyone, including those using assistive technologies like screen readers.

Key Features

01Advanced keyboard navigation and focus management patterns

02Automated accessibility testing integration with axe-core and Lighthouse

03Color contrast analysis and high-contrast mode CSS support

040 GitHub stars

05Screen reader optimization using semantic HTML and ARIA roles

06WCAG 2.1 AA/AAA compliance auditing and implementation

Use Cases

01Implementing accessible focus traps and keyboard navigation for complex UI components like modals

02Auditing an existing website for WCAG 2.1 compliance violations and fixing them

03Optimizing dynamic web forms for screen reader users using live regions and ARIA attributes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add protagonistss/claude-plugins accessibility

For use in Claude.ai and ChatGPT

Download Skill