AgentSkillsCN

frontend-accessibility

遵循WCAG指南与无障碍设计最佳实践，打造易于访问的用户界面。在添加语义化HTML元素（nav、main、button、article）、实现键盘导航、确保色彩对比度符合标准、为图片添加替代文本、编写ARIA属性、管理焦点状态，或构建合理的标题层级结构时，均可运用此技能。适用范围涵盖HTML模板、JSX/TSX组件，以及一切影响用户无障碍体验的前端代码。

SKILL.md
--- frontmatter
name: frontend-accessibility
description: Build accessible user interfaces following WCAG guidelines and a11y best practices. Use this skill when adding semantic HTML elements (nav, main, button, article), implementing keyboard navigation, ensuring color contrast compliance, adding alt text to images, writing ARIA attributes, managing focus states, or structuring heading hierarchies. Applies to HTML templates, JSX/TSX components, and any frontend code that affects user accessibility.

When to use this skill

  • •When choosing semantic HTML elements (nav, main, button, article, etc.)
  • •When implementing keyboard navigation and focus indicators
  • •When checking or setting color contrast ratios (4.5:1 minimum)
  • •When adding alt text to images and labels to form inputs
  • •When writing ARIA attributes for complex components
  • •When structuring heading levels (h1-h6) in proper order
  • •When managing focus in modals, dialogs, or SPAs
  • •When testing with screen readers
  • •When editing HTML, JSX, TSX, or Vue template files
  • •When creating interactive elements that need keyboard support
  • •When building forms with proper label associations

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.

Instructions

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