Does it support React and Tailwind CSS?

Yes, the skill includes specific implementation examples using React hooks and Tailwind CSS utility classes for focus states and visibility.

Can it help with focus management in single-page apps?

Absolutely. It includes patterns for focus traps in modals, skip-links for navigation, and managing focus during route changes or dynamic content updates.

How does this skill help with WCAG compliance?

It provides standardized code patterns for semantic HTML, ARIA roles, and keyboard interactions that align with Web Content Accessibility Guidelines (WCAG).

When does Claude activate these accessibility patterns?

Claude pro-actively activates this skill when it detects tasks involving UI development or when keywords like 'accessibility', 'a11y', or 'aria' are used.

Web Accessibility Patterns

Name: Web Accessibility Patterns
Author: Agentient

byAgentient

Design Tools

Implements WCAG-compliant web accessibility standards using semantic HTML, ARIA attributes, and robust keyboard navigation logic.

About

The Web Accessibility Patterns skill equips Claude with the expertise to build inclusive and compliant web interfaces. It provides specialized guidance on choosing correct semantic HTML elements over generic containers, implementing ARIA labels for icon-only buttons and dynamic content, and managing complex focus states for modals and dropdowns. By integrating these patterns, developers can ensure their applications are accessible to users of screen readers and assistive technologies while maintaining high standards for keyboard-only navigation and visual focus management.

Key Features

Semantic HTML structure for improved document hierarchy and SEO
ARIA attribute patterns for dynamic states, loading indicators, and icons
Keyboard navigation support for custom interactive components
Comprehensive focus management including focus traps for modals
0 GitHub stars
Screen reader specific utility patterns and skip-link implementations

Use Cases

Building complex UI components like modals and accordions with full keyboard support
Refactoring legacy 'div-heavy' code into accessible, semantic HTML5
Ensuring icon-only interfaces are fully descriptive for screen reader users

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit web-accessibility-patterns

For use in Claude.ai and ChatGPT

Download Skill

GitHub