SuperAPI AI 工具集

frontend-accessibility

前端与建站

查看项目

更新于 10-15 16:45

技能介绍

用途:frontend-accessibility 是一个供 Claude Code 使用的前端无障碍技能,用于在编写或修改前端代码时,按无障碍(accessibility)标准给出具体指导。

主要能力与覆盖范围(据资料):

  • 使用语义 HTML 元素,如 nav、main、button、article、section 等;
  • 表单可访问性,确保所有输入都有关联的 label;
  • 键盘导航与焦点管理;
  • 交互元素(按钮、链接、模态框、菜单)的无障碍实现;
  • 颜色对比度校验,需符合 WCAG 标准,最低 4.5:1;
  • 为图片或图标添加替代文本;
  • 为复杂 UI 模式实现 ARIA 属性;
  • 使用屏幕阅读器测试组件;
  • 建立逻辑清晰的标题层级(h1-h6);
  • 为键盘导航提供可见的焦点指示器;
  • 在动态内容、模态框或单页应用中管理焦点;
  • 确保触摸目标尺寸适合无障碍使用。

适用时机(据资料):创建或编辑 .tsx、.jsx 文件中的 React 组件时,或涉及上述任一无障碍事项时。

使用方式:该技能在 Claude Code 中按上述适用场景提供编码指导;具体安装与调用指令资料未提供。

限制:资料未提供具体的安装命令、依赖、支持的框架版本、收费方式或效果数据,这些均暂未提供。