优化ARIA实时区域：避免屏幕阅读器重复朗读动态内容

理解ARIA实时区域与屏幕阅读器行为

在构建聊天应用或任何需要持续更新内容的界面时，为了确保无障碍性，我们通常会使用aria（accessible rich internet applications）的实时区域（live regions）。role="log"是一种常见的实时区域角色，它指示屏幕阅读器关注该区域的内容变化，并向用户播报这些更新，例如聊天消息、事件日志等。

考虑以下HTML结构：

    

        

            
Row 1
            
Row 2
        
    

在这个例子中，id="messages"的div被指定为role="log"，理论上，当其内部内容更新时，屏幕阅读器应只播报新增或变更的部分。

动态内容更新的常见陷阱

然而，一个常见的问题是，当开发者为了更新内容而选择清空父容器并重新填充时，屏幕阅读器会重新朗读所有内容，而非仅仅是新增部分。例如，以下JavaScript操作：

// 假设这是在更新消息前执行的操作
document.getElementById("canvas").innerHTML = ""; 
// 之后再重新构建并添加所有消息

尽管我们期望屏幕阅读器能“记住”之前的状态，并仅播报新内容，但实际情况并非如此。即使尝试缓存元素再重新添加，如：

let cache = document.getElementById("messages");
document.getElementById("canvas").innerHTML = "";
document.getElementById("canvas").append(cache);
// 之后再向 cache 中添加新消息

这种做法同样会导致屏幕阅读器重新处理整个cache元素的内容，因为它被从DOM中移除后又重新添加，对于屏幕阅读器而言，这相当于一个全新的内容区域。

屏幕阅读器的工作原理

屏幕阅读器及其与ARIA实时区域的交互机制，主要依赖于对DOM树变化的监控。当一个元素被完全移除并重新插入，或者其innerHTML被完全替换时，即使最终呈现的文本内容与之前相同，屏幕阅读器也会将其视为一个全新的内容块。这是因为屏幕阅读器并非执行精确的文本差异分析，而是更关注DOM结构层面的变化。

设想一下，如果屏幕阅读器需要精确分析文本差异，那么在处理诸如“It was cool”变为“It was cold”的场景时，它应该只播报“ld”。但这种粒度的分析非常复杂，且在不同上下文下，用户期望的播报行为也可能不同（是播报整个句子，还是只播报变化的部分？）。为了保持行为的一致性和可预测性，屏幕阅读器通常会遵循更简单的原则：DOM结构发生显著变化（如元素被移除再添加，或内容被完全替换）时，视为新内容进行播报。

最佳实践：追加而非替换

解决屏幕阅读器重复朗读问题的核心原则是：不要触碰或替换已有的、不需要重复朗读的内容。当需要更新实时区域时，应该只追加新的内容，而不是清空整个区域再重新构建。

错误的示例（导致重复朗读）：

玫瑰克隆工具

AI图文笔记一键生成创作并自动发布助手

下载

// 假设 #messages 已经有内容
function updateMessagesIncorrect() {
    const messagesContainer = document.getElementById("messages");
    // 清空所有旧消息
    messagesContainer.innerHTML = ''; 

    // 添加新消息（包括旧消息和新消息）
    const newUl = document.createElement('ul');
    newUl.id = 'test';

    const row1 = document.createElement('li');
    row1.textContent = 'Row 1';
    newUl.appendChild(row1);

    const row2 = document.createElement('li');
    row2.textContent = 'Row 2';
    newUl.appendChild(row2);

    const newRow = document.createElement('li');
    newRow.textContent = 'New Row 3';
    newUl.appendChild(newRow);

    messagesContainer.appendChild(newUl); // 屏幕阅读器会重新朗读所有三行
}

正确的示例（只朗读新内容）：

// 初始设置
// 

//     

//         
Row 1
//         
Row 2
//     
// 

function updateMessagesCorrect(newMessageText) {
    const messagesList = document.getElementById("test"); // 获取 ul 元素

    // 创建新的列表项
    const newRow = document.createElement('li');
    newRow.textContent = newMessageText;

    // 只追加新的列表项
    messagesList.appendChild(newRow); // 屏幕阅读器只会朗读 "New Row X"
}

// 示例调用
// updateMessagesCorrect("New Row 3"); // 屏幕阅读器朗读 "New Row 3"
// updateMessagesCorrect("Another new message"); // 屏幕阅读器朗读 "Another new message"

通过这种方式，屏幕阅读器只会检测到ul元素内部新增了一个li子元素，从而仅播报这个新增的内容，大大提升了用户体验。

aria-atomic 和 aria-relevant 属性

ARIA提供了一些属性来更精细地控制实时区域的行为，其中aria-atomic和aria-relevant是两个关键属性：

• aria-atomic:

  • 当设置为true时，实时区域内的任何变化都会导致整个区域的内容被重新朗读。
  • 当设置为false（默认值）时，屏幕阅读器理论上只朗读发生变化的部分。
  • 注意：即使设置为false，如果整个区域的DOM结构被替换，屏幕阅读器仍然可能朗读全部内容，因为这被视为一个“新”的区域。

• aria-relevant:

  • 此属性指示屏幕阅读器应该关注哪些类型的变化：
    • additions (默认): 播报新增的内容。
    • removals: 播报被删除的内容。
    • text: 播报文本内容的改变。
    • all: 播报所有类型的变化。
  • 一个替换操作（例如innerHTML = 'new content'）通常被屏幕阅读器解释为一次removals后紧跟一次additions。因此，即使指定aria-relevant="additions"，如果整个内容被替换，屏幕阅读器仍可能因检测到“新增”内容而朗读全部。

尽管这些属性旨在提供更细粒度的控制，但它们的兼容性和实际效果在不同的屏幕阅读器、浏览器和操作系统组合中可能存在差异，并非所有组合都能完全遵循规范。因此，最稳妥的策略仍然是：在DOM操作层面，避免不必要的替换，尽可能采用追加的方式。

总结与注意事项

• 核心原则：对于role="log"等实时区域，更新内容时应尽量采用追加（append）新内容的方式，而不是清空父容器并重新填充。
• 避免完全替换：element.innerHTML = '' 或将整个实时区域从DOM中移除再添加，会导致屏幕阅读器重新朗读所有内容。
• 框架影响：如果您的前端框架在更新视图时倾向于频繁地替换整个DOM子树，您可能需要审视其更新策略，或寻找更精细的更新机制（例如虚拟DOM的差异算法）。
• aria-atomic 和 aria-relevant：了解它们的作用，但不要过度依赖其在所有环境下的完美兼容性。它们是辅助工具，而非解决DOM结构替换问题的银弹。
• 测试：始终使用真实的屏幕阅读器（如iOS VoiceOver, NVDA, JAWS等）进行测试，以确保您的动态内容更新对无障碍用户友好。

通过遵循这些最佳实践，您可以有效避免屏幕阅读器重复朗读动态内容的问题，为所有用户提供更流畅、更直观的无障碍体验。