网页中动态内容更新时如何让屏幕阅读器正确朗读变化
当网页内容通过 JavaScript 动态更新时，屏幕阅读器可能无法感知到变化，需要使用 aria-live 属性来确保朗读。
问题原因与核心机制
当用户点击列表项时，JavaScript 会直接修改 DOM 中描述区域的文本内容，这种操作不会自动触发屏幕阅读器的朗读行为。屏幕阅读器通常只关注页面加载时的初始状态，对于后续通过脚本修改的文本内容缺乏感知能力。为了解决这个问题，需要将描述区域标记为一个“实时区域”，让辅助技术能够监听其内容变化。
在提供的代码示例中，动物描述区域是一个空的 div 容器，包含一个空的 h2 标题和一个空的 p 标签。当点击列表项时，脚本会直接替换这两个元素的文本节点，导致内容发生改变。如果没有额外的标记，屏幕阅读器用户将无法获知新描述的出现，这违背了无障碍设计的初衷。因此，必须引入 WAI-ARIA 属性来告知辅助技术该区域的内容是动态变化的。
具体操作步骤
第一步，在描述区域的 div 容器上添加 aria-live 属性。根据资料说明，该属性可以将其转换为实时区域，使其内容变化能被屏幕阅读器读取。建议的属性值为 assertive，这意味着屏幕阅读器会在内容变化后立即朗读，而不会等待其他朗读任务完成。如果希望更温和的朗读体验，也可以使用 polite 值，但这会延迟朗读直到用户当前操作结束。
第二步，确认描述区域的语义结构。虽然代码中使用了 h2 和 p 标签，但为了确保屏幕阅读器能正确识别标题和描述，建议在更新内容时保持这些标签的存在。脚本中的 handleSelection 函数已经正确地将动物名称赋值给 h2，将描述文本赋值给 p，这符合语义化的要求。添加 aria-live 属性后，无论内容如何变化，屏幕阅读器都能准确捕捉并朗读这些更新。
验证结果的方法
要验证修改是否生效，可以使用浏览器的开发者工具或屏幕阅读器的测试模式。首先，确保描述区域的 div 标签上已经添加了 aria-live='assertive' 属性。然后，使用键盘或鼠标点击列表中的不同动物项，观察描述区域的内容是否随之更新。接着，开启屏幕阅读器，在点击列表项后，检查屏幕阅读器是否立即朗读出新的动物名称和描述内容。
如果验证过程中发现屏幕阅读器没有朗读更新内容，可能是 aria-live 属性的值设置不正确或被其他样式覆盖。可以尝试将值改为 assertive，并检查浏览器开发者工具中该元素的属性是否正确显示。此外，确保描述区域的 div 容器没有被设置为不可见或隐藏状态，否则屏幕阅读器可能无法读取其内容。通过这些步骤，可以确认动态内容更新是否被正确识别和朗读。
替代方案与注意事项
除了使用 aria-live 属性，还可以在描述区域的 div 上添加 role='alert' 属性。根据资料说明，这具有与 aria-live='assertive' 相同的效果，都会让屏幕阅读器立即朗读内容变化。选择哪种方式取决于开发者的偏好，但两者都能有效解决动态内容无法被朗读的问题。需要注意的是，alert 角色通常用于紧急通知，而 live 区域更适用于常规的动态内容更新。
在实施过程中，应避免过度使用 aria-live 属性，以免干扰用户的阅读体验。如果页面中有多个动态更新的区域，建议为每个区域设置不同的 aria-live 值，以控制朗读的优先级。例如，重要的错误信息可以使用 assertive，而次要的动态内容可以使用 polite。此外，确保动态更新的内容具有足够的语义信息，以便屏幕阅读器能够准确朗读，而不是仅仅朗读文本内容。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。