SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场framework-accessibility

framework-accessibility

前端与建站

查看项目

更新于 10-15 15:18

技能介绍

用途

该技能面向前端开发中的无障碍（可访问性）实现，按框架整理常见无障碍陷阱与对应修复模板，覆盖 React、Next.js、Vue、Angular、Svelte 和 Tailwind CSS。它适合在编写或审查组件时，快速对照具体框架的典型问题并套用修复写法。

主要能力

React / Next.js

列出常见陷阱及修复：

  • 在 <div> 上使用 onClick：不可键盘访问，应改用 <button>，或添加 role="button"、tabIndex={0}、onKeyDown。
  • dangerouslySetInnerHTML：可能注入不可访问内容，需审计注入 HTML 的 ARIA、标题、替代文本。
  • 以 React.Fragment 作为根：可能破坏地标树，需确保片段不打断地标嵌套。
  • 列表缺少 key：重渲染时可能导致焦点丢失，交互列表应使用稳定 key（而非数组索引）。
  • Portal 未做焦点陷阱：焦点可能逃逸到背景，应将 Portal 内容包裹在 FocusTrap 组件中。
  • useEffect 焦点管理：挂载时焦点可能未触发，应使用 useRef + useEffect 并配置正确的依赖数组。

修复模板涵盖：div 改为语义化 button、Next.js Image 添加 alt、路由切换时焦点管理、新标签页链接添加 rel="noopener noreferrer" 与屏幕阅读器提示。

Vue

常见陷阱：

  • v-html 渲染用户内容：可能注入不可访问标记，需净化并审计。
  • 在 live region 上使用 v-if：会将元素从 DOM 移除，破坏播报，应改用 v-show。
  • <transition> 未处理焦点：内容过渡时焦点丢失，应在 @after-enter 钩子中管理焦点。
  • <teleport> 到 body：内容位于应用地标树之外，需为传送内容添加地标角色。

修复模板涵盖：live region 使用 v-show、过渡后通过 @after-enter 聚焦模态框。

Angular

常见陷阱：

  • [aria-label] 绑定：无效，ARIA 不是属性，应使用 [attr.aria-label]。
  • *ngFor 缺少 trackBy：列表重渲染时焦点丢失，应添加 trackBy 函数。
  • 缺少 LiveAnnouncer：路由变化未被播报，应注入 LiveAnnouncer 并播报导航。
  • OnPush + live region：变更检测可能不触发，应使用 ChangeDetectorRef.markForCheck()。

修复模板涵盖：ARIA 属性绑定、带 trackBy 的 ngFor、路由变化播报。

Svelte

常见陷阱：

  • {#if} 未管理焦点：内容出现时焦点丢失，应使用 use:action 聚焦新内容。
  • transition: 未检查动效偏好：动画无视用户偏好播放，应添加 prefers-reduced-motion 检查。
  • 非交互元素上使用 on:click：不可键盘访问，应改用 <button> 或添加键盘处理。

修复模板涵盖：div 改为 button、根据 prefers-reduced-motion 调整过渡参数。

Tailwind CSS

常见陷阱：

  • outline-none：移除焦点指示器，应搭配 ring-2 ring-offset-2 focus-visible:ring-blue-500。
  • text-gray-400 配 bg-white：对比度不达 4.5:1，应使用 text-gray-600 或更深。
  • 缺少 motion-reduce: 变体：动画忽略用户偏好，应添加 motion-reduce:transition-none。
  • 缺少 focus: 样式：无可见焦点指示器，应添加 focus:ring-2 focus:ring-blue-500。
  • 缺少 sr-only：屏幕阅读器文本不可用，应添加 <span class="sr-only">description</span>。

同时提供对比度安全的 Tailwind 配色对，例如 bg-white + text-gray-600（4.55:1）、bg-white + text-gray-700（6.62:1）、bg-gray-50 + text-gray-700（6.29:1）、bg-gray-900 + text-gray-300（5.92:1）、bg-blue-600 + text-white（5.23:1）、bg-red-600 + text-white（4.54:1）、bg-green-700 + text-white（4.58:1）。

修复模板涵盖：可见焦点指示器、足够对比度文本、尊重动效偏好的过渡。

使用方式

资料未提供该技能的具体安装命令、调用方式或集成步骤，暂未提供。

适用场景

  • 在 React、Next.js、Vue、Angular、Svelte 项目中编写或审查组件时，对照常见无障碍陷阱进行修正。
  • 使用 Tailwind CSS 时检查焦点样式、颜色对比度和动效偏好。
  • 作为团队无障碍修复模板的参考。

限制

资料仅提供各框架的陷阱对照与代码模板，未说明其自动化程度、检测范围、支持的版本、收费方式或平台限制，暂未提供。