AgentSkillsCN

Frontend Accessibility

利用语义化 HTML、键盘导航、恰当的色彩对比度、ARIA 属性以及屏幕阅读器支持，构建无障碍的用户界面。在创建或修改前端 UI 组件、HTML 模板、JSX/TSX 文件、表单、交互式元素、模态框、导航菜单，或任何面向用户的界面代码时，均可运用此技能。无论是确保键盘可访问性、添加 ARIA 标签与角色、为图片提供替代文本、管理焦点状态、实施合理的标题层级结构、使用屏幕阅读器进行测试，还是确保充足的色彩对比度，都可借助此技能来完成。当处理 .jsx、.tsx、.vue、.html 文件，或渲染 UI 元素的组件文件时，亦可灵活运用。

SKILL.md
--- frontmatter
name: Frontend Accessibility
description: Build accessible user interfaces with semantic HTML, keyboard navigation, proper color contrast, ARIA attributes, and screen reader support. Use this skill when creating or modifying frontend UI components, HTML templates, JSX/TSX files, forms, interactive elements, modals, navigation menus, or any user-facing interface code. Use this when ensuring keyboard accessibility, adding ARIA labels and roles, providing alt text for images, managing focus states, implementing proper heading hierarchy, testing with screen readers, or ensuring sufficient color contrast ratios. Use this when working on .jsx, .tsx, .vue, .html, or component files that render UI elements.

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 editing UI component files (.jsx, .tsx, .vue, .html, .svelte)
  • •When building forms, buttons, links, or any interactive user interface elements
  • •When implementing keyboard navigation and visible focus indicators
  • •When adding ARIA attributes (aria-label, aria-describedby, role) to enhance accessibility
  • •When providing alternative text for images and meaningful labels for form inputs
  • •When ensuring proper color contrast ratios (minimum 4.5:1 for normal text)
  • •When creating proper heading structure (h1-h6) in logical order
  • •When managing focus in dynamic content, modals, dialogs, or single-page applications
  • •When using semantic HTML elements (nav, main, button, article, section, header, footer)
  • •When testing and verifying that interfaces work with screen readers
  • •When building navigation menus, dropdown menus, or complex interactive widgets

Instructions

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