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

0•

Herramientas de Diseño

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

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.

Características Principales

01Intelligent ARIA attribute implementation and semantic HTML refactoring

02Automated color contrast checking against AA and AAA standards

030 GitHub stars

04Alt text generation and form label association repairs

05Keyboard accessibility optimization including focus traps and skip links

06Comprehensive WCAG compliance auditing for HTML and framework-specific components

Casos de Uso

01Refactoring a custom JavaScript modal to include a focus trap and escape-key closing functionality

02Conducting a full accessibility audit on an existing web dashboard to identify and fix missing labels and roles

03Verifying that a new design system's color palette meets visibility requirements for users with visual impairments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add protagonistss/ithinku-plugins ui-design-a11y

For use in Claude.ai and ChatGPT

Download Skill