优化动态内容可访问性：理解ARIA Live Regions与防止重复朗读

理解ARIA Live Regions及其工作原理

在web开发中，我们经常需要创建内容动态更新的区域，例如聊天窗口、通知提示或实时数据流。为了确保这些动态更新对使用屏幕阅读器的用户同样可访问，wai-aria（web accessibility initiative - accessible rich internet applications）引入了live regions的概念。

role="log"是ARIA Live Regions的一种，专门用于表示一个会持续更新的日志或聊天记录区域。当屏幕阅读器检测到带有role="log"的元素内容发生变化时，它会向用户播报这些更新，而无需用户主动聚焦到该区域。

屏幕阅读器的工作原理是持续监听DOM树中被标记为Live Region的区域。当这些区域的DOM结构或文本内容发生变化时，屏幕阅读器会根据其内部逻辑和浏览器提供的信息来决定如何播报。这意味着，屏幕阅读器关注的是DOM层面的变化，而不是仅仅关注文本内容是否发生了语义上的更新。

动态内容更新中的常见陷阱：重复朗读问题

开发者在使用role="log"等Live Region时，一个常见的挑战是屏幕阅读器可能会重复朗读已经存在的内容。这通常发生在以下场景：为了更新Live Region中的内容，开发者采取了“清空再填充”的策略。

考虑一个简单的聊天应用示例，其HTML结构如下：

    

        

            
用户A: 消息1
            
用户B: 消息2
        
    

当有新消息到来时，如果开发者尝试通过清空父容器canvas的innerHTML，然后重新构建包括旧消息和新消息在内的所有内容，如下所示：

// 假设有新消息到来，需要更新整个聊天区域
function updateChatWithNewMessage(newMessage) {
    const canvas = document.getElementById("canvas");
    // 错误的做法：清空整个canvas并重新构建
    canvas.innerHTML = ""; // 屏幕阅读器会将此视为所有内容被移除

    // 假设重新构建了包含所有旧消息和新消息的HTML字符串
    let newContentHtml = `
        

            

                
用户A: 消息1
                
用户B: 消息2
                
${newMessage}
            
        
    `;
    canvas.innerHTML = newContentHtml; // 屏幕阅读器会将此视为所有内容被添加
}

// 示例调用
updateChatWithNewMessage("用户A: 消息3");

在这种情况下，即使用户A: 消息1和用户B: 消息2的文本内容没有改变，由于#messages元素（及其子元素）在DOM中被先移除后重新添加，屏幕阅读器会将其视为全新的内容，从而再次朗读所有消息，导致用户体验不佳。

屏幕阅读器不会进行复杂的语义分析来判断哪些文本是“真正”的新内容。它看到的是DOM树中的一个元素被完全替换，因此它会忠实地播报被“添加”的新内容，即使这些内容之前已经存在。

解决方案：增量追加而非替换

避免重复朗读问题的核心原则是：不要触碰已有的内容，只追加新的内容。

当Live Region中的内容发生更新时，正确的做法是只将新生成的部分添加到现有DOM结构的末尾，而不是清空并重建整个区域。

VidAU

VidAU AI 是一款AI驱动的数字人视频创作平台，旨在简化视频内容创作流程

下载

针对上述聊天应用示例，正确的更新方式应该是：

// 正确的做法：只追加新消息
function appendNewChatMessage(messageText) {
    const chatList = document.getElementById("chat-list");
    if (!chatList) {
        console.error("Chat list element not found.");
        return;
    }

    const newMessageItem = document.createElement("li");
    newMessageItem.textContent = messageText;
    chatList.appendChild(newMessageItem);
}

// 示例调用
appendNewChatMessage("用户A: 消息3");
appendNewChatMessage("用户B: 消息4");

通过这种方式，屏幕阅读器只会检测到#chat-list中新增了一个