介绍
随着互联网的普及和发展，我们越来越多地依赖于电子设备来获取信息和交流。但是对于视觉、听力、操作等方面存在障碍的人群，使用电子设备可能是困难甚至无法完成的任务。为了让网站、应用和设备能够服务于更多的人群，无障碍辅助技术变得愈发重要。
WCAG（Web Content Accessibility Guidelines）是一个用来指导网站制作者、开发者、设计师等人员如何创建无障碍内容的指南。WCAG 2.1 是目前最权威的版本，它在原有的 2.0 版本的基础上新增了一些条款和建议，包括对移动应用、响应式设计和语义性的更多细节方面的要求。
本篇文章将介绍 WCAG 2.1 中的主要指南，并提供一些相关的示例代码，帮助读者理解和实践这些指南。
指南一：适用性原则
适用性原则指导了我们创作无障碍内容的基本原则，并重点强调了在什么情况下必须遵守无障碍指南。它被分为以下四个原则：
Perceivable（可感知性）：用户必须能够感知到页面中的所有信息和功能。例如，提供文字描述（alt）以支持图像、表格以支持数据呈现等。
Operable（可操作性）：用户必须能够使用不同的输入设备完成任务。例如，键盘操作、手势操作、语音控制等。
Understandable（可理解性）：页面的信息和操作必须是容易理解的。例如，提供易于理解的语言、使用简单的布局和元素等。
Robust（稳健性）：页面必须是稳健的，能够在不同的环境和设备中呈现。例如，使用规范的 HTML、CSS 代码、添加元数据等。
指南二到四它们分别详细描述了这四个原则。
指南二：感知性原则
感知性原则包括三条指南，以确保用户可以感知页面中的所有信息和功能。
指南 2.1：提供替代内容
这个指南要求开发人员为所有非文本内容提供文本或其他可访问的替代内容，以便于用户可以感知到页面上的所有信息。常见的非文本内容包括图像、音频、视频等等。
对于图像的替代内容，可以使用 alt 属性来进行描述，如下例所示：
<img src="logo.png" alt="My Website Logo">
对于视频、音频等媒体文件，可以使用 track 元素提供字幕和注释等替代形式，如下例所示：
<video src="movie.mp4" width="320" height="240" controls> <track src="chapters_en.vtt" kind="chapters" srclang="en" label="English"> </video>
指南 2.2：提供时间留给用户
这个指南要求开发人员确保用户可以掌握页面中的所有信息，并有足够的时间来完成相关任务。例如，在播放音频或视频时，允许用户暂停或重播，或者允许用户手动控制轮播图的速度。
指南 2.3：创建易于识别的内容
这个指南要求开发人员确保信息和功能易于识别，例如通过颜色（如：使用对比度）、区块组合、排版等等
指南三：操作性原则
操作性原则包括四条指南，以确保用户可以使用不同的输入设备完成任务。
指南 3.1：确保所有功能可以进行键盘操作
这个指南要求开发人员确保用户可以通过键盘和其他输入设备（如轮椅等）完成所有操作。这也意味着开发人员应该避免使用鼠标或其他仅仅面向某几类用户的输入设备。
指南 3.2：提供足够容易理解的界面
这个指南要求开发人员确保界面是简洁、清晰易懂的，所以页面中不建议过多过杂的元素干扰用户。
指南 3.3：允许用户避免操作错误
这个指南要求开发人员充分考虑到不同用户对于页面使用的不同，以减少用户犯错的可能性，以提高用户体验和满意度。
指南 3.4：供应清晰的指示
这个指南要求开发人员提供清晰明了的内容和指引，以便用户更好地理解页面和使用功能。例如，提供有意义的标签等等。
指南四：理解性原则
理解性原则包括三条指南，以确保页面的信息和操作易于理解。
指南 4.1：使语言易于理解
这个指南要求开发人员必须使用明确简单易懂的语言，特别是针对不同的用户，可以使用多语言而不是过于显式的技术语言。
<p>这种食品不适合过敏症患者。</p>
指南 4.2：提供可用的操作指南
这个指南要求开发人员在页面中提供提示和指南，以便用户更好地理解操作方式或知道该如何继续，例如，提示环节的跳转。
<nav>
<ul>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">我们的服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>指南 4.3：确保易于理解的内容呈现
这个指南要求开发人员在页面中使用简单明了的布局和内容呈现，以便用户更好地理解页面内容。
总结
WCAG 2.1 指南有助于开发人员创建更加友好的界面和系统，以便不同类型、不同背景的用户都可以更方便地使用网站和应用程序。希望本文对开发人员有所启示，能够在今后的开发中更加注意无障碍原则。
示例代码
以下是关于某些指南的一些示例代码，希望可以有所帮助：
-- -------------------- ---- -------
---- -- ---------- ---
---- -------------- ------- ------- ------
------ --------------- ----------- ------------ ---------
------ --------------------- --------------- ------------ ----------------
--------
---- -- ------------------ ---
-----
----
------ ---------------------------
------ -------------------------------
------ -----------------------------
-----
------
---- -- ----------- ---
--------------------
---- -- ------------- ---
-----
----
------ ---------------------------
------ -------------------------------
------ -----------------------------
-----
------
---- -- --------------- ---
---------
---------------
---------
-----------
---------------------------
----------
---------
-----------
--------------------------------
----------
---------
------------
----------------------------
----------
----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f80945f6b2d6eab30322d0