majiayu000 Frontend Accessibility
When to use this skill
- When creating UI components in files like
components/,Button.tsx,Form.jsx, or any React/Vue/Angular component - When building forms with input fields, labels, error messages, and validation feedback
- When implementing keyboard navigation for interactive elements (tabs, modals, dropdowns, menus)
- When adding semantic HTML elements like
<nav>,<main>,<button>,<header>,<footer>,<article> - When ensuring proper color contrast ratios (4.5:1 minimum) and not relying solely on color to convey information
- When adding alternative text for images using
altattributes or ARIA labels for icon buttons - When implementing focus indicators and managing focus for modals, dialogs, or single-page app navigation
- When using ARIA attributes (
role,aria-label,aria-describedby,aria-live) for complex components - When creating proper heading hierarchies (h1-h6) that screen readers can navigate through
- When testing components with screen readers (NVDA, JAWS, VoiceOver) to verify accessibility
- When building custom interactive widgets that need ARIA roles and keyboard event handlers
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