为什么 NVDA 不读取输出的标签？

Question

我想使用

<output>

元素，因为我认为它是计算值的可访问性（也许还有 SEO）方面的最佳解决方案（我有两个

<input>

和一个

<output>

）。 NVDA 首先读取所有 changed 输出，然后读取 all 标签。

我也使用JS，像这样：

input1.addEventListener("input", ev => {
   let calculations = ev.target.value * smth;
   // ...
   installment.textContent = calculations + " EUR";
}

我尝试了其中一些解决方案，但它在 Windows + Edge + NVDA 上不起作用：

<label for="installment">Installment: </label>
<output id="installment"></output>

和

<label id="installment_label">Installment: </label>
<output id="installment" aria-labelledby="installment_label"></output>

我也尝试添加

role="status"

但效果不佳。

---

虽然这个解决方案效果很好（尽管 NVDA 读的是“10 000 欧元，分期付款”之类的内容，但它仍然更好）：

编辑：

<label id="installment_label" aria-live="assertive">Installment:
    <span id="installment" aria-labelledby="installment_label"></span>
</label>

最好的解决方案是什么？我应该和

<label id=x><span aria-labelledby=x>

在一起吗？

Answer 1

你应该尝试这样的事情，使用

aria-atomic

:

<label for="installment">Installment:</label>
<output id="installment" aria-live="polite" aria-atomic="true"></output>

当设置为

aria-atomic="true"

时，将呈现整个更改区域，包括更新节点的

label

（如果有的话）。