AgentSkillsCN

Frontend Accessibility

确保 UI 组件对所有用户都可访问，包括使用辅助技术的用户，通过语义 HTML、键盘导航、ARIA 属性、颜色对比度和屏幕阅读器兼容性。在构建 UI 组件、表单、交互元素、模态框，或任何需要 WCAG 合规的 React、Vue 或纯 HTML 前端代码时使用此技能。适用于添加导航元素、按钮、输入、焦点管理、替代文本，或使用屏幕阅读器测试，以确保包容性用户体验。

SKILL.md
--- frontmatter
name: Frontend Accessibility
description: Ensure UI components are accessible to all users including those using assistive technologies through semantic HTML, keyboard navigation, ARIA attributes, color contrast, and screen reader compatibility. Use this skill when building UI components, forms, interactive elements, modals, or any frontend code in React, Vue, or plain HTML that needs WCAG compliance. Applies when adding navigation elements, buttons, inputs, focus management, alternative text, or testing with screen readers to ensure inclusive user experiences.

Frontend Accessibility

When to use this skill

  • •When creating UI components in files like components/, Button.tsx, Form.jsx, or any React/Vue/Angular component
  • •When building forms with input fields, labels, error messages, and validation feedback
  • •When implementing keyboard navigation for interactive elements (tabs, modals, dropdowns, menus)
  • •When adding semantic HTML elements like <nav>, <main>, <button>, <header>, <footer>, <article>
  • •When ensuring proper color contrast ratios (4.5:1 minimum) and not relying solely on color to convey information
  • •When adding alternative text for images using alt attributes or ARIA labels for icon buttons
  • •When implementing focus indicators and managing focus for modals, dialogs, or single-page app navigation
  • •When using ARIA attributes (role, aria-label, aria-describedby, aria-live) for complex components
  • •When creating proper heading hierarchies (h1-h6) that screen readers can navigate through
  • •When testing components with screen readers (NVDA, JAWS, VoiceOver) to verify accessibility
  • •When building custom interactive widgets that need ARIA roles and keyboard event handlers

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