frontend-accessibility
Build accessible user interfaces using semantic HTML, proper ARIA attributes, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Use this skill when creating or modifying UI components, forms, navigation elements, modals, or any interactive frontend elements. Use when working with React components, Vue components, Angular templates, or vanilla HTML/JSX files (.tsx, .jsx, .vue, .html). Use when implementing keyboard navigation, focus management, form labels and inputs, image alt text, heading hierarchies, or ARIA roles and properties. Use when ensuring WCAG compliance, testing with screen readers, or creating accessible dynamic content and single-page applications. Use when adding color contrast requirements or visible focus indicators to interactive elements.
When & Why to Use This Skill
This Claude skill provides comprehensive guidance for building inclusive, WCAG-compliant web interfaces. It automates the implementation of semantic HTML, ARIA attributes, and keyboard navigation, ensuring that frontend components are fully accessible to users with disabilities and compatible with screen readers.
Use Cases
- Refactoring legacy UI components into semantic HTML5 structures to improve both SEO and screen reader navigation.
- Implementing complex ARIA patterns and focus management for interactive elements like modals, dropdowns, and mobile menus.
- Ensuring WCAG 2.1 compliance by auditing color contrast ratios and adding visible focus indicators to interactive elements.
- Optimizing web forms with proper labeling, error identification, and keyboard support to enhance usability for assistive technologies.
| name | Frontend Accessibility |
|---|---|
| description | Build accessible user interfaces using semantic HTML, proper ARIA attributes, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Use this skill when creating or modifying UI components, forms, navigation elements, modals, or any interactive frontend elements. Use when working with React components, Vue components, Angular templates, or vanilla HTML/JSX files (.tsx, .jsx, .vue, .html). Use when implementing keyboard navigation, focus management, form labels and inputs, image alt text, heading hierarchies, or ARIA roles and properties. Use when ensuring WCAG compliance, testing with screen readers, or creating accessible dynamic content and single-page applications. Use when adding color contrast requirements or visible focus indicators to interactive elements. |
Frontend Accessibility
This Skill provides Claude Code with specific guidance on how to adhere to coding standards for web accessibility (a11y) and WCAG compliance.
When to use this skill
- When creating or modifying UI components and interactive elements
- When working with frontend component files (.tsx, .jsx, .vue, .html, .svelte)
- When implementing semantic HTML structure with proper elements (nav, main, button, header, etc.)
- When adding keyboard navigation and focus management to components
- When creating forms with proper labels, inputs, and error messages
- When adding images and ensuring they have descriptive alt text
- When implementing modals, dialogs, or dynamic content that requires focus management
- When setting up ARIA attributes (aria-label, aria-describedby, role, etc.)
- When ensuring proper color contrast ratios (4.5:1 for text)
- When creating logical heading hierarchies (h1-h6)
- When testing with screen readers or accessibility testing tools
- When building accessible navigation menus and interactive widgets
Instructions
For details, refer to the information provided in this file: frontend accessibility