frontend-accessibility
Build accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, screen reader support, and proper color contrast. Use this skill when creating or modifying UI components, implementing form inputs, adding interactive elements, working with navigation menus, creating modals or dialogs, or handling focus management. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend code that users interact with. This skill ensures semantic HTML elements (nav, main, button, etc.) that convey meaning to assistive technologies, keyboard navigation with visible focus indicators (focus:ring-2 focus:ring-offset-2 in Tailwind), sufficient color contrast ratios (4.5:1 for normal text), descriptive alt text for images and meaningful labels for form inputs, screen reader testing and verification, ARIA attributes for complex components when semantic HTML isn't sufficient, logical heading structure (h1-h6 in proper order), and proper focus management in dyna
When & Why to Use This Skill
This Claude skill empowers developers to build inclusive and WCAG-compliant user interfaces by automating the implementation of semantic HTML, keyboard navigation, and screen reader support. It ensures that React and Shadcn/ui components meet high accessibility standards, including proper color contrast and focus management, directly within the development workflow to improve both user experience and SEO.
Use Cases
- Developing accessible React components (*.tsx, *.jsx) using semantic HTML elements like <nav>, <main>, and <button> to improve assistive technology compatibility.
- Implementing keyboard-friendly navigation menus and interactive modals with visible focus indicators and proper focus trapping using Tailwind CSS utility classes.
- Enhancing form accessibility by adding meaningful labels, descriptive alt text for images, and ARIA attributes for complex UI widgets where standard HTML is insufficient.
- Ensuring visual accessibility by verifying color contrast ratios (4.5:1) and managing dynamic content updates in Single Page Applications (SPAs) for screen reader users.
- Auditing and refactoring existing frontend code to meet modern accessibility standards and logical heading structures (h1-h6).
| name | Frontend Accessibility |
|---|---|
| description | Build accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, screen reader support, and proper color contrast. Use this skill when creating or modifying UI components, implementing form inputs, adding interactive elements, working with navigation menus, creating modals or dialogs, or handling focus management. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend code that users interact with. This skill ensures semantic HTML elements (nav, main, button, etc.) that convey meaning to assistive technologies, keyboard navigation with visible focus indicators (focus:ring-2 focus:ring-offset-2 in Tailwind), sufficient color contrast ratios (4.5:1 for normal text), descriptive alt text for images and meaningful labels for form inputs, screen reader testing and verification, ARIA attributes for complex components when semantic HTML isn't sufficient, logical heading structure (h1-h6 in proper order), and proper focus management in dynamic content, modals, and SPAs. |
Frontend Accessibility
When to use this skill:
- When creating new UI components or interactive elements
- When implementing form inputs, buttons, or controls
- When building navigation menus, headers, or footers
- When creating modals, dialogs, or overlays with Shadcn/ui
- When implementing custom interactive widgets
- When adding images, icons, or media content
- When working with color schemes and visual design
- When managing focus states in single-page applications
- When implementing keyboard shortcuts or hotkeys
- When testing components with screen readers
- When working on component files (.tsx, .jsx, components/.)
- When reviewing designs for accessibility compliance
- When adding visible focus indicators using Tailwind classes
- When implementing screen-reader-only content with srOnly utility class
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