时间戳

首页 > 解决方案 > 复杂的 aria-live 计时器进度条焦点完成加载和消息问题

accessibility - 复杂的 aria-live 计时器进度条焦点完成加载和消息问题

问题描述

我想专注于更改页面上的内容。我想为此使用 aria-live，但我不明白为什么它不起作用。为了弄清楚，我将其缩小到一个跨度：

<span class="message" aria-live="polite">Text 1</span>

我运行一行 jQuery 来更改文本：

$('.message').text('Text 2');

在加载条达到 100% 后调用上述行。完整代码：

/* @    -- Progressbar */
var timerCount = 0;
var lastCount = false;
var waitingTime = 10000; //ms
var waitingDevide = 100 / waitingTime;

function loadCalc() {
  if (timerCount <= waitingTime) {
    if (timerCount !== 0) {
      /* @    ---- If not first call */
      var currentPercentage = Math.round(timerCount * waitingDevide);
      $('.waiting-progressbar-bar').css({width: currentPercentage + "%"});
      $('.waiting-progressbar').attr('aria-valuenow', currentPercentage);

      if (currentPercentage === 100) {
        /* @    ------ When loading is done */
        finishedLoading();
      }
    }
    if (timerCount < waitingTime - 1000) {
      /* @    ---- Create Random Time for Realistic loader */
      var randomInterval = Math.floor(Math.random() * 11) * 100;
      /* @    ---- Call Function After Random Time */
      setTimeout(loadCalc, randomInterval);
      /* @    ---- Add Random Number to Counter */
      timerCount = timerCount + randomInterval;
    } else if (timerCount !== waitingTime) {
      var lastStep = waitingTime - timerCount;
      timerCount = timerCount + lastStep;
      setTimeout(loadCalc, lastStep);
    }
  }
}

loadCalc();

function finishedLoading(){
  $('.message').text('Text 2');
}

我用上面的代码做了一个jsFiddle：https ://jsfiddle.net/studiovds/czdug5yn/14/show

在我的 OSX Voiceover 屏幕阅读器上运行它不会大声读出更改的内容？

标签： accessibilityweb-accessibility

解决方案

推荐阅读