NVDA屏幕阅读器仅读span值，如何添加进度上下文播报？

你的问题出在aria-labelledby和aria-live区域的文本内容上：当前NVDA优先读取progress-label这个span的内容，导致你设置的aria-valuetext被覆盖，无法生效。

给你两个可行的修改方案：

方案一：保留视觉展示，仅给屏幕阅读器补充上下文 #

不改动普通用户看到的数字，给span添加仅屏幕可见的上下文文本：

<div class="progress">
  <div class="progress-bar" 
    role="progressbar" aria-valuemin="0" aria-valuemax="100"
    aria-labelledby="progress-label"
    data-bind="style: {'width': percent()+'%'},
    attr: {'aria-valuenow': percent()}">
  </div>
  <span id="progress-label" aria-live="polite">
    <span data-bind="text: percent()+'%'"></span>
    <!-- 仅屏幕阅读器可见的文本，需配合下方CSS -->
    <span class="visually-hidden" data-bind="text: '当前进度为' + percent() + '%'"></span>
  </span>
</div>

提前定义通用的视觉隐藏类（不影响普通用户视觉展示）：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

方案二：调整aria属性，让progressbar的valuetext生效 #

去掉aria-labelledby，让progressbar自身的aria-valuetext直接被读取，同时按需调整live区域内容：

<div class="progress">
  <div class="progress-bar" 
    role="progressbar" aria-valuemin="0" aria-valuemax="100"
    data-bind="style: {'width': percent()+'%'},
    attr: {
      'aria-valuenow': percent(),
      'aria-valuetext': '当前进度为' + percent() + '%'
    }">
  </div>
  <span aria-live="polite"
    data-bind="text: percent()+'%'">
  </span>
</div>

如果需要live区域也播报完整上下文，把span的text绑定改成'当前进度为' + percent() + '%'即可（注意这样普通用户也会看到完整文本）。

为什么之前的修改无效？ #

当progressbar元素设置了aria-labelledby时，NVDA会优先读取该属性指向的元素内容，直接忽略aria-valuetext，因此必须调整这两个属性的关联逻辑，或者修改目标标签的内容。

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