在我们日常生活中，使用视频进行信息传递已经成为了一种非常普遍的选择。对于一些特定的群体，如视障人士、听障人士和运动障碍人士等，能否参与和了解这些视频信息就成为了一个重要的问题。这时无障碍性设计就显得尤为重要，尤其是在视频产品设计中。
什么是无障碍性设计
无障碍性设计是指通过各种设计方法，使得产品可以让任何人都可以使用，而不需要因为身体或者认知上的差异而感到不方便或者无法使用。常见的无障碍性设计包括但不限于以下一些方面：
- 设计产品时考虑到色盲、反应速度等因素
- 设计产品时考虑到残疾人的使用需求，例如加大字体、增加文字说明等方案
- 设计产品时考虑到设计界面对于残疾人而言的可操作性。
对于视频产品而言，无障碍性设计包括：
- 视频生产时应考虑字幕、并支持屏幕阅读器等工具
- 设计时应考虑到键盘操作、交互方式和语音控制等
- 设计时应采用清晰的画面和声音，以支持听障人士的观看
视频产品无障碍性的好处
为什么要关注视频产品的无障碍性呢？这有以下好处：
- 更好地遵守国际条例。美国的Section 508和欧盟的Web Content Accessibility Guidelines（WCAG）都规定了活动节目产品需要支持无障碍性。
- 令你的产品能够被更广泛地接受。无障碍性设计能够吸引更多群体的用户，包括一些没想过使用你的产品的人。
- 有助于提升你的品牌形象。无障碍性设计看起来并不是需要很高的技术水平，但有助于体现出你关注用户、关心他们的需求的态度。这有助于提升用户对你品牌的好感度。
- 避免法律诉讼。在某些地方，如果你的产品不支持无障碍性，可能会收到一些专门解决无障碍性问题的组织或者机构提起的诉讼。
如何支持无障碍性
无障碍性支持需要使用的技术很多，这里只介绍一些最为常见的技术。
字幕和视频文本
字幕和视频文本能够支持听障人士观看你的视频，也能帮助屏幕阅读器读取，以便于其他障碍群体使用。字幕应该包括说话人的姓名，但不必包括口头上的语气，例如“笑着说”或“满怀信心地说”。此外，字幕还需要考虑到完整性、时序和意思。
交互
交互也应该按照无障碍性设计来考虑，例如通过键盘来切换视频，确保所有用户都可以操作视频。
审核
所有内容放到网上后一定要进行审查，并使用无障碍工具进行测试，以确保产品符合所有有关条例和标准。
代码示例
下面是一些HTML/CSS/JS代码片段，展示如何实现视频的无障碍性：
<!-- HTML --> <video id="video" width="800" height="400" controls aria-describedby="description"> <source src="sample.mp4" type="video/mp4"> <source src="sample.webm" type="video/webm"> Your browser does not support the video tag. </video> <div id="description" class="sr-only">Sample video, showing a football match in the park</div>
// www.javascriptcn.com code example
/* CSS */
.sr-only {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}// www.javascriptcn.com code example
// JS
const video = document.getElementById('video');
const description = document.getElementById('description');
video.addEventListener('play', function() {
// play video
});
function keyUpHandler(event) {
if (event.keyCode === 32 || event.keyCode === 13) {
event.preventDefault();
video.play();
}
}
description.addEventListener('click', function() {
video.play();
});
document.addEventListener('keydown', keyUpHandler);以上代码片段中，我们将视频的元信息和描述放在英文的<div>中并使用了sr-only类来将网页描述的文字仅仅呈现给屏幕阅读器，而不是在页面中显示出来。同时，我们也为用户提供了在没有鼠标的情况下也能够使用视频播放的方法，只需要按下空格或者回车键即可开始播放视频。
结语
在今天，随着人类对于无障碍性和包容性思想的不断提高，无障碍性设计越来越被所重视。作为一个设计产品的人员，为你的用户提高无障碍性视图从事更具有责任感和同情心的工作。让我们共同努力，在未来创造更为美好的互联网世界。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfab49e46428fe9eb74118