随着人们对包容性和无障碍设计的需求不断增长，无障碍技术在 Web 开发中变得越来越重要。WCAG（Web Content Accessibility Guidelines）是一个广泛接受的国际标准，用于帮助开发者创建可访问的 Web 内容。
2018 年 6 月，WCAG2.1 发布，引入了一些新的准则和成功标准。并于 2021 年 6 月发布了 WCAG2.2（草案），WCAG2.2 是 WCAG2.1 的更新版本，引入了一些新的准则和成功标准。本文将向读者介绍 WCAG2.2 中的一些新要求，以及如何将这些要求应用于现有的 Web 内容。
WCAG2.2 的新要求
WCAG2.2 引入了 9 个新的成功标准和一些新的建议。以下是一些新的 WCAG2.2 要求：
静态内容的语言指定
这个要求要求开发者确保静态内容（如 HTML 文件）中指定了正确的语言。这可以帮助屏幕阅读器和其他辅助技术更好地理解页面内容。可以使用 HTML lang 属性来指定要使用的语言，例如：
-- -------------------- ---- ------- ----- ------------- ------ ----------------- ------- ------ ----------- ------------- ------- -------展开代码
无障碍的自动生成标签
这个要求要求开发者确保页面中的自动生成标签（如表单标签）能够被屏幕阅读器和其他辅助技术正确地识别并描述。可以使用 aria-label 属性来指定标签的描述，例如：
<form> <label for="name">姓名</label> <input type="text" id="name" aria-label="姓名"> </form>
视频中的一致性字幕
这个要求要求开发者确保视频中包含的字幕与音频内容保持一致。这可以帮助听力受损的用户更好地理解视频内容。可以使用 WEBVTT 格式来添加字幕，例如：
-- -------------------- ---- ------- ------ - ------------ --- ------------ ------- - ------------ --- ------------ ---------- ---- -- -- ------- ------ - ------------ --- ------------ ------- - ------------ --- ------------ ---------- ------ --- ---------展开代码
更好的键盘访问性
这个要求要求开发者确保页面元素能够使用键盘访问，以便为无法使用鼠标的用户提供辅助功能。可以使用 tabindex 属性来指定元素可以使用 tab 键访问，例如：
<div tabindex="0">可以使用 tab 键访问</div>
如何实现 WCAG2.2 要求
WCAG2.2 中的新要求与 WCAG2.1 中的要求非常相似，因此可以使用类似的方法来实现这些要求。以下是一些实现 WCAG2.2 要求的最佳实践：
确保正确的语言指定
在编写 HTML 时，应该始终使用 lang 属性来指定正确的语言。这有助于屏幕阅读器和其他辅助技术更好地识别页面内容。您可以使用下面的方法来指定语言：
<html lang="zh-CN">
请确保将正确的语言代码替换为所需的语言。
处理自动生成标签
自动生成标签（如表单标签）可能对屏幕阅读器和其他辅助技术不可访问。为了解决这个问题，您可以使用 aria-label 属性来指定标签的描述。例如：
<form> <label for="name">姓名</label> <input type="text" id="name" aria-label="姓名"> </form>
在这个示例中，aria-label 属性指定输入框的标签为“姓名”，而不是原始的“label”标签。
添加字幕
为了确保视频字幕与音频内容一致，您可以使用 WEBVTT 格式添加字幕。以下是一个示例：
-- -------------------- ---- ------- ------ - ------------ --- ------------ ------- - ------------ --- ------------ ---------- ---- -- -- ------- ------ - ------------ --- ------------ ------- - ------------ --- ------------ ---------- ------ --- ---------展开代码
在这个示例中，WEBVTT 格式用于添加字幕。您可以使用任何文本编辑器来创建 WEBVTT 文件。
确保键盘可访问性
为了确保页面元素能够在没有鼠标的情况下使用键盘访问，您可以使用 tabindex 属性。例如：
<div tabindex="0">可以使用 tab 键访问</div>
在这个示例中，tabindex 属性用于将 div 元素设为可用于键盘访问。
结论
虽然 WCAG2.2 中引入了一些新的要求，但它们与 WCAG2.1 中的要求非常相似。通过使用类似的方法来实现这些要求，您可以轻松地创建可访问的 Web 内容，并为听力受损、视力受损等特定人群提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67298e0a2e7021665e24e619
