AgentSkillsCN

Frontend Accessibility

利用语义化的HTML、恰当的ARIA属性、键盘导航，以及屏幕阅读器兼容性，构建无障碍的用户界面。在创建或修改HTML标记、UI组件、表单，或交互式元素时，应使用此技能。在实现键盘导航、焦点管理，或Tab键顺序时，应使用此技能。在为图片添加替代文本，为表单输入添加标签时，应使用此技能。在确保足够的色彩对比度时，应使用此技能。在处理导航菜单、模态框、按钮，或动态内容时，应使用此技能。在以适当的标题层级（h1-h6）构建页面时，应使用此技能。在测试UI更改以确保屏幕阅读器兼容性时，应使用此技能。

SKILL.md
--- frontmatter
name: Frontend Accessibility
description: Build accessible user interfaces with semantic HTML, proper ARIA attributes, keyboard navigation, and screen reader compatibility. Use this skill when creating or modifying HTML markup, UI components, forms, or interactive elements. When implementing keyboard navigation, focus management, or tab order. When adding alternative text for images or labels for form inputs. When ensuring sufficient color contrast ratios. When working with navigation menus, modals, buttons, or dynamic content. When structuring pages with proper heading hierarchy (h1-h6). When testing UI changes for screen reader compatibility.

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 HTML markup for pages or components
  • •When implementing interactive elements like buttons, links, forms, or navigation menus
  • •When adding keyboard navigation support to UI components
  • •When managing focus states in modals, dropdowns, or single-page applications
  • •When adding alternative text to images or ARIA labels to elements
  • •When ensuring color contrast ratios meet WCAG standards
  • •When structuring pages with proper semantic HTML (nav, main, header, footer, article)
  • •When implementing proper heading hierarchy (h1, h2, h3, etc.)
  • •When testing UI changes with screen readers (VoiceOver, NVDA, JAWS)
  • •When working with form inputs, labels, and validation messages

Instructions

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