AgentSkillsCN

Frontend Accessibility

依据 WCAG 指南，采用语义化 HTML 构建无障碍用户界面，支持键盘导航、屏幕阅读器适配，并确保恰当的色彩对比度。在创建或修改 UI 组件、实现表单输入、添加交互式元素、设计导航菜单、构建模态框或对话框，以及处理焦点管理等场景中，均可运用此技能。无论是 React 组件文件（*.tsx、*.jsx）、Shadcn/ui 组件，还是任何用户与之交互的前端代码，皆可借助这一技能加以优化。通过语义化 HTML 元素（如 nav、main、button 等），向辅助技术传达清晰语义；配合 Tailwind 中的可见焦点指示器（focus:ring-2、focus:ring-offset-2），确保键盘导航流畅无碍；同时，保证充足的色彩对比度（普通文本至少达到 4.5:1 的标准）；为图片添加富有描述性的替代文本，为表单输入设置意义明确的标签；进行屏幕阅读器测试与验证；在语义化 HTML 无法充分表达复杂组件时，合理运用 ARIA 属性；遵循逻辑清晰的标题层级结构（h1–h6 按序排列）；并在动态内容、模态框及单页应用中，妥善管理焦点流转。

SKILL.md
--- frontmatter
name: Frontend Accessibility
description: 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.

Instructions

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