---

name: Frontend Accessibility description: Build accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, proper ARIA attributes, and screen reader support. Use this skill when creating or modifying UI components, implementing interactive elements (buttons, forms, modals, menus), adding keyboard navigation support, implementing focus management, adding ARIA attributes or roles, ensuring color contrast compliance, writing alt text for images, creating form labels and error messages, implementing heading structures, building custom interactive widgets, testing for screen reader compatibility, or working with any HTML, JSX, or template files that render user-facing content. Use when working with React components, Vue templates, Angular templates, HTML files, or any frontend framework components.

When to use this skill

• When creating or modifying UI components
• When implementing interactive elements (buttons, forms, modals, dropdowns, menus)
• When adding keyboard navigation support
• When implementing focus management for dynamic content
• When adding ARIA attributes, roles, or properties
• When ensuring color contrast compliance
• When writing alt text for images or icons
• When creating form labels, placeholders, and error messages
• When implementing heading structures (h1-h6)
• When building custom interactive widgets or controls
• When testing for screen reader compatibility
• When implementing skip links or landmark regions
• When working with HTML, JSX, Vue templates, Angular templates, or any UI component files
• When working with React, Vue, Angular, Svelte, or any frontend framework

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