SuperAPI AI 工具集

kb-framework-accessibility

前端与建站

查看项目

更新于 10-15 20:14

技能介绍

用途:这是一份框架专属的无障碍参考数据,而非自动审查器,用于在开发时查阅各框架常见的无障碍陷阱及对应修复写法。

主要能力:按 React/Next.js、Vue、Angular、Svelte、Tailwind CSS 分类,逐条列出模式、问题与修复方式,并给出修复模板。例如 React 中 div 上的 onClick 不可键盘访问,应改用 button 或补 role、tabIndex、onKeyDown;Next.js 图片需补 alt;路由切换需做焦点管理;新标签链接需加 rel 与提示。Vue 中 v-html 需净化审计,live region 用 v-show 而非 v-if,过渡后需管理焦点。Angular 中 ARIA 需用 [attr.aria-label],ngFor 需 trackBy,路由变化可用 LiveAnnouncer 播报。Svelte 中需为出现内容管理焦点、检查 prefers-reduced-motion、避免非交互元素绑定点击。Tailwind 中 outline-none 需搭配 focus-visible ring,注意对比度,添加 motion-reduce 变体与 sr-only 文本,并附对比度安全配色对(如 bg-white 配 text-gray-600 为 4.55:1)。

使用方式:作为开发参考查阅,按框架定位对应模式并套用修复模板;资料未提供安装命令或调用方式。

适用场景:前端开发与无障碍自查时快速定位框架级问题。

限制:仅为参考数据,不执行审查;未提供收费、平台、效果等其它信息。