谷歌 Web 开发最佳实践手册(2.2.5):可访问性很重要

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:可访问性不是一个特性。缺少了字幕和描述,有视力或听力障碍的用户根本无法去了解一个视频。相比糟糕的用户体验,添加此类内容花费的时间不算什么。所以,为所有用户都提供一个基本的用户体验吧。

 

在本课程中:

1. 引入字幕来增加可访问性
2. 添加轨道元素(track element)
3. 在轨道文件中定义字幕

 

引入字幕来增加可访问性

利用轨道元素(track element)添加字母或描述来增加媒体在移动设备上的可访问性。

记住:Chrome for Android,iOS Safari 和当前所有的桌面浏览器都支持轨道元素,除了火狐(参看 caniuse.com/track)。可以用填充物(polyfills)替代,我们推荐 Playr 或者 Captionator

使用了轨道元素后,字幕看起来是这样的:

Screenshot showing captions displayed using the track element in Chrome on Android

 

添加轨道元素

为视频添加字幕很简单,就是添加一个轨道元素作为视频元素的孩子。

查看完整样例

轨道元素的 src 属性提供了轨道文件的位置。

 

在轨道文件中定义字幕

轨道文件使用 WebVTT 格式描述时间的开始

收藏 评论

关于作者:Mxt

Think Deep, Work Lean. 个人主页 · 我的文章 · 12

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部