---

name: Frontend Accessibility description: Build accessible user interfaces that work for all users including those using assistive technologies. Use this skill when creating or modifying UI components, forms, or interactive elements. Use this skill when implementing keyboard navigation, focus management, or tab order. Use this skill when adding ARIA attributes, roles, or labels to components. Use this skill when ensuring sufficient color contrast and visual accessibility. Use this skill when providing alternative text for images or meaningful labels for form inputs. Use this skill when working with modals, dialogs, or dynamic content. Use this skill when structuring headings and semantic HTML elements. Use this skill when testing components for screen reader compatibility.

Frontend Accessibility

When to use this skill

• When creating or modifying UI components, forms, or interactive elements
• When implementing keyboard navigation and visible focus indicators
• When adding semantic HTML elements (nav, main, article, button, etc.)
• When ensuring color contrast ratios meet WCAG standards
• When providing alt text for images and labels for form inputs
• When adding ARIA attributes to enhance complex components
• When structuring heading hierarchies (h1-h6) in logical order
• When managing focus in modals, dialogs, or single-page applications
• When working with dynamic content that needs screen reader announcements
• When testing UI components with screen readers or accessibility tools

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