WCAG（Web Content Accessibility Guidelines，网络内容无障碍性指南）是一个由Web内容无障碍小组（WCAG WG）负责管理的无障碍性标准。随着时间的推移，WCAG也在不断更新和演变，跟随最新的WCAG标准，将对于前端开发人员和Web内容创建者有深远的意义。在本文中，我们将深入探讨WCAG标准的更新、变化以及如何根据这些变化来创建无障碍性内容。
WCAG 2.2简介
WCAG 2.2于2018年6月更新，是最新的无障碍性标准，根据WCAG WG的官方网站，WCAG 2.2的目标是“提供一些新的指南，强调移动设备、低视力和认知障碍用户的重要性，并更好地覆盖现代Web技术”。
WCAG 2.2的新指南都是基于WCAG 2.1的，其中包括新的SC（Success Criterion，成功标准），也包括更新的附录和指南。除了包含WCAG 2.1的所有成功标准，WCAG 2.2还新增了9个成功标准，涵盖移动设备和低视力用户需要的更多的无障碍性支持。
WCAG 2.2的变化
下面是WCAG 2.2相对于WCAG 2.1的主要变化：
- 包含9个新的成功标准，其中涵盖了移动端用户和低视力用户的更多需求。
- 更新了附录和指南，使其更适合现代Web技术。
- 强调了移动设备和低视力用户的重要性。
- 改进了对认知障碍用户的支持。
与WCAG 2.1相比，WCAG 2.2的变化虽然不大，但是这些变化将对于无障碍性Web内容的创建者和前端开发人员来说也具有很强的指导意义。
WCAG 2.2成功标准
下面是WCAG 2.2新增的9个成功标准：
1.3.7 静态内容闪烁（Level AAA）
静态内容闪烁容易引起的癫痫发作。在WCAG 2.2中，要求所有页面元素中的任何静态内容元素或区域不应该闪烁超过三次每秒，并且如果闪烁在页面中保持一个可控的时间段。
示例代码：
.blink {
animation: blink 1s steps(3) infinite;
}
@keyframes blink {
50% {
visibility: hidden;
}
}1.4.11 静音（Level AA）
视听媒体应该能够被暂停、停止、隐藏等，WCAG 2.2要求静音状态下的媒体元素（包括音频和视频）不应该自动播放。此标准将帮助用户控制媒体，并避免了对有听力障碍用户有影响的情况发生。
示例代码：
<video autoplay muted loop>
<source src="video.mp4">
</video>1.4.12 视频字幕（Level AA）
WCAG 2.2要求所有在线视频应该包含字幕。这样低视力或聋人用户可以通过视觉或听觉方式理解视频的内容。
示例代码：
<video controls loop>
<source src="video.mp4">
<track label="English" kind="subtitles" srclang="en" src="video.en.vtt">
<track label="Español" kind="subtitles" srclang="es" src="video.es.vtt">
</video>1.4.13 禁用自动填充（Level AA）
禁用自动填充防止了浏览器自动填充用户输入的字段。如果用户输入不完整或不正确，他们可以更容易地检测并更正输入值。
示例代码：
-- -------------------- ---- -------
----- ----------
-------
---------
------ ----------- --------------- -------------------
--------
-------
---------
------ --------------- --------------- -------------------
--------
------ ------------- ---------------
-------1.4.14 无声音频描述（Level AAA）
对于有听力障碍的用户，WCAG 2.2要求所有内容、视觉效果和音频元素都应该有描述性文本。无声音频描述是一种文字形式的描述，使用者可以配合音频元素进行理解。
示例代码：
<audio controls>
<source src="music.mp3">
<track kind="description" src="music.desc.vtt">
</audio>2.1.4 聚焦（Level A）
焦点在切换时，要求所有元素都应该表明当前获得了焦点，这是一个很基本也很方便的用户体验强化操作。
示例代码：
button:focus {
outline: blue dotted 2px;
}2.5.7 改变输入目标大小（Level AAA）
WCAG 2.2要求所有输入元素都可以通过更改大小以改善易对其的性质，使得选择正确的目标变得更加容易。
示例代码：
button {
font-size: 150%;
padding: 0.5em 1em;
}2.5.8 扩展有效的点击区域（Level AA）
有效的点击区域更大，可以方便用户的点击操作，也可以保证最佳体验。
示例代码：
button {
padding: 1em;
margin: -1em;
} 2.5.9 位置调整（Level AAA）
位置调整提供了改善可访问性和可操作性的的方式。例如，对于菜单按钮，其位置应该容易到达。
示例代码：
nav {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
}WCAG 2.2的应用
在以下方面，WCAG 2.2可以对Web内容创建者和前端开发人员产生深远的影响：
- 每个设计阶段都应该考虑无障碍性需求。
- 创建无障碍内容时，应该根据WCAG 2.2的标准进行评估，以确保其具有良好的无障碍性。
- 应该在制作过程中保持文档可编辑性。
- 在制作过程中应该编写高质量的代码，这样可以极大地提高其可访问性和可用性，并且减少未来的无障碍性问题。
结论
WCAG 2.2是一个非常有用的无障碍性标准，这一标准的应用可以在许多方面帮助Web内容创建者和前端开发人员轻松创建无障碍性内容。要遵循WCAG 2.2标准，我们应该在每个设计阶段都考虑无障碍性需求，目标是为所有用户提供更加公平的访问。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f6c272e7021665efd87ea