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

0•

Design Tools

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

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

01Semantic HTML structure for improved document hierarchy and SEO

02ARIA attribute patterns for dynamic states, loading indicators, and icons

03Keyboard navigation support for custom interactive components

04Comprehensive focus management including focus traps for modals

050 GitHub stars

06Screen reader specific utility patterns and skip-link implementations

Use Cases

01Building complex UI components like modals and accordions with full keyboard support

02Refactoring legacy 'div-heavy' code into accessible, semantic HTML5

03Ensuring 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

Key Features

01Semantic HTML structure for improved document hierarchy and SEO

02ARIA attribute patterns for dynamic states, loading indicators, and icons

03Keyboard navigation support for custom interactive components

04Comprehensive focus management including focus traps for modals

050 GitHub stars

06Screen reader specific utility patterns and skip-link implementations

Use Cases

01Building complex UI components like modals and accordions with full keyboard support

02Refactoring legacy 'div-heavy' code into accessible, semantic HTML5

03Ensuring 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