Frontend Accessibility

This Skill provides Claude Code with specific guidance on how to adhere to coding standards for web accessibility (a11y) and WCAG compliance.

When to use this skill

• When creating or modifying UI components and interactive elements
• When working with frontend component files (.tsx, .jsx, .vue, .html, .svelte)
• When implementing semantic HTML structure with proper elements (nav, main, button, header, etc.)
• When adding keyboard navigation and focus management to components
• When creating forms with proper labels, inputs, and error messages
• When adding images and ensuring they have descriptive alt text
• When implementing modals, dialogs, or dynamic content that requires focus management
• When setting up ARIA attributes (aria-label, aria-describedby, role, etc.)
• When ensuring proper color contrast ratios (4.5:1 for text)
• When creating logical heading hierarchies (h1-h6)
• When testing with screen readers or accessibility testing tools
• When building accessible navigation menus and interactive widgets