Remotion 无障碍视频：框架已就位的部分和你必须补齐的部分
【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion
一条 90 秒的产品视频上线了，视障用户却听不到字幕——因为字幕根本没做。用 Remotion 做无障碍视频时，先分清哪部分框架已经替你处理、哪部分得写进自己的 composition，能省掉很多返工。
无障碍是底线，不是加分项
欧盟《欧洲无障碍法案》自 2025 年 6 月起对面向消费者的数字产品生效，视频内容被明确列入合规范围。另外，用屏幕读屏或纯键盘操作的用户占比不低——播放器按钮读不出名称，等于直接拒绝服务。
开箱即用的无障碍能力全景
先看全景，再决定自己要补什么：
| 能力项 | 在哪里生效 | 说明 |
|---|---|---|
| 播放/暂停/静音/全屏键盘可达 | Remotion Player | 按钮带aria-label且随状态切换（"Play video" ↔ "Pause video"），见 Player 源码 |
| 画面内容渲染为真实 DOM | Remotion Player | 文本可被屏幕阅读器读出，这是它相对 canvas 方案的先天优势 |
| 拖进度条/音量滑块 | Remotion Player | 已知短板：还不是带 role 和键盘操作的滑块；静音状态也未暴露给辅助技术 |
| 键盘导航 + 焦点指示 + 标签 + 对比度 | Editor Starter 模板 | 开箱即用的基线；代码进你的仓库后，达标责任转移给你 |
| 对话框焦点管理、状态播报 | Remotion Studio | 官方不给出无障碍保证，搜索与 CLI 渲染对话框的焦点陷阱等仍待修复 |
| 你的代码和第三方模板 | — | 不在 官方无障碍声明 范围内，框架执行你的代码但不对结果负责 |
Player 的定位是"部分支持" WCAG 2.1 AA：内部自查里，进度条缺少可操作的 ARIA 角色，时间显示对辅助技术不可见，这些缺口官方写进了 VPAT 审计报告。它不是宣传口径，可以直接当验收单看。
动手清单：让视频内容真正可访问
框架管的是交互层，内容层的字幕、对比度、自动播放策略都要你自己写。按下面几条过一遍：
- 加上画面内字幕：Player 没有
<track>字幕 API，听障用户依赖的是你自己在 composition 里绘制的文本。仓库自带 字幕工具包，逐条核对字幕文本与口播内容的时间轴对齐。 - 给纯视觉信息配文字或音频描述：图表、界面演示、手势动作，这些"看了才知道"的信息，在画面里同步给出文字呈现。
- 按 WCAG 检查画面文本对比度：正文至少 4.5:1。浏览器开发者工具里的对比度检查器可以逐帧核对。
- 检查信息是否只靠颜色传递：红绿状态、涨跌标记，配上图标或文字标签，别指望颜色单独说话。
- 用键盘和读屏软件各走一遍页面：确认 Tab 能到达播放器全部控件、焦点可见、按钮朗读名称正确，顺带验证框架层面没漏。
- 发现框架级问题就提交 issue：Player 的已知缺口、你撞上的新 bug，都可以在 Remotion 仓库提 issue，注明复现步骤和 WCAG 条款号。
容易忽略的盲区
- DOM 文本的友好是有前提的：Player 渲染到真实 DOM，屏幕阅读器才读得出字；你把文字画进 canvas 或转成图片，这个优势瞬间归零。
- 自动播放 + 静音是最危险的组合：移动端默认放行"静音自动播放"，于是大量视频静默开跑——画面在动、声音没了，听障用户获得的信息约等于零。需要声音才能看懂的内容，别依赖自动播放。
- 合规审计要留证据：企业客户经常要求提供 VPAT 或 RGAA 报告。仓库 compliance/a11y/ 目录下就是现成的审计文档，采购评估时直接交给合规团队。
框架把键盘、焦点、标签这些交互层的事做了，内容层的事——字幕、对比度、自动播放策略——得落在你身上。把仓库拉下来，对着 官方无障碍声明 和 VPAT 逐项验收：
git clone https://gitcode.com/GitHub_Trending/re/remotion【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
