在如今这个数字化时代，越来越多的人使用互联网作为主要获取信息的途径。但是，对于身体或认知上存在障碍的用户，访问网站可能是一项具有挑战性的任务。所以，为了让所有用户都能够获得优质的用户体验，我们需要关注无障碍设计。
什么是无障碍设计
无障碍设计是一种设计理念，其目的是使产品、服务和环境对所有人都能够公平、协同和使用。在 Web 中，无障碍设计就是为所有使用互联网的用户提供可访问的 Web 网站的设计与开发。
为什么需要无障碍设计
根据最新的统计数据显示，全球有超过 1 亿人口存在身体或认知上存在障碍，需要专门的设计和支持，他们的需求不能忽视。在人口老龄化的趋势下，无障碍设计也成为了越来越重要的议题。
除此之外，无障碍设计还有诸多优点，例如：
- 增加网站受众的数量
- 提高搜索引擎排名
- 使网站放在良心位置
- 使网站更容易使用和可靠
- 遵守法律法规
- 促进品牌形象
如何实现无障碍设计
以下是一些实现 Web 无障碍设计的核心技术：
语义化 HTML
语义化 HTML 是一种编写更具含义与辨别度的 HTML 代码的方法。有助于辅助技术理解页面结构与信息。例如，将适当的标记应用于 HTML 元素，可以使阅读器更具可读性，并使搜索引擎更好地理解网站的内容。
示例代码：
-- -------------------- ---- -------
--------
-----
----
------ ----------------------
------ ----------------------------------
------ ----------------------------------
-----
------
---------对比度
足够的对比度是使大多数人都能够识别页面上的文本和按钮的根本要素之一。根据 WCAG 2.1 的建议，文本和背景之间的最小对比比率应为 4.5：1。如果文本较大，则最小要求可以降至 3：1。
示例代码：
-- -------------------- ---- ------- ------- - ----------------- -------- ------ ----- -------- ----- -------------- ---- ------- ----- ---------- ----- -- ------- ----- -- ------ --------- ---- ---- ---- ----------------- -------- --- --- -- -
图像、音频和视频标记以及替代文本
对于有身体或认知上存在障碍的人来说，图像、音频和视频有时可能是难以理解的。通过使用 HTML 标记和适当的替代文本，可以帮助这些用户了解媒体的内容。
示例代码：
-- -------------------- ---- ------- ---- --- ---------------- --- ---- --------------- ----------- ---- ----- -------------- --- ---- --------------- ---------- --------------------------------------------------- ---- --------------- --- ------ --------- ------- -------------- ------------------ ------ ---------------- ---------------- ------------ ---------------- --------
键盘操作性
对于没有鼠标的人们，操作网站时使用键盘非常重要。如果页面无法通过键盘直接访问，则可能导致访问性问题。
示例代码：
<button onclick="runFunction()" onkeypress="runFunction()" tabindex="0">执行操作</button>
根据用户需求隐藏内容
诸如屏幕浏览器或语音助手这样的辅助技术需要理解页面中的内容以正确地处理它们。但是，隐藏在视觉方面但却足够可访问的文本（例如：a11y），可能会使某些用户感到不必要的困难。
解决方法是使用适当的方法将其移出屏幕，并使其仅在需要时可感知。
示例代码：
.visually-hidden {
position: absolute;
left: -99999999em;
}利用 ARIA 属性
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 是一组技术和标准，可帮助开发人员更好地实现 Web 无障碍设计。Aria 属性可以为一些特性提供额外的信息。
示例代码：
<label for="username">用户名</label> <input type="text" id="username" required aria-label="请输入您的用户名" />
总结
Web 无障碍设计是一项至关重要的工作，以使每个人都能够公平、有效地访问互联网资源。通过使用语义化 HTML、适当的对比度、元素的替代方法、键盘访问性、ARIA 属性和隐藏内容等方法，开发人员可以为 Web 界面提供无障碍体验，使得 Web 无障碍设计成为我们应该关注和实施的重点之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64719b37968c7c53b0f7c54f