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
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
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.
