Web 无障碍内容指的是无论使用者有无残障，都可以方便地浏览网页内容并获取信息的能力。为使内容达到无障碍标准，需要制定一定的标准和指南。ATAG 是一组关于制作 Web 无障碍内容的指南，本文介绍 ATAG、其相关原则、实践以及应用示例。
ATAG 是什么
ATAG 是制作 Web 无障碍内容的标准指导方针，它的全称是“Authoring Tool Accessibility Guidelines”（Web 作者工具无障碍性指南）。ATAG 分为两个级别：A 和 AA。
ATAG-A
ATAG-A 是指将 Web 无障碍标准应用于基本网页的制作流程。根据 ATAG-A，Web 开发者需要按照指南中的原则和技术提高 Web 站点的无障碍性，并增强 Web 作者工具的功能，以方便 Web 开发者制作无障碍的网站。ATAG-A 中包含以下要点：
- 人机友好性
- 报告生成
- 可访问性信息与交流
- 易用性
- 制作无障碍内容
ATAG-AA
ATAG-AA 在 ATAG 基础上增加了更多的国际化和无障碍的要求。ATAG-AA 中强调了更多的无障碍和国际化的规范，并要求 Web 开发者遵循原则和技术以帮助使用不同语言和文化背景的人们更容易地理解 Web 网站。ATAG-AA 包含以下要点：
- Web 无障碍性政策
- 无障碍性原则的支持
- 国际化文化支持
- 辅助交互支持
实践 ATAG
实践 ATAG 指南，让我们更好地理解 Web 无障碍内容的原理，以及如何制作符合标准的无障碍内容。
简单明了的编码
编写清晰、简洁、注释清晰的代码对被残障人访问非常重要。使用明了的语言编写清晰的代码可以有助于屏幕阅读器识别和解释网页内容，从而帮助被残障人访问页面内容。
准确的 HTML 和 CSS
使用准确的 HTML 和 CSS 可以让网站更易于访问、易于理解，且具有较高的可访问性。正确的 HTML 和 CSS 代码可以帮助屏幕阅读器正确地解释网站中包含的数据和信息。让网站的内容更精准、更清晰地传递给使用者。
规范的图片
规范的图片可以在各个视觉层次上为非残障人士创造视觉效果，增强使用者的理解和体验。当被残障使用者访问时，图片可以通过屏幕阅读器或其他辅助设备来呈现。
表单的支持
表单可帮助用户操作 Web 网站，但对于被残障人使用这些表单更为困难。在支持这些表单时，开发者需要注意以下事项：
- 要使用清晰的标签和说明文本。
- 提供指示和帮助来帮助用户输入数据。
- 确保表单可以利用浏览器自带工具，如自动填充。
ATAG 的应用示例
下面我们通过实际应用案例，了解 ATAG 的详细实现。
示例 1：使用 HTML5 中的无障碍属性
-- -------------------- ---- -------
--------
--- ---------------------------
-----
----
------ ------------------------------
------ --------------------------------
------ ----------------------------------
-----
------
---------在上面的代码块中，我们使用了 HTML5 中的多个无障碍属性，如 aria-labelledby 和 aria-label。这些属性告诉屏幕阅读器和其他辅助设备这段内容的作用和含义。
示例 2：提供包含无障碍内容的视频
<video id="my-video" controls poster="my-video-poster.jpg"> <source src="my-video.mp4" type="video/mp4"> <source src="my-video.webm" type="video/webm"> <track kind="captions" src="my-video-caption.vtt" srclang="en" label="English captions"> </video>
在上面的代码块中，我们通过使用 track 元素、指定 kind="captions" 以及列出 srclang 和 label 信息，将无障碍内容的媒体文件添加到网页中。
结论
Web 无障碍内容对于所有使用者都是十分重要的。通过学习 ATAG，我们可以更好地了解无障碍内容的原则，并实践无障碍内容制作的技术，以创造更加易于访问和使用的 Web 站点。当你开发网站的时候，使用 ATAG 可以使你的网站充满无障碍性，以被更多的不同背景的用户所访问。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677713b06d66e0f9aa2dbfa6