a11y：视频聊天的正确 `<track>` 元素是啥？

Posted 2023-05-08

【中文标题】a11y：视频聊天的正确 `<track>` 元素是啥？

【英文标题】：a11y: What is the correct `<track>` element for video chats?a11y：视频聊天的正确 `<track>` 元素是什么？

【发布时间】：2020-04-23 21:32:15

【问题描述】：

我正在使用 React 构建视频聊天应用。

当我使用<video /> 元素时，我的ESLint plugin for writing accessible UI 对我大喊说缺少<track /> 元素。

代码：

function Video( autoPlay, playsInline, videoEl ) 
  return <video autoPlay=autoPlay playsInline=playsInline ref=videoEl />;

警告：

error  Media elements such as <audio> and <video> must have a <track> for captions  jsx-a11y/media-has-caption 

在我查找 <track /> 之后，似乎期望 src 属性与 .vtt 文件。但在视频聊天中，没有字幕。使视频聊天的 html 可访问的最容易访问的方法是什么？

【问题讨论】：

您是否有权访问语音翻译 API / 它是否在项目范围内？实时翻译不同于拥有<track> 元素。

@GrahamRitchie 不幸的是，我没有:(

【参考方案1】：

您可以完全忽略此消息

这是指 WCAG 指南：Understanding Success Criterion 1.2.4: Captions (Live)

该指南明确指出：

此成功标准旨在适用于同步媒体的广播，并非要求两个或多个人通过网络应用程序进行双向多媒体通话时必须添加字幕，无论是否需要用户。

【讨论】：

嘿，你可以删除最后一行'如果你只是想满足 eslint' - 添加一个空的 track 来满足 linter 是一个糟糕的主意，做任何事情来满足 linter现实世界的可用性是一个坏主意。在此示例中，屏幕阅读器中会宣布一个空轨道，并且在某些现成的视频播放器中，它将触发显示字幕按钮。我不想只是去编辑你的答案，因为我觉得这很粗鲁。

另一种“满足” eslint 的方法可以更好地传达意图并且不会混淆 AT，那就是 use inline comments 禁用对该规则的吹毛求疵。

@GrahamRitchie 事实上，我完全同意。我不想在“建议”之后添加“/s”...

呵呵，文字的问题，没有语气，所以我无法察觉讽刺，这是否意味着我得到了一个 r/whoosh :-)