Aria-live = "вежливый" не читает в правильном порядке на NVDA Screen Reader?

Question

чтение программы чтения с экрана 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>

чтение программы чтения с экрана, например: «ТЕСТ 2 ТЕСТ 1 ТЕСТ 3», она читает случайным образом, но содержимое обновляется с использованием javascript в правильном порядке заказ

Answer 1

Как вы подозреваете, проблема в том, что вы отправляете несколько обновлений одновременно.

Я не уверен, почему такое поведение существует (я полагаю, это из-за некоторого механизма опроса в программе чтения с экрана который прослушивает изменения страницы, а затем помещает их в очередь, с микросекундной задержкой, это может быть так, что он «запускается», видит второе обновление и сразу добавляет его в очередь (как первое, как уже произошло), а затем видит, что другие обновления имеют произошло и добавляет их в очередь сообщений. Просто предположение, это может быть даже микрооптимизация браузера при одновременных обновлениях.

Чтобы добавить к этому, мой компьютер начинает с обновления 3 и затем читает 1 и 2 - тогда как мой старый ноутбук начинается с 2, а затем читает 1 и 3, поэтому я предполагаю, что это проблема синхронизации, связанная с производительностью процессора.

Приведенная ниже скрипка показывает, что с небольшой задержкой между обновлениями она работает, как и ожидалось.

Очевидно, я не предполагаю, что эта скрипка - как это сделать в производстве!

Вместо этого я бы создал глобальную функцию «очередь сообщений», которая принимает сообщения, а затем обновляет соответствующий элемент с небольшим регулированием между сообщениями (100 мс должно быть достаточно и достаточно быстрым, чтобы не оставлять пробелов между сообщениями даже при самой быстрой речи). тарифы).

Это будет глобальная очередь, функция добавления сообщения, а затем некоторая функция, которая регулирует ответы (и отключается, если нет сообщений для обновления, чтобы сохранить циклы ЦП, и активируется при добавлении сообщения ).

К сожалению, функции, которые я использую для этого, привязаны к множеству помощников повсюду, и мне слишком сложно извлечь их для примера, поэтому вам придется написать это самостоятельно.

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>