SuperAPI AI 工具集

video-accessibility

前端与建站

查看项目

更新于 10-16 06:08

技能介绍

用途

该技能用于在代码审查中检查与“让视频具备字幕等无障碍支持”相关的模板、服务端渲染 HTML 和共享组件。它关注最终面向浏览器的标记,帮助发现渲染后 HTML 中违反视频无障碍规则的具体元素、属性与路由。

主要能力

  • 检查视频是否提供准确的字幕(closed captions),且明确要求不是自动生成的字幕。
  • 检查是否为视觉内容提供音频描述(audio descriptions)。
  • 检查是否提供文字转录(transcripts)作为替代方案。
  • 检查视频是否禁止带声音自动播放。
  • 检查是否具备键盘可访问的暂停控件,并确认按空格键可暂停视频且不会导致页面滚动。
  • 在代码审查中标记出违反规则的具体元素、属性与路由。

使用方式

该技能适用于审查模板、服务端渲染 HTML 和共享组件中输出相关标记的场景。检查项包括:验证视频是否具备准确字幕(非自动生成)、视觉内容的音频描述、转录文本、键盘可访问的暂停控件,以及是否没有自动播放;并确认空格键暂停视频时页面不滚动。修复方向包括:为字幕和音频描述添加 track 元素、提供文字转录、实现全局暂停控件、禁用自动播放,并确保媒体控件可通过键盘访问且具备正确的焦点管理。完整实现细节、代码示例和框架相关指导见 references/rule.md。规则页面为 https://frontendchecklist.io/en/rules/html/video-accessibility。

适用场景

  • 前端代码审查流程中,针对视频相关标记的无障碍合规检查。
  • 审查模板、服务端渲染 HTML 或共享组件时,确认视频无障碍要求是否落实。
  • 需要向团队解释字幕、音频描述和暂停控件对残障用户的意义时:字幕帮助聋人和听障用户,音频描述帮助盲人用户理解视觉内容,暂停控件帮助觉得自动播放令人迷失方向的认知障碍用户。

限制

资料未提供该技能的具体安装命令、依赖环境、支持的框架清单、收费或价格信息,也未提供除规则页面外的更多外部资源。