Can it help with complex focus management?

Absolutely. It handles focus traps for modals, ensures logical tab orders follow visual flow, and verifies that all interactive elements are focusable via keyboard.

Why does it prioritize semantic HTML over ARIA?

Semantic HTML provides built-in accessibility, better SEO, and better performance; ARIA is used as a fallback only when native elements cannot fulfill the required functional role.

Is it compatible with modern JavaScript frameworks?

Yes, it is fully compatible with React (JSX/TSX), Vue templates, Svelte components, and vanilla HTML/JS projects.

How does the Accessibility skill trigger in Claude?

It activates automatically when you work with UI-related files like HTML, JSX, TSX, Vue, or Svelte, or when creating interactive components like modals, forms, and menus.

Does it support international accessibility standards?

Yes, it is specifically designed to cover WCAG AA requirements, including color contrast ratios, touch targets, and robust keyboard navigation.

UI Accessibility Guardrail

Name: UI Accessibility Guardrail
Author: vendeesign

byvendeesign

0•

Design Tools

Enforces WCAG AA standards by ensuring semantic HTML, keyboard accessibility, and proper ARIA implementation in frontend UI components.

This skill acts as a proactive accessibility auditor for Claude, automatically activating whenever UI code such as HTML, JSX, Vue, or Svelte templates are written or modified. It ensures that components meet WCAG AA requirements by prioritizing semantic HTML over ARIA, managing focus for complex interactions like modals and menus, validating color contrasts, and ensuring all interactive elements are accessible via keyboard. It is an essential tool for developers building inclusive web applications who want to catch accessibility issues during the coding phase rather than during post-deployment audits.

Key Features

01Keyboard navigation management including focus traps and logical tab orders

02WCAG AA contrast ratio and touch target size validation

03Proactive detection of missing alt text, labels, and aria-describedby attributes

04Automated semantic HTML verification to replace generic div/span structures

05Contextual ARIA implementation guidance for complex custom components

060 GitHub stars

Use Cases

01Refactoring legacy frontend code to meet modern WCAG 2.1 accessibility standards

02Implementing complex interactive patterns like accessible modals, tabs, and dropdowns

03Building accessible design systems with reusable, compliant UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vendeesign/codebloom accessibility

For use in Claude.ai and ChatGPT

Download Skill