M

MLOG

中文

为前端开发者准备的网页无障碍 (a11y) 全面指南，涵盖为全球用户创建包容性和可访问网络体验的原则、技术和最佳实践。

网页无障碍 (a11y)：前端开发人员实用指南

网页无障碍（通常缩写为 a11y，其中 11 代表 'a' 和 'y' 之间的字母数量）是设计和开发网站及网络应用程序的一种实践，旨在让残障人士能够使用。这包括有视觉、听觉、运动、认知和语言障碍的个体。构建无障碍网站不仅仅是为了合规，更是为了给每个人创造包容和平等的数字体验，无论他们的能力或使用何种技术访问网络。这对于触及更广泛的受众也至关重要。例如，良好的颜色对比度有利于在明亮阳光下的用户，清晰的布局则有助于有认知障碍的用户或正在处理多任务的用户。

为什么网页无障碍如此重要？

优先考虑网页无障碍有几个令人信服的理由：

理解无障碍标准与指南

网页无障碍的主要标准是网页内容无障碍指南 (WCAG)，由万维网联盟 (W3C) 制定。WCAG 提供了一套可测试的成功标准，可用于评估网页内容的可访问性。WCAG 是国际公认的，并经常在世界各地的无障碍法律法规中被引用。

WCAG 围绕四个原则组织，通常被称为 POUR：

WCAG 有三个一致性级别：A、AA 和 AAA。A 级是无障碍性的最基本级别，而 AAA 级是最全面的。大多数组织的目标是达到 AA 级一致性，因为它在无障碍性和实用性之间提供了良好的平衡。许多法律法规要求达到 AA 级一致性。

前端开发人员的实用技巧

以下是前端开发人员可以用来提高其网站和 Web 应用程序可访问性的一些实用技巧：

1. 语义化 HTML

使用语义化 HTML 元素对于无障碍至关重要。语义化 HTML 为您的内容提供意义和结构，使辅助技术更容易理解和解释。不要对所有内容都使用通用的 <div> 和 <span> 元素，而应使用 HTML5 语义元素，例如：

示例：

<header>
  <h1>我的网站</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容在此...</p>
  </article>
</main>

<footer>
  <p>© 2023 我的网站</p>
</footer>

使用正确的标题级别（<h1> 到 <h6>）对于创建逻辑文档结构也至关重要。使用标题来组织您的内容，让用户更容易导航。<h1> 应用于页面的主标题，后续的标题应用于创建信息的层次结构。避免跳过标题级别（例如，从 <h2> 跳到 <h4>），因为这可能会让屏幕阅读器用户感到困惑。

2. 图像的替代文本

所有图像都应有意义的替代文本（alt text），用以描述图像的内容和功能。屏幕阅读器使用替代文本向无法看到图像的用户传达图像的信息。如果图像纯粹是装饰性的，不传达任何重要信息，则 alt 属性应设置为空字符串（alt=""）。

示例：

<img src="logo.png" alt="公司徽标">
<img src="decorative-pattern.png" alt="">

编写替代文本时，要做到描述性强且简洁。专注于传达图像提供的基本信息。避免使用“...的图像”或“...的图片”之类的短语，因为屏幕阅读器通常会宣告它是一个图像。

对于复杂的图像，如图表和图形，可以考虑在周围的文本中提供更详细的描述，或使用 <figure> 和 <figcaption> 元素。

3. 键盘可访问性

您网站上的所有交互元素都应能通过键盘访问。这对于无法使用鼠标或其他指针设备的用户至关重要。确保用户可以使用 Tab 键在您的网站中导航，并使用 Enter 或 Spacebar 键与元素进行交互。

注意页面上元素的焦点顺序。焦点顺序应遵循内容中逻辑和直观的路径。您可以使用 tabindex 属性来控制焦点顺序，但通常最好依赖 HTML 中元素的自然顺序。仅在需要纠正默认焦点顺序问题时才使用 tabindex。

提供视觉焦点指示器，以向用户显示当前哪个元素获得了焦点。默认的浏览器焦点指示器可能不够醒目，因此可以考虑使用 CSS 添加自己的样式。确保焦点指示器与背景有足够的对比度。

示例：

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

4. ARIA 属性

ARIA (Accessible Rich Internet Applications) 是一组可以添加到 HTML 元素中的属性，用以向辅助技术提供额外的语义信息。ARIA 属性可用于增强动态内容、复杂小部件和其他交互元素的可访问性。

一些常见的 ARIA 属性包括：

示例：

<button aria-label="关闭对话框" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">我的对话框</h2>
  <p>对话框内容在此...</p>
</div>

使用 ARIA 属性时，遵循 ARIA 的使用规则非常重要：

5. 颜色对比度

确保文本与其背景之间有足够的颜色对比度。颜色对比度不足会使有低视力或色盲的用户难以阅读文本。

WCAG 要求普通文本的对比度至少为 4.5:1，大号文本（18pt 或 14pt 粗体）的对比度至少为 3:1。您可以使用颜色对比度检查器来验证您的网站是否符合这些要求。有许多免费的在线工具可用，例如 WebAIM Contrast Checker。

示例：

/* CSS */
body {
  color: #333; /* 深灰色文本 */
  background-color: #fff; /* 白色背景 */
}

（此示例的对比度为 7:1，符合 WCAG 要求。）

避免仅使用颜色来传达信息。色盲用户可能无法区分不同的颜色。应使用额外的提示，如文本标签或图标，来强化颜色的含义。

6. 表单与标签

正确标记表单元素对于无障碍至关重要。使用 <label> 元素将文本标签与每个表单输入关联起来。<label> 元素的 for 属性应与相应输入元素的 id 属性相匹配。

示例：

<label for="name">姓名：</label>
<input type="text" id="name" name="name">

对于复杂的表单，可以考虑使用 <fieldset> 和 <legend> 元素来对相关的表单控件进行分组。这可以帮助用户理解每组控件的用途。

当用户在填写表单时出错，应提供清晰简洁的错误消息。错误消息应显示在相应的表单字段附近，并提供如何纠正错误的指导。

使用 required 属性来指示哪些表单字段是必填的。这可以帮助用户避免意外提交不完整的表单。

7. 多媒体无障碍

确保视频和音频录音等多媒体内容对残障用户是可访问的。为视频提供字幕，为音频录音提供文字记录。字幕应准确转录视频中的口语内容，包括任何重要的音效或背景噪音。

对于直播视频，可以考虑使用实时字幕服务。这些服务可以实时提供字幕，让有听力障碍的用户能够跟上内容。许多视频会议平台都提供内置的实时字幕功能。

为视频提供音频描述。音频描述通过旁白叙述视频的视觉内容，描述屏幕上发生的事情。音频描述对于盲人或低视力用户至关重要。

确保多媒体控件，如播放、暂停和音量控制，是可以通过键盘访问的。

8. 动态内容与更新

当您网站上的内容动态更新时，通知用户这些变化非常重要。这对于使用屏幕阅读器的用户尤其重要，因为他们可能不知道内容已经改变。

使用 ARIA live regions 向屏幕阅读器宣告动态更新。ARIA live regions 是页面上被指定接收更新的区域。当 live region 的内容发生变化时，屏幕阅读器会向用户宣告这些变化。使用 aria-live 属性来定义一个 live region。aria-atomic 和 aria-relevant 属性可用于微调屏幕阅读器宣告变化的方式。

示例：

<div aria-live="polite">
  <p id="status-message">加载中...</p>
</div>

<script>
  // 数据加载后更新状态消息
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

在这个例子中，aria-live="polite" 属性指示屏幕阅读器应该宣告对 <div> 元素内容的更改，但不应中断用户的当前任务。updateStatus() 函数更新 <p> 元素的内容，这将触发屏幕阅读器宣告新的状态消息。

9. 无障碍测试

定期对您的网站进行无障碍测试，以识别并修复任何问题。您可以使用多种工具和技术来进行无障碍测试。

浏览器之外的无障碍

虽然本指南主要关注浏览器环境下的网页无障碍，但重要的是要记住，无障碍性超越了网络。在其他数字领域也应考虑无障碍性，例如：

结论

网页无障碍是前端开发的一个重要方面。通过遵循本指南中概述的原则和技术，您可以为所有用户创造包容和可访问的网络体验，无论他们的能力如何。请记住，无障碍是一个持续的过程。定期测试您的网站并收集残障用户的反馈，以确保它随着时间的推移保持可访问性。通过优先考虑无障碍，您可以让网络成为一个对每个人都更具包容性和公平性的地方。

通过拥抱无障碍，您不仅是在遵守法规，更是在为每个人构建一个更好的网络，扩大您的影响力，并在全球范围内增强您的品牌声誉。