无障碍(web accessibility)是指对于所有用户，无论他们的能力水平和使用技巧如何，都可以平等地访问和使用网站。有很多人需要无障碍技术来访问互联网，如有视力或听力障碍、智力或认知障碍、运动或肢体障碍、语言或沟通障碍、年龄等。
如果我们的网站可以提供无障碍功能，那么这将使我们的网站更加友好，更有价值，更易于发现和使用。接下来，我们将介绍一些简明无障碍引导手册，为你的网站开发保驾护航。
目标受众
这篇文章的目标受众是前端开发者和设计师。我们将介绍一些技术和方法，以便帮助他们创建可访问性更强的网站。
理解无障碍
在你开始构建无障碍网站之前，你需要了解无障碍是什么以及如何实施。你需要了解包括 WCAG2、ARIA、 tabIndex 及 WAI-ARIA 等标准以及它们如何在构建网站时发挥作用。
WCAG2 将我们的无障碍措施分为三个不同等级的级别：A、AA 和 AAA。遵循这些标准，将为您的网站提供不同的级别的无障碍支持。
ARIA(Web内容无障碍性指南) 可以提高网站的可访问性，而 tabindex 可以帮助无障碍用户更好、更快地与页面进行交互。
WAI-ARIA(Web内容无障碍性指南增强实际)是一个包含各种文档和资源的社区驱动的标准，描述如何开发能够支持较少设备的 web 应用程序。
创建带有无障碍功能的网站
在创建无障碍网站时，我们应该从以下方面注意：
1. 键盘导航
键盘导航允许无障碍用户使用 tab、enter、空格等键，通过网站进行导航和交互。我们需要测试我们的网站，并确保无障碍用户可以在网站上使用键盘导航。
示例代码：
<button type="button" onclick="myFunction()" tabindex="0">点击这里</button>
2. 图片和多媒体
无障碍用户可能没有办法看到您的网站上的所示内容。我们需要使用 alt 标签来提供有关媒体的更多信息。我们还应该考虑提供音频和视频文件的字幕、文本和注释。
示例代码：
<img src="example.png" alt="一个带有阴影的蓝色背景和白色文本的按钮" /> <video controls src="example.mp4" width="480" height="320" title="click to play"> <source src="example.webm" type="video/webm" /> <source src="example.ogg" type="video/ogg" /> <track kind="subtitles" src="example.vtt" srclang="en" label="English" default /> <track kind="captions" src="example.vtt" srclang="en" label="English" default /> </video>
3.表单控件
我们必须确保所有表单字段都已标记，并使用 label 元素与其相对应。我们还应该使用使用 HTML5 格式验证器，确保表单元素在提交之前就能够执行正确的格式验证。
示例代码：
<label for="input">输入：</label> <input id="input" type="text" name="name" required />
4. 色盲支持
我们需要考虑使用配色方案，以确保我们的网站既适合有色觉的人，也适合色盲人。我们应该使用高对比度的配色方案，让文字和背景的视觉差异更明显。
示例代码：
body {
background-color: #ffffff;
color: #000000;
}5. 标记和文本
我们需要使用适当的头部示例，描绘完整的内容大纲。我们需要使用 h1~h6 标签来定义页面的标题层次结构，并使用适当的段落和文本样式，以使其易于阅读。
示例代码：
<h1>我是标题</h1> <p>我是段落文本</p>
结论
在如今的数字化时代中，开发无障碍的、易于访问的网站，是应该被优先考虑的。本文详细的介绍了如何创建无障碍的网站，以及如何使用我们的网站，我们希望这些信息会对你的下一次开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672a841fddd3a70eb6d031fd