Aria-live="polite" 在 NVDA 屏幕阅读器上的阅读顺序不正确？答案

【问题标题】：Aria-live="polite" does not read in proper order on NVDA Screen Reader?Aria-live="polite" 在 NVDA 屏幕阅读器上的阅读顺序不正确？
【发布时间】：2020-02-17 06:41:30
【问题描述】：

aria-live 屏幕阅读器的阅读顺序不正确

Example:

<div id="one"    aria-live="polite">TEST 1</div> 
<div id="two"    aria-live="polite">TEST 2</div> 
<div id="three"  aria-live="polite">TEST 3</div>

屏幕阅读器读起来像：“TEST 2 TEST 1 TEST 3”它随机读取但内容正在以正确的顺序使用 javascript 更新

【问题讨论】：

关心分享一个复制问题的小提琴。影响更新顺序的因素有很多，我想到的一个是您更新它们的速度非常快（在 200 毫秒内），屏幕阅读器必须决定何时阅读。
我们更新了快速演示链接codepen.io/itjayaprakash/pen/RwPaYod

标签： wai-aria wcag2.0

【解决方案1】：

怀疑您遇到的问题是您同时发送多个更新。

我不确定为什么会存在这种行为（我猜这是由于屏幕阅读器中的一些轮询机制会侦听页面更改然后将它们排队，有微秒的延迟可能是它“启动” ，看到第二次更新并立即将其添加到队列中（因为第一次已经发生）然后看到其他更新已经发生并将它们添加到消息队列中。只是推测，它甚至可能是同时更新的浏览器微优化。

为了进一步补充，我的计算机从更新 3 开始，然后读取 1 和 2 - 而我的旧笔记本电脑从 2 开始，然后读取 1 和 3，所以我猜这是与 CPU 性能相关的时间问题。

下面的小提琴显示了更新之间的轻微延迟，它可以按预期工作。

显然我并不是在暗示这个小提琴是如何在生产中做到这一点的！

相反，我将创建一个全局“消息队列”函数，该函数接受消息，然后更新相关元素，在消息之间稍作节流（100 毫秒应该足够快，即使在最快的语音下也不会在消息之间留下间隙率）。

这将是一个全局队列，一个添加消息的函数，然后是一些限制响应的函数（如果没有要更新的消息会自动关闭以节省 CPU 周期，如果添加了消息则重新激活）。

遗憾的是，我用来执行此操作的函数与各地的大量助手相关联，我很难将它们提取为示例，因此您必须自己编写。

function buttonStart(e) {
        document.getElementById('one').innerHTML    = "Button Description A TEST 1";
        document.getElementById('two').innerHTML    = "Button Description A TEST 2";
        document.getElementById('three').innerHTML  = "Button Description A TEST 3";
    }


function buttonStart2(e) {
  document.getElementById('one').innerHTML    = "Button Description  TEST 1";
    window.setTimeout(function(){
      document.getElementById('two').innerHTML    = "Button Description  TEST 2";
    },100);
    window.setTimeout(function(){
      document.getElementById('three').innerHTML  = "Button Description  TEST 3";
    },200);
        
        
        
    }

        #accessbile {
            overflow: hidden;
            min-width: 0px;
            max-width: 0px;
            position: absolute;
            left: -20000px;
        }

    <button onclick="buttonStart()">START</button>
    <button onclick="buttonStart2()">START 2</button>

    <div id="accessbile">
        <div id="one"   aria-live="polite"></div>
        <div id="two"   aria-live="polite"></div>
        <div id="three" aria-live="polite"></div>
    </div>

【讨论】：