Does it verify color contrast automatically?

Yes, you can provide color values or CSS snippets, and the skill will calculate if the contrast ratio meets the WCAG AA or AAA requirements for readability.

Can it help me build accessible complex components like modals?

Absolutely. It can generate the necessary logic for 'Focus Traps,' ensuring that keyboard focus remains within the modal while it is active, which is a key requirement for accessibility.

Can it handle modern frontend frameworks like React or Vue?

Yes, the skill is framework-agnostic and can provide accessibility fixes for standard HTML5, JSX, and other template languages used in modern web development.

What specifically does it check for in a 'Quick Audit'?

A quick audit focuses on semantic tags (nav, main, aside), ARIA property usage, keyboard navigation (tabindex), and the presence of descriptive alt text for images.

How does this skill help with WCAG compliance?

It analyzes your code for common violations such as missing alt text, poor contrast, and improper semantic structure, and then provides specific code repairs to meet WCAG standards.

Accessibility Design Guard

Name: Accessibility Design Guard
Author: Protagonistss

byProtagonistss

Design Tools

Audits and repairs web interfaces to ensure compliance with WCAG accessibility standards and inclusive design best practices.

About

Accessibility Design Guard is a specialized Claude Code skill designed to bridge the gap between standard web development and inclusive user experiences. It empowers developers to perform deep audits of their codebase to identify WCAG violations, optimize semantic HTML, and implement complex ARIA patterns. From verifying color contrast ratios to engineering robust focus management for interactive components like modals, this skill provides actionable code fixes and expert guidance. It is an essential tool for teams aiming to meet legal compliance standards and ensure their digital products are usable by everyone, including those relying on screen readers or keyboard-only navigation.

Key Features

Intelligent ARIA attribute implementation and semantic HTML refactoring
Automated color contrast checking against AA and AAA standards
0 GitHub stars
Alt text generation and form label association repairs
Keyboard accessibility optimization including focus traps and skip links
Comprehensive WCAG compliance auditing for HTML and framework-specific components

Use Cases

Refactoring a custom JavaScript modal to include a focus trap and escape-key closing functionality
Conducting a full accessibility audit on an existing web dashboard to identify and fix missing labels and roles
Verifying that a new design system's color palette meets visibility requirements for users with visual impairments

About

Key Features

Intelligent ARIA attribute implementation and semantic HTML refactoring
Automated color contrast checking against AA and AAA standards
0 GitHub stars
Alt text generation and form label association repairs
Keyboard accessibility optimization including focus traps and skip links
Comprehensive WCAG compliance auditing for HTML and framework-specific components

Use Cases

Refactoring a custom JavaScript modal to include a focus trap and escape-key closing functionality
Conducting a full accessibility audit on an existing web dashboard to identify and fix missing labels and roles
Verifying that a new design system's color palette meets visibility requirements for users with visual impairments