AgentSkillsCN

Frontend Accessibility

遵循 WCAG 指南，以语义化 HTML、键盘导航、恰当的色彩对比度，以及屏幕阅读器支持，打造无障碍用户界面。在构建 React、Vue、Svelte，或任何前端框架组件时；在使用语义化元素（nav、main、button 等）编写 HTML 结构时；在实现键盘导航与焦点管理时；在检查文本与 UI 元素的色彩对比度时；在为复杂组件添加 ARIA 属性时；在为图片添加替代文本、为表单输入添加标签时；在使用屏幕阅读器进行测试时；在为文档大纲构建标题层级（h1–h6）时；在动态内容、模态框以及单页应用中管理焦点时；在构建无障碍表单、按钮、链接与交互式元素时；或在确保桌面与移动界面均符合网络无障碍标准时，均可运用此技能。

SKILL.md
--- frontmatter
name: Frontend Accessibility
description: Implement accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, proper color contrast, and screen reader support. Use this skill when building React, Vue, Svelte, or any frontend framework components; when writing HTML structure with semantic elements (nav, main, button, etc.); when implementing keyboard navigation and focus management; when checking color contrast ratios for text and UI elements; when adding ARIA attributes to enhance complex components; when providing alt text for images and labels for form inputs; when testing with screen readers; when structuring heading hierarchies (h1-h6) for document outline; when managing focus in dynamic content, modals, and single-page applications; when building accessible forms, buttons, links, and interactive elements; or when ensuring web accessibility compliance across desktop and mobile interfaces.

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 implementing semantic HTML structure with appropriate elements
  • •When ensuring keyboard navigation and visible focus indicators
  • •When checking and maintaining color contrast ratios (4.5:1 for normal text)
  • •When adding descriptive alt text for images and labels for form inputs
  • •When testing with screen readers and assistive technologies
  • •When using ARIA attributes to enhance complex components
  • •When structuring proper heading hierarchies (h1-h6) for document outline
  • •When managing focus in dynamic content, modals, and single-page applications
  • •When building accessible forms, buttons, links, and interactive elements

Instructions

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