When should I use frontend-accessibility?

frontend-accessibility is useful in the following scenarios: • Implementing keyboard-accessible navigation menus and interactive UI components with proper focus management. • Enhancing web elements with semantic HTML5 tags and ARIA labels to optimize screen reader compatibility. • Ensuring form accessibility through proper label associations, validation messaging, and error handling. • Auditing and adjusting color contrast ratios and heading hierarchies to meet accessibility compliance standards.

frontend-accessibility

from coreyja

Build accessible user interfaces with semantic HTML, proper ARIA attributes, keyboard navigation, and screen reader compatibility. Use this skill when creating or modifying HTML markup, UI components, forms, or interactive elements. When implementing keyboard navigation, focus management, or tab order. When adding alternative text for images or labels for form inputs. When ensuring sufficient color contrast ratios. When working with navigation menus, modals, buttons, or dynamic content. When structuring pages with proper heading hierarchy (h1-h6). When testing UI changes for screen reader compatibility.

⭐6stars🔀1forks📁View on GitHub🕐Updated Nov 19, 2025

When & Why to Use This Skill

This Claude skill provides comprehensive guidance for building inclusive and WCAG-compliant user interfaces. It ensures the implementation of semantic HTML, proper ARIA attributes, and robust keyboard navigation to enhance web accessibility and compatibility with assistive technologies like screen readers.

Use Cases

Implementing keyboard-accessible navigation menus and interactive UI components with proper focus management.
Enhancing web elements with semantic HTML5 tags and ARIA labels to optimize screen reader compatibility.
Ensuring form accessibility through proper label associations, validation messaging, and error handling.
Auditing and adjusting color contrast ratios and heading hierarchies to meet accessibility compliance standards.

name	Frontend Accessibility
description	Build accessible user interfaces with semantic HTML, proper ARIA attributes, keyboard navigation, and screen reader compatibility. Use this skill when creating or modifying HTML markup, UI components, forms, or interactive elements. When implementing keyboard navigation, focus management, or tab order. When adding alternative text for images or labels for form inputs. When ensuring sufficient color contrast ratios. When working with navigation menus, modals, buttons, or dynamic content. When structuring pages with proper heading hierarchy (h1-h6). When testing UI changes for screen reader compatibility.

name

Frontend Accessibility

description

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.

When to use this skill

When creating or modifying HTML markup for pages or components
When implementing interactive elements like buttons, links, forms, or navigation menus
When adding keyboard navigation support to UI components
When managing focus states in modals, dropdowns, or single-page applications
When adding alternative text to images or ARIA labels to elements
When ensuring color contrast ratios meet WCAG standards
When structuring pages with proper semantic HTML (nav, main, header, footer, article)
When implementing proper heading hierarchy (h1, h2, h3, etc.)
When testing UI changes with screen readers (VoiceOver, NVDA, JAWS)
When working with form inputs, labels, and validation messages

Instructions

For details, refer to the information provided in this file: frontend accessibility