模态网页无障碍设置：用ARIA属性解决屏幕阅读器漏读问题

可以通过ARIA live区域相关属性搭配简单的更新逻辑调整，完全缓解这类内容被覆盖、播报遗漏的问题，具体配置方案如下：

• 拆分动态内容容器，分级配置aria-live属性
  不要把所有轮询更新的内容都放在同一个自动播报容器里。将非核心的临时数据、加载状态、次要信息的容器设置为aria-live="off"（不触发自动播报，用户主动浏览时可读取）或aria-live="polite"（等屏幕阅读器空闲时再播报，不打断当前内容）；单独设置一个独立的容器承载需要传递给用户的核心有效信息，仅对这个容器配置高优先级播报权限，从源头避免无效内容占用播报队列。
• 核心播报容器配置aria-atomic="true"
  这个属性控制屏幕阅读器的播报粒度：设置为false时，阅读器会逐节点播报容器内每一处细碎变动，高频更新下极易造成播报队列堆积；设置为true时，阅读器只会在容器内容更新完成后，一次性播报完整的核心内容，不会拆分碎片信息占用播报通道。
• 过渡更新阶段使用aria-busy="true"屏蔽无效播报
  轮询请求过程中、数据临时校验/渲染阶段，给对应动态容器加上aria-busy="true"标记，该状态下屏幕阅读器不会记录该区域的内容变动，自然不会把中间态的无效内容加入播报队列；等核心有效内容完全渲染完成后，再将该属性切换为false，此时只会触发一次最终有效内容的播报。
• 控制播报触发频率
  不要每次轮询拿到返回值就立刻更新核心播报容器，先对比本次返回的核心信息和上一次完成播报的内容是否一致，如果只是非核心字段变动、内容无实质更新，就不修改核心播报容器的内容，从根源减少不必要的播报触发。

配置注意：aria-live="assertive"属性会强制打断屏幕阅读器当前正在进行的播报，优先输出该区域内容，一个页面内最多保留1-2个该级别的区域用于最高优先级的告警、核心状态通知，普通动态内容严禁使用该级别，否则不仅会出现内容覆盖问题，还会严重干扰屏幕阅读器用户的正常操作流程。

内容的提问来源于stack exchange，提问作者user819529