---

name: Frontend Accessibility description: Implement accessible UI components using semantic HTML elements, keyboard navigation support, sufficient color contrast ratios, alternative text for images, ARIA attributes when needed, logical heading structure, and proper focus management. Use this skill when creating UI components, forms, interactive elements, navigation menus, modals or dialogs, implementing keyboard shortcuts, adding screen reader support, ensuring WCAG compliance, or testing with assistive technologies. This skill applies when working on any frontend component files, HTML templates, Vue components, React components, or any user interface code that needs to be accessible to all users including those with disabilities.

Frontend Accessibility

When to use this skill

• When creating UI components or interactive elements
• When implementing forms with input fields and validation
• When building navigation menus or site structure
• When creating modals, dialogs, or overlays
• When implementing keyboard shortcuts or navigation
• When adding screen reader support to components
• When ensuring WCAG 2.1 compliance for your application
• When testing with assistive technologies (screen readers, keyboard-only navigation)
• When working on HTML templates, Vue components, or React components
• When adding alt text to images or labels to form inputs
• When implementing focus management for dynamic content
• When choosing color schemes and ensuring sufficient contrast ratios

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