By name: Frontend Accessibility description: Build accessible user interfaces using semantic HTML, ARIA attributes, keyboard navigation, and proper color contrast. Use this skill when creating or modifying UI components, implementing forms and interactive elements, working with navigation menus, building modals and dialogs, adding images and media content, writing JSX/HTML markup, ensuring keyboard accessibility, testing with screen readers, managing focus states, implementing proper heading hierarchies, providing alternative text for images, maintaining color contrast ratios, using ARIA labels and roles, or ensuring all interactive elements are keyboard-navigable. Apply this skill when building frontend components, reviewing UI accessibility, refactoring markup for better semantics, or implementing WCAG compliance requirements.
Frontend Accessibility
When to use this skill
- When creating or modifying any UI component files (e.g.,
.tsx,.jsx,.vue,.sveltefiles) - When writing HTML or JSX markup for user interfaces
- When implementing forms with input fields, labels, and validation messages
- When building navigation menus, buttons, links, and interactive elements
- When creating modals, dialogs, tooltips, and overlay components
- When adding images, icons, or media content that needs alternative text
- When implementing keyboard navigation and focus management
- When using or adding ARIA attributes (aria-label, aria-describedby, role, etc.)
- When ensuring proper heading hierarchy (h1-h6) in page layouts
- When choosing colors and ensuring sufficient contrast ratios
- When testing components with screen readers
- When managing focus states for dynamic content and SPAs
- When reviewing components for WCAG compliance and accessibility standards
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