By name: Frontend Accessibility description: Build accessible user interfaces that work for all users including those using assistive technologies. Use this skill when creating UI components, forms, modals, navigation, or any interactive elements. Apply when working on files like *.tsx, *.jsx, *.vue, *.html, or any frontend component files. Essential for implementing semantic HTML elements (nav, main, button, article), keyboard navigation with visible focus indicators, proper color contrast ratios (4.5:1 for text), alt text for images, ARIA labels and attributes, logical heading hierarchy (h1-h6), and focus management in dynamic content and SPAs.
When to use this skill:
- When creating or editing React/Vue/Angular component files (*.tsx, *.jsx, *.vue)
- When adding interactive elements like buttons, links, forms, or modals
- When implementing navigation menus or tab interfaces
- When adding images that need alt text descriptions
- When working with color choices that affect readability
- When implementing keyboard-navigable interfaces
- When adding ARIA attributes for complex components
- When building dynamic content that requires focus management
- When creating form inputs with proper labels
- When organizing content with headings and landmarks
- When testing UI with screen readers
Frontend Accessibility
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility.
Instructions
For details, refer to the information provided in this file: frontend accessibility