AgentSkillsCN

Frontend Accessibility

按照WCAG 2.2标准构建无障碍用户界面，使用恰当语义HTML、ARIA属性、键盘导航与屏幕阅读器支持。当创建或修改UI组件、表单、交互元素、导航菜单、模态框，或任何用户交互的前端代码时，使用此技能。在实现键盘导航、焦点管理、颜色对比度要求、图片替代文本、表单标签、ARIA角色与地标，或确保组件与屏幕阅读器等辅助技术兼容时，应用此技能。此技能在使用React、Vue或其他框架组件、HTML模板、JSX文件，或任何UI实现时必不可少，确保包容性设计服务于视障、听障、运动障碍或认知障碍用户，并符合法律合规标准（ADA、WCAG 2.2 AA级）。

SKILL.md
--- frontmatter
name: Frontend Accessibility
description: Build accessible user interfaces following WCAG 2.2 standards with proper semantic HTML, ARIA attributes, keyboard navigation, and screen reader support. Use this skill when creating or modifying UI components, forms, interactive elements, navigation menus, modals, or any frontend code that users interact with. Apply this skill when implementing keyboard navigation, focus management, color contrast requirements, alternative text for images, form labels, ARIA roles and landmarks, or when ensuring components work with assistive technologies like screen readers. This skill is essential when working with React, Vue, or other framework components, HTML templates, JSX files, or any UI implementation to ensure inclusive design that serves users with visual, auditory, motor, or cognitive disabilities and meets legal compliance standards (ADA, WCAG 2.2 Level AA).

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 UI components, forms, buttons, or interactive elements
  • •When implementing keyboard navigation and focus management in SPAs or modals
  • •When adding semantic HTML elements (nav, main, article, section, button, etc.)
  • •When implementing ARIA roles, landmarks, labels, and live regions
  • •When ensuring proper color contrast ratios (4.5:1 for normal text, 3:1 for large text)
  • •When adding alternative text (alt attributes) for images and meaningful labels for form inputs
  • •When creating navigation menus, dropdowns, accordions, tabs, or complex widgets
  • •When implementing screen reader-only content or visually hidden elements
  • •When managing focus in dynamic content updates, modals, or route changes
  • •When testing components with keyboard-only navigation (Tab, Enter, Space, Arrow keys)
  • •When implementing proper heading hierarchy (h1-h6) for document structure
  • •When working with form validation and accessible error messages
  • •When ensuring touch targets meet minimum size requirements (44x44px) for mobile accessibility

Instructions

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