AgentSkillsCN

Frontend Accessibility

使用语义化HTML、ARIA属性、键盘导航及恰当的颜色对比度构建无障碍用户界面。在创建或修改UI组件、实现表单和交互元素、处理导航菜单、构建模态框和对话框、添加图片和媒体内容、编写JSX/HTML标记、确保键盘无障碍性、用屏幕阅读器测试、管理焦点状态、实现恰当的标题层级、为图片提供替代文本、保持颜色对比度、使用ARIA标签和角色或确保所有交互元素均可通过键盘导航时，可使用此技能。在构建前端组件、审查UI无障碍性、重构标记以改善语义或实施WCAG合规要求时，可应用此技能。

SKILL.md
--- frontmatter
name: Frontend Accessibility
description: Build accessible user interfaces using semantic HTML, ARIA attributes, keyboard navigation, and proper color contrast. Use this skill when creating or modifying UI components, implementing forms and interactive elements, working with navigation menus, building modals and dialogs, adding images and media content, writing JSX/HTML markup, ensuring keyboard accessibility, testing with screen readers, managing focus states, implementing proper heading hierarchies, providing alternative text for images, maintaining color contrast ratios, using ARIA labels and roles, or ensuring all interactive elements are keyboard-navigable. Apply this skill when building frontend components, reviewing UI accessibility, refactoring markup for better semantics, or implementing WCAG compliance requirements.

Frontend Accessibility

When to use this skill

  • •When creating or modifying any UI component files (e.g., .tsx, .jsx, .vue, .svelte files)
  • •When writing HTML or JSX markup for user interfaces
  • •When implementing forms with input fields, labels, and validation messages
  • •When building navigation menus, buttons, links, and interactive elements
  • •When creating modals, dialogs, tooltips, and overlay components
  • •When adding images, icons, or media content that needs alternative text
  • •When implementing keyboard navigation and focus management
  • •When using or adding ARIA attributes (aria-label, aria-describedby, role, etc.)
  • •When ensuring proper heading hierarchy (h1-h6) in page layouts
  • •When choosing colors and ensuring sufficient contrast ratios
  • •When testing components with screen readers
  • •When managing focus states for dynamic content and SPAs
  • •When reviewing components for WCAG compliance and accessibility standards

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