SuperAPI AI 工具集

intopia-web-accessibility

前端与建站

查看项目

更新于 10-15 22:38

技能介绍

用途:在生成或修改 UI 代码时应用无障碍原则,目标是让不同能力的人都能直接使用界面,无需变通手段。适用于 HTML、CSS、JSX、TSX 以及 React、Vue、Svelte 组件、页面、表单等。

主要能力:先识别每个 UI 组件及请求涉及的横切主题(表单、键盘与焦点、图片与图表、拖放、实时区域、响应式布局、结构与语义、颜色),再读取 INDEX.md,按组件索引加载对应的验收标准文件与代码示例文件;若某组件行在 Load first 列标注了基础项,需先按给定顺序各加载一次,再加载该组件自身文件处理差异。对每个适用主题,通过 Topic Index 加载 references/topic/ 下的文件。涉及颜色值时查阅 references/colour-contrast/Colour Contrast Reference.md。

通用规则:优先使用语义化 HTML,按元素本意使用;谨慎使用 ARIA,不添加原生元素已有的 role;每个交互元素都有可访问名称、正确 role 和当前状态;Tab 顺序遵循视觉阅读顺序,不使用大于 0 的 tabindex,焦点不丢失或移出屏幕;所有交互元素有可见焦点指示且对比度至少 3:1;为动态内容(模态框、菜单、SPA 导航)管理焦点;文本与 UI 对比度满足 4.5:1(普通文本)或 3:1(大文本与 UI 组件);不单靠颜色传达含义。

使用方式:按上述流程加载权威参考文件后再生成代码,不得在未查阅的情况下生成。展示代码后,逐行列出所做的具体无障碍决策,每个组件或模式一行。

限制:资料未提供具体安装命令、平台支持范围、收费或价格信息,暂未提供。