企业官网建设流程全解析

如何用 Remotion 做无障碍视频：快速上手

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion

产品视频发出去，听障同事一句口播都没接住？上线评审时又常被问："你们的播放器，键盘和读屏软件能正常操作吗？"Remotion 这个用 React 写视频的框架，把无障碍视频拆成了播放器控件、字幕图层、文本可读性三块，各有各的现成落点。

Remotion 播放器键盘操作到什么程度

官方对 Remotion Player 的内部评审结论挺坦率：基础按钮已达标，滑条类还差一截。

• 播放、暂停、静音、全屏都支持键盘操作
• 每个按钮带无障碍名称，焦点态清晰可见
• 进度条、音量滑条还未暴露键盘控制
• 静音按钮的按下状态暂未同步给读屏软件

具体实现可以直接翻 player 源码，按钮和控件是分文件拆好的。值得注意的是：如果对接的企业客户有 WCAG 2.1 AA 审计，这两处短板要提前心里有数。

屏幕阅读器读得到画面里的文字吗

读得到。Remotion 把合成内容渲染进真实 DOM 节点，而不是糊在一块画布上。

• 文本走正常 DOM，读屏软件可以直接读
• 用户自定义的组件遵循同样规则
• 纯画布绘制的内容读屏拿不到
• 用普通文本节点放字，比贴图更友好

这块做得挺细，官方声明里明确写了"composition 内容渲染到真实 DOM"。留意一下：只要你的字幕和关键文案不是图片形式，可访问性就占了一半。

Remotion 字幕加在哪一层最规范

字幕是视频内容的一部分，作为画面里的文本层直接渲染，处理逻辑用官方的 captions 包 承接。

• @remotion/captions 提供字幕处理的基础组件
• 字幕文本走 DOM，可被读屏软件读取
• 按帧在时间轴上控制字幕出现时机
• 字幕颜色对比度得自己把住关

值得注意的是：字幕加在 DOM 层还是烧进画面，决定了听障用户和读屏用户能不能"看见"它，前者明显更稳妥。

落地时有哪些坑要留意

框架给了底子，剩下的是你自己代码的事。

• 模板代码不在官方无障碍声明范围内
• 别只靠颜色传信息，叠加形状或图标
• 关键信息别只出现在画面里，留个文字出口
• 状态提示要能被读出来，别只闪一下

值得注意的是：官方明确用户代码不承诺无障碍达标，这块得自己兜底，起步时就把对比度和标签习惯养好。

想继续挖细节，可以直接看官方文档：无障碍声明，里面逐条列了 Player、Studio 和模板各自的达标情况。

git clone https://gitcode.com/GitHub_Trending/re/remotion

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion