M

MLOG

中文

掌握 ARIA 实时区域，增强动态内容的网络无障碍访问。学习如何实施礼貌和断言公告，最佳实践，并避免全球包容性用户体验的陷阱。

实时区域：掌握动态内容公告，实现全球无障碍访问

在我们互联的数字世界中，Web 应用程序不再是静态页面。它们是动态的、交互式的环境，可以实时更新、响应用户输入并无缝获取新信息。虽然这种动态性丰富了许多人的用户体验，但它常常给依赖辅助技术（如屏幕阅读器）的个人带来了巨大的障碍。试想一下，一个购物车更新总额，一个电子邮件通知弹出，或者一个表单实时验证输入——对于屏幕阅读器用户来说，这些关键的变化可能会被忽视，从而导致挫败感、错误或无法完成任务。

这正是 ARIA 实时区域变得不可或缺的地方。实时区域是一个强大的 WAI-ARIA（Web 无障碍倡议 - 可访问的富互联网应用程序）规范，旨在弥合动态 Web 内容和辅助技术之间的差距。它们为 Web 开发人员提供了一种机制，可以明确地通知屏幕阅读器页面上的内容更改，确保用户及时接收相关公告，而无需手动刷新或浏览页面。

对于全球受众而言，实时区域的重要性超越了纯粹的技术实现。它体现了数字包容性的原则，确保来自不同背景、能力和地点的人们可以平等地访问和交互 Web 内容。无论是某人在东京使用屏幕阅读器，在柏林使用盲文显示器，还是在波哥大使用语音输入导航，实施良好的实时区域都能保证一致和公平的体验。

动态 Web：对传统无障碍访问的挑战

历史上，Web 内容基本上是静态的。页面加载后，其内容保持不变。屏幕阅读器旨在解释这个静态 DOM（文档对象模型）并线性呈现它。然而，现代 Web 开发，由 JavaScript 框架和 API 驱动，引入了一个范式转变：

如果没有一种机制来指示这些更改，屏幕阅读器通常仍然无法感知。用户可能填写一个表单，单击提交，并收到一个视觉上显示但从未被播报的错误消息，这让他们感到困惑，无法继续。或者，他们可能会错过协作工具中一条关键的聊天消息。这种沉默的失败导致了糟糕的用户体验，并从根本上破坏了无障碍性。

介绍 ARIA 实时区域：解决方案

ARIA 实时区域通过允许开发人员将网页的特定区域指定为“实时”来解决此挑战。当这些指定区域内的内容发生变化时，辅助技术会收到指令来监视这些变化并将其告知用户。这会自动发生，无需用户手动关注更新的内容。

核心属性：aria-live

用于定义实时区域的主要属性是aria-live。它可以采用三个值之一，指示公告的紧急程度和中断级别：

1. aria-live="polite"

这是最常用且通常首选的值。当aria-live="polite"应用于某个元素时，屏幕阅读器将在用户空闲或暂停当前任务时播报其内容的更改。它不会中断用户当前的阅读或交互。这对于非关键、信息性更新来说是理想的。

aria-live="polite"的使用案例：

示例（礼貌）：

<div aria-live="polite" id="cart-status">您的购物车是空的。</div>

<!-- 稍后，当通过 JavaScript 添加一个项目时 -->
<script>
  document.getElementById('cart-status').textContent = '您的购物车中有 1 个项目。总计：$25.00';
</script>

在此示例中，一旦用户完成当前操作（例如键入或导航），屏幕阅读器将礼貌地播报“您的购物车中有 1 个项目。总计：$25.00”。

2. aria-live="assertive"

此值表示紧急且关键的更改。当使用aria-live="assertive"时，屏幕阅读器将中断用户当前的任务或公告，以立即传达新内容。这应该谨慎使用，仅用于绝对需要立即关注的信息。

aria-live="assertive"的使用案例：

示例（断言）：

<div aria-live="assertive" id="error-message" style="color: red;"></div>

<!-- 稍后，当表单验证失败时 -->
<script>
  document.getElementById('error-message').textContent = '请输入有效的电子邮件地址。';
</script>

在这里，屏幕阅读器将立即中断它正在执行的任何操作，以播报“请输入有效的电子邮件地址。” 这确保用户立即意识到该问题。

3. aria-live="off"

这是未指定为实时区域的元素的默认值。这意味着对该元素内内容的更改不会被屏幕阅读器播报，除非焦点被明确移动到它们。虽然您很少需要明确设置aria-live="off"（因为它就是默认值），但在特定情况下，它可用于覆盖继承的实时区域设置或暂时禁用内容部分的公告。

实时区域角色属性

除了aria-live之外，ARIA 还提供了特定的role属性，这些属性隐式设置了aria-live和其他属性，从而提供了语义含义，并且通常能更好地支持跨浏览器/屏幕阅读器。通常，应尽可能使用这些角色。

1. role="status"

status实时区域隐式为aria-live="polite"和aria-atomic="true"。它专为非交互式状态消息而设计，这些消息不关键。更改时，将播报该区域的全部内容。

使用案例：

示例：

<div role="status" id="confirmation-message"></div>

<!-- 成功提交表单后 -->
<script>
  document.getElementById('confirmation-message').textContent = '您的订单已成功下达！';
</script>

2. role="alert"

alert实时区域隐式为aria-live="assertive"和aria-atomic="true"。它适用于重要、时间敏感且通常是关键的消息，这些消息需要立即引起用户的注意。像实际警报一样，它会中断用户。

使用案例：

示例：

<div role="alert" id="form-error" style="color: red;"></div>

<!-- 当必填字段留空时 -->
<script>
  document.getElementById('form-error').textContent = '请填写所有必填字段。';
</script>

3. role="log"

log实时区域隐式为aria-live="polite"和aria-relevant="additions"。它专为添加到按时间顺序排列的日志中的消息而设计，例如聊天记录或事件日志。新条目被播报，不会中断用户的流程，并且通常会维护先前条目的上下文。

使用案例：

示例：

<div role="log" id="chat-window" style="height: 200px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px;">
  <p><strong>用户 A：</strong>大家好！</p>
</div>

<!-- 当收到新消息时 -->
<script>
  const chatWindow = document.getElementById('chat-window');
  const newMessage = document.createElement('p');
  newMessage.innerHTML = '<strong>用户 B：</strong>嗨，用户 A！';
  chatWindow.appendChild(newMessage);
  chatWindow.scrollTop = chatWindow.scrollHeight; // 滚动到新消息
</script>

屏幕阅读器将播报“用户 B：嗨，用户 A！”当新消息出现时，而不会重新播报整个聊天记录。

4. role="marquee"

隐式aria-live="off"。此角色表示频繁更新但不足以中断用户的重要内容。想想股票行情或滚动新闻标题。由于其破坏性性质，并且通常无法访问滚动，因此一般不鼓励使用role="marquee"来实现无障碍访问，除非使用暂停/播放控件仔细实施。

5. role="timer"

默认情况下，隐式aria-live="off"，但建议为aria-live="polite"设置有用的公告（如果计时器的值至关重要）。它表示一个频繁更新的数值计数器，例如倒计时时钟。开发人员应该考虑计时器变化的频率以及播报每次变化有多重要。

使用案例：

示例（礼貌计时器）：

<div role="timer" aria-live="polite" id="countdown">剩余时间：05:00</div>

<!-- 每秒更新一次，屏幕阅读器以礼貌的间隔播报 -->
<script>
  let seconds = 300;
  setInterval(() => {
    seconds--;
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    document.getElementById('countdown').textContent = `剩余时间：${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
  }, 1000);
</script>

粒度和控制：aria-atomic和aria-relevant

虽然aria-live指示紧急程度，但aria-atomic和aria-relevant提供了对实时区域内实际播报内容的细粒度控制。

aria-atomic="true" vs. false（默认）

此属性告诉屏幕阅读器是播报整个实时区域的内容 (atomic = true)，还是仅播报已更改的特定部分 (atomic = false，默认行为)。它的默认值为false，但对于role="status"和role="alert"，它隐式为true。

示例（aria-atomic）：

考虑一个带有文本的进度条：

<div aria-live="polite" aria-atomic="true" id="upload-status">正在上传文件：<span>0%</span></div>

<!-- 随着进度更新 -->
<script>
  let progress = 0;
  const statusDiv = document.getElementById('upload-status');
  const progressSpan = statusDiv.querySelector('span');
  const interval = setInterval(() => {
    progress += 10;
    progressSpan.textContent = `${progress}%`;
    if (progress >= 100) {
      clearInterval(interval);
      statusDiv.textContent = '上传完成。';
    }
  }, 1000);
</script>

使用aria-atomic="true"，当百分比从“0%”变为“10%”时，屏幕阅读器将播报“正在上传文件：10%”。如果aria-atomic为false（默认），它可能只会播报“10%”，这缺乏上下文。

aria-relevant：指定哪些更改重要

此属性定义实时区域内的哪种类型的更改被认为对公告“相关”。它采用一个或多个以空格分隔的值：

aria-relevant的默认值为text additions。对于role="log"，它默认为additions。

示例（aria-relevant）：

考虑一个显示多个股票价格的股票行情。如果您只想播报新股票，而不是现有股票价格的更改：

<div aria-live="polite" aria-relevant="additions" id="stock-ticker">
  <p>AAPL：150.00 美元</p>
  <p>GOOG：2500.00 美元</p>
</div>

<!-- 当添加新股票时 -->
<script>
  const ticker = document.getElementById('stock-ticker');
  const newStock = document.createElement('p');
  newStock.textContent = 'MSFT：300.00 美元';
  ticker.appendChild(newStock);

  // 如果现有股票价格发生变化，则不会播报，因为 aria-relevant="additions"
  // ticker.querySelector('p').textContent = 'AAPL: $150.50'; // 此更改不会被播报
</script>

实施实时区域的最佳实践

有效实施实时区域需要深思熟虑，而不仅仅是技术知识。遵守这些最佳实践将确保在全球范围内获得真正的包容性体验：

1. 保持内容简洁明了

屏幕阅读器用户会串行处理信息。冗长、冗余的公告可能会造成干扰和挫败感。无论用户的母语或认知负荷如何，都要精心编写简短、切题且易于理解的消息。避免使用行话或复杂的句子结构。

2. 避免过度播报

抵制将每次动态更改都变成实时区域的诱惑。过度使用，尤其是aria-live="assertive"，可能会导致不断出现公告，从而使应用程序无法使用。专注于直接影响用户理解当前状态或完成任务的关键更新。

3. 战略性地放置实时区域

实时区域元素本身应从初始页面加载时就存在于 DOM 中，即使它是空的。动态添加或删除aria-live属性或实时区域元素本身在不同的屏幕阅读器和浏览器中可能不可靠。一个常见的模式是使用一个空的div，并带有aria-live属性，随时准备接收内容。

4. 确保焦点管理

实时区域播报更改，但它们不会自动移动焦点。对于动态出现的交互元素（例如，警报消息上的“关闭”按钮或新加载的表单字段），您可能仍然需要以编程方式管理焦点，以有效地引导用户。

5. 考虑全球影响：语言和阅读速度

6. 优雅降级和冗余

虽然实时区域功能强大，但请考虑是否有相同信息的替代的非视觉提示，尤其是对于可能未使用屏幕阅读器或其辅助技术可能无法完全支持 ARIA 的用户。例如，除了实时区域公告之外，请确保也存在视觉指示器，例如颜色更改、图标或清晰的文本标签。

7. 测试、测试，再测试

实时区域的行为在不同的屏幕阅读器（NVDA、JAWS、VoiceOver、TalkBack）和浏览器（Chrome、Firefox、Safari、Edge）组合中可能会有所不同。使用真正的辅助技术用户或经验丰富的测试人员进行彻底的测试对于确保您的公告按预期被感知至关重要。

常见陷阱及如何避免

即使出于好意，实时区域也可能被误用，导致辅助技术用户感到沮丧。以下是常见的陷阱：

1. 误用aria-live="assertive"

最常见的错误是将assertive用于非关键信息。用“欢迎回来！”消息或小的 UI 更新来打断用户，就像一个网站不断弹出不可跳过的广告一样。这具有高度破坏性，并且可能导致用户放弃您的网站。保留assertive用于真正紧急且可操作的信息。

2. 实时区域重叠

拥有多个assertive实时区域，或者更新过于频繁的polite区域，可能会导致令人困惑的公告混乱。目标是为一般状态更新提供单个主要实时区域，并且仅在真正需要时提供特定、上下文相关的实时区域（例如，用于表单验证的alert）。

3. 动态添加/删除aria-live属性

如前所述，在呈现元素后更改其上的aria-live属性可能不可靠。使用适当的aria-live（或role）属性创建您的实时区域元素，这些属性已在 HTML 中就位，即使它们最初不包含任何内容。然后，根据需要更新它们的textContent或添加/删除子元素。

4. 初始内容公告问题

如果实时区域在页面最初加载时包含内容，除非在之后明确更新，否则通常不会将该内容播报为“更改”。实时区域用于*动态更新*。如果您希望播报初始内容，请确保它作为页面主要内容流的一部分播报，或者后续更新触发实时区域。

5. 在全球范围内测试不足

一个在 Windows 上使用 NVDA 完美运行的实时区域在 iOS 上的 VoiceOver 或 JAWS 上的行为可能有所不同。此外，屏幕阅读器上的不同语言设置会影响实时区域内容的播报和理解。始终使用一系列辅助技术进行测试，如果可能，与来自不同语言背景的用户一起测试，以捕捉意外行为。

高级场景和全球注意事项

单页应用程序 (SPA) 和路由

在 SPA 中，不会发生传统的页面重新加载。当用户在虚拟页面之间导航时，屏幕阅读器通常不会播报新页面标题或主要内容。这是一个常见的无障碍访问挑战，实时区域可以帮助缓解，通常与焦点管理和 ARIArole="main"或role="document"结合使用。

策略：为路由公告创建一个实时区域。当加载新视图时，使用新的页面标题或新内容的摘要更新此区域。此外，确保以编程方式将焦点移动到新视图的主要标题或逻辑起始点。

示例 (SPA 路由公告)：

<div aria-live="polite" aria-atomic="true" id="route-announcer" class="sr-only"></div>

<!-- 在您的路由逻辑中 -->
<script>
  function navigateTo(pageTitle, mainContentId) {
    document.getElementById('route-announcer').textContent = `导航到 ${pageTitle} 页面。`;
    // ... 加载新内容的逻辑 ...
    const mainContent = document.getElementById(mainContentId);
    if (mainContent) {
      mainContent.setAttribute('tabindex', '-1');
      mainContent.focus();
    }
  }

  // 示例用法：
  // navigateTo('产品详情', 'product-details-content');
</script>

sr-only类（通常是position: absolute; left: -9999px;等）在视觉上隐藏 div，但保持其可供屏幕阅读器访问。

具有实时验证的复杂表单

表单是实时区域的主要候选者，尤其是在没有完整页面提交的情况下立即进行验证时。当用户键入时，关于有效性的即时反馈可以大大提高可用性。

策略：使用role="alert"来处理关键、即时错误（例如，“电子邮件格式无效”）。对于不太关键或信息丰富的反馈（例如，“密码强度：强”），与输入字段通过aria-describedby链接的role="status"或aria-live="polite"区域可能有效。

具有动态排序/过滤的数据表

当用户对数据表进行排序或过滤时，视觉排列会发生变化。实时区域可以播报新的排序顺序或过滤结果的数量。

策略：在排序或过滤操作后，使用“Table sorted by 'Product Name' in ascending order.”或“现在显示 100 个结果中的 25 个。”等消息更新role="status"区域。

实时通知（聊天、新闻提要）

如role="log"中所涵盖的那样，这些应用程序受益于实时区域，可以播报新内容，而无需强制用户不断检查或刷新。

策略：为会话或按时间顺序排列的内容实施role="log"。确保将新添加的内容附加到日志的末尾，并且容器根据需要管理其滚动位置。

多语言内容和屏幕阅读器语言设置

对于全球应用程序，屏幕阅读器会尝试根据lang属性发音内容。如果您的实时区域使用不同语言的内容进行动态更新，请确保实时区域元素（或其内容）的lang属性已相应更新。

示例：

<div aria-live="polite" id="localized-message">欢迎！</div>

<!-- 稍后，使用法语内容更新 -->
<script>
  const messageDiv = document.getElementById('localized-message');
  messageDiv.setAttribute('lang', 'fr');
  messageDiv.textContent = 'Bienvenue！';
</script>

如果没有lang="fr"，为英语配置的屏幕阅读器可能会错误地发音“Bienvenue！”。

警报和通知的文化背景

警报的紧迫性和措辞可能在不同文化中被不同地感知。直接、断言的消息在一个地区可能被视为有帮助，但在另一个地区可能被视为过于激进。尽可能根据文化背景调整您的assertive公告的语气，即使在简洁的约束下也是如此。

测试您的实时区域以实现全球无障碍访问

测试不仅仅是最后一步；这是一个持续的过程。对于实时区域，这一点尤其重要，因为它们的行为高度依赖于屏幕阅读器-浏览器组合。

1. 使用屏幕阅读器进行手动测试

这是最关键的一步。使用您的目标受众常用的屏幕阅读器。在全球范围内，这可能包括：

测试场景：

2. 自动化无障碍访问工具

Google Lighthouse、axe-core 和 Wave 等工具可以帮助识别常见的 ARIA 实施错误，但它们无法完全验证实时区域的*行为*。它们擅长捕捉结构问题（例如，无效的 ARIA 属性），但不能验证是否实际发生了公告或措辞是否正确。

3. 与不同个人进行用户测试

最终测试是与真实用户一起进行，尤其是那些经常使用辅助技术的用户。让来自不同地区和语言背景的用户参与进来，以获得关于您的实时区域如何被感知的宝贵见解，以及它们是否真正提高了可用性。

4. 跨浏览器和跨设备测试

确保您的实时区域在主要浏览器（Chrome、Firefox、Safari、Edge）和设备（桌面、移动设备）中一致运行。某些浏览器/屏幕阅读器组合在处理实时区域更新方面可能存在细微差异。

实时区域和 Web 无障碍访问的未来

WAI-ARIA 规范正在不断发展，新版本解决了新兴的 Web 模式并改进了现有模式。随着 Web 开发框架变得越来越复杂，它们也在集成无障碍访问功能，有时会抽象掉 ARIA 属性的直接使用。但是，了解实时区域的根本原则对于开发人员来说仍然至关重要，以便针对特定需求进行故障排除和自定义。

对更具包容性的 Web 的推动只会越来越强。全球各国政府正在制定更严格的无障碍访问法律，企业也认识到接触所有潜在用户的巨大价值。实时区域是这项工作中的基本工具，能够使更丰富、更具交互性的体验对每个人（无论身在何处）来说都易于访问。

结论

动态内容是现代 Web 的核心，但如果不仔细考虑无障碍访问，它可能会将全球在线社区的很大一部分人排除在外。ARIA 实时区域提供了一种强大且标准化的机制，以确保实时更新不仅被某些用户看到，而且被所有人（包括依赖屏幕阅读器和其他辅助技术的人）播报和理解。

通过明智地应用aria-live（及其polite和assertive值），利用语义角色（如status和alert），并通过aria-atomic和aria-relevant仔细控制公告，开发人员可以创建不仅具有视觉吸引力而且具有深远包容性的 Web 体验。请记住，有效的实施不仅仅是添加属性；它需要深入了解用户需求、仔细规划、清晰的消息传递以及在不同的用户环境和辅助技术中进行严格的测试。

拥抱 ARIA 实时区域不仅仅是为了合规性；它是为了构建一个真正服务于人类的 Web，为每个人促进平等地访问信息和交互，无论他们的能力或在地球上的位置如何。让我们致力于使我们的动态 Web 真正对所有人都是动态的。

实时区域：掌握动态内容公告，实现全球无障碍访问 | MLOG