动态内容更新时如何通过 aria-live 属性让屏幕阅读器正确朗读
当网页内容通过 JavaScript 动态更新时，屏幕阅读器可能无法感知变化，通过在容器上添加 aria-live 属性可以解决这个问题。
问题原因与现象
在网页中，当用户点击列表项时，JavaScript 会修改下方描述区域的文本内容，实现动态展示。这种 DOM 变化在视觉上是可见的，但对于依赖屏幕阅读器的用户来说，如果容器没有设置特定的属性，屏幕阅读器可能不会朗读更新后的内容，导致用户无法获取最新信息。这是因为屏幕阅读器默认只朗读页面加载时的初始内容，对于后续通过脚本动态插入或修改的文本，如果没有明确的提示，它可能不会自动重新扫描。
造成这一现象的核心原因是屏幕阅读器需要明确的信号来知道页面的哪些部分发生了变化。如果没有 aria-live 属性或其他相关机制，屏幕阅读器会认为该区域是静态的，从而忽略后续的文本替换操作。这会导致用户在切换列表项时，只能听到初始的提示音，而听不到具体动物名称和描述的更新，严重影响了信息的获取效率。
具体解决方案与属性设置
为了解决这个问题，可以在存放动态内容的容器 div 上添加 aria-live 属性。该属性用于定义一个“实时区域”，当该区域内的内容发生变化时，屏幕阅读器会自动朗读更新后的内容。根据 MDN 的说明，aria-live 属性有三个可选值，分别是 polite、assertive 和 off。其中，off 是默认值，表示不朗读变化；polite 表示在用户完成当前操作后朗读变化；assertive 表示立即朗读变化，打断当前操作。
在动物描述的示例场景中，推荐使用 aria-live='assertive'。因为用户点击列表项后，希望立即听到对应的动物名称和描述，而不是等待。设置该属性后，当 JavaScript 更新描述区域的文本时，屏幕阅读器会立即中断当前可能的朗读，转而播报新的内容。这确保了用户能第一时间获取到最新的信息，符合即时交互的预期。
操作步骤与代码实现
首先，定位到存放描述内容的容器元素，即 class 为 animal-description 的 div。然后，在该 div 标签上直接添加 aria-live='assertive' 属性。修改后的代码结构应如下所示：<div class='animal-description' aria-live='assertive'>。这一步操作不需要修改 JavaScript 代码，只需要在 HTML 结构中增加一个属性即可。
接下来，验证修改是否生效。可以使用浏览器的开发者工具模拟屏幕阅读器的行为，或者使用专门的辅助功能测试工具。当点击列表中的动物名称时，检查描述区域是否被正确识别为实时区域，并验证屏幕阅读器是否在内容更新后立即播报了新的标题和段落文本。如果播报正常，说明 aria-live 属性设置成功，解决了动态内容无法被朗读的问题。
结果判断与注意事项
判断修改是否成功的标准是：在点击列表项后，屏幕阅读器是否立即播报了新的动物名称和描述文本。如果播报正常，说明 aria-live 属性起到了作用；如果仍然没有播报，可能需要检查 aria-live 属性是否被正确添加，或者检查是否有其他 CSS 样式遮挡了该元素，导致屏幕阅读器无法识别。
需要注意的是，aria-live 属性虽然能解决朗读问题，但不能替代语义化的 HTML 结构。在添加该属性的同时，仍应确保描述区域内的标题和段落标签使用正确，如使用 h2 和 p 标签。此外，aria-live='assertive' 会打断用户的当前操作，因此在设计时需权衡用户体验，避免频繁的打断造成干扰。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。