在当今的数字时代，无障碍性变得越来越重要。对于许多人来说，互联网是获取信息和互动的主要方式，但对于那些使用助听器、屏幕阅读器或其他辅助技术的人来说，访问网站和应用程序可能会更加困难。因此，Web 内容无障碍性指南（WCAG）现已成为必须了解的标准之一。
什么是 WCAG？
WCAG 是一份由国际标准化组织（ISO）发布的指南，旨在为 Web 内容创作者提供指导，以确保他们的网站和应用程序对残障人士也能够访问和使用。WCAG 指南目前已经更新到第 2.1 版本，用于对数字无障碍性的评估。它包括了许多不同的准则，每个准则都有指南和成功标准，标准分为 A、AA、AAA 级别。A 级别是最低要求，AA 和 AAA 级别则分别更加严格。
以下是 WCAG 将无障碍性分为四个主要类别：
- 感知：指令和内容的用户界面必须能够被感知
- 操作：必须能够操作用户界面元素
- 理解：信息和操作必须能够被理解
- 兼容性：必须与各种辅助技术兼容
WCAG 2.1 的详细指南
感知
这些准则旨在确保任何访问者，无论能力如何，都能够感知页面的内容。这包括对视觉、听觉和触觉用户进行设计。
有关颜色的对比度（准则 1.4.3/1.4.6）
在设计 Web 内容时，必须确保文本和背景颜色之间的对比度足够高，以便能够正常阅读，无论使用何种辅助技术。例如，假设背景色是白色（#FFF），文本颜色为黑色（#000），则对比度需要至少达到 4.5：1 才能符合 AA 级别的标准，7:1 才能符合 AAA 级别标准。
以下是一个简单的示例代码，以计算两种颜色之间的对比度：
-- -------------------- ---- -------
-------- ------------------------ ------- -
--- ------------- - ------------ - ----- - ------------ - ------
------ ---------------------- ---
-
-------- ---------- -
--- --- - --------------
--- --- - ---
--- ---- - - -- - - ----------- ---- -
--- - - ------ -----
-- -- -- -------- -
------ - - - ------
- ---- -
------ - ------------ - ------ - ------- -----
-
-
------ ------ - ------ - ------ - ------ - ------ - -------
-
-------- ------------- -
-- ---------------- --- ---- -
------ ------------------------- --- ----
------------------------ --- ----
------------------------ --- -----
- ---- -
----- --- -------------- ----- ----------
-
-
-------- --------------- -------------- -
--- ------ - ------------ ---------------
------ ----------------- - ------- - -------
-操作
这些准则旨在确保各种用户都可以操作 Web 内容。
键盘访问（准则 2.1.1/2.1.2）
键盘访问是确保用户可以通过键盘或其他输入设备操作网站。对于那些只能使用键盘或其他输入设备的用户，这将是至关重要的。例如，使用 tab 键和方向键浏览链接，允许使用 "Enter" 激活 link。以下是一个简单的示例代码：
<ul> <li><a href="#" role="menuitem">Link 1</a></li> <li><a href="#" role="menuitem">Link 2</a></li> <li><a href="#" role="menuitem">Link 3</a></li> </ul>
处理输入错误（准则 3.3.1/3.3.2）
必须允许用户更正错误，比如用户输入错误的密码，需要允许用户更正。以下是一个简单的示例代码：
-- -------------------- ---- ------- ------ -------------------------------- ------ ----------- ------------- --------------- --------------------------------------- -------- -- ---- -------------------------- ------ ----- ---- --------- ------ ------ -------------------------------- ------ --------------- ------------- --------------- --------------------------------------- -------- -- ---- -------------------------- ------ ----- ---- --------- ------
理解
这些准则旨在确保用户可以理解页面上的信息。
可读性（准则 1.3.3/1.4.10）
必须确保页面上的文本易于阅读和理解。例如：字号必须符合规范、行高的设置等等。以下是一个简单的示例代码：
body {
font-size: 16px;
line-height: 1.5;
}兼容性
这些准则旨在确保网站兼容使用辅助技术的用户。
前端语义化（准则 4.1.2/4.1.3）
前端语义化是确保页面结构和标记意义的标准化。例如使用 "header" 代替 "div" 等语义化标签，能让辅助设备理解网页的主要结构和内容。以下是一个简单的示例代码：
-- -------------------- ---- -------
------- --------------
----------- ---------
---------
---- ------------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------
----- ------------
----------- ----------
---------- ---- -----------
-------
------- -------------------
--------- ---- -------- --------
---------结论
WCAG 是为确保 Web 内容无障碍性而编写的详细指南。它为 Web 开发人员和设计师提供了指导，以确保他们的网站和应用程序对所有人都可访问和使用。本文提供了 WCAG 2.1 的详细内容以及包含示例代码的指南，希望能够帮助您了解和应用 WCAG 2.1。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674559a9c1a23897ea922e89