当aria-live区域第一次更新时，aria-describedby会重复。

Question

简介

我正在制作一个密码输入框，它配有密码强度指示器和密码标准列表。为了实现无障碍，期望的流程如下：

1. 用户聚焦到密码输入框，并且屏幕阅读器读出密码标准；
2. 当用户输入时，密码强度改善将被宣布（无效 -> 差 -> 好 -> 强）。

代码

HTML和JS的简化版本如下：

const passwordInput = document.getElementById('password');
const strengthValue = document.getElementById('strength');

passwordInput.addEventListener('input', (e) => {
  const index = e.target.value.length < 3 ? e.target.value.length : 3
  const strength = ['invalid', 'poor', 'good', 'strong'][index]
  strengthValue.innerHTML = `Password strength is ${strength}`
});

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="criteria" />
<p id="strength" aria-live="polite">Password strength is invalid</p>
<p id="criteria">Your password must contain both upper and lowercase letters</p>

这也可以在这个Codepen中看到。

问题

上面的代码结果如下：

1. 用户聚焦于密码输入，然后宣布了标准；
2. 用户输入一个字符，强度变化被宣布，然后再次宣布标准；
3. 进一步的输入导致强度公告但不是标准。

问题出在第2步。标准不应该重复。其他都没问题。

评论

• 这是在MacOS上使用Chrome、Firefox、Safari和Edge时发生的。
• 这仅发生在输入的第一个字符上。如果等到输入两个字符时才宣布强度，则标准不会重复。
• 我在React中遇到了这个问题，并将其简化为HTML/Vanilla JS进行调试，我的理由是如果在HTML/Vanilla JS中发生这种情况，那么React的增加复杂性只会让事情更加混乱。如果在React中看到它有帮助，这里是一个CodeSandbox。
• 我有一个解决方法，即在检测到密码输入的value时删除id="criteria"节点的id。这有效，但感觉应该有更好的解决方案。

如果有人能够说明为什么会发生这种情况以及是否存在优雅/适当的解决方案，我会非常感兴趣了解更多。我没有成功地找到有关aria-live和aria-describedby节点如何一起使用的更多技术解释，所以我遇到了一些困难。提前致谢。

- Alex Nicholas

---

感谢您提出这个精彩的问题。我们正在研究完全相同的用例，这非常棒：感谢您记录下来的努力！ - Robin Métral

Answer 1

我试过在iOS上使用VoiceOver（我没有Mac），它还可以。当我到达“密码强度很强”时，任何进一步添加的密码都不会被宣布。在Chrome上使用JAWS也发生了同样的事情。 按照编码方式，我并不希望听到“密码强度是...”，而只想听到“弱”、“好”或“强”。你有一个活动区域，但你没有使用{{link1：aria-atomic =“true”}}。从技术上讲，如果没有aria-atomic的活动区域应该只宣布实际更改的文本。因此，如果消息从“密码强度为好”变为“密码强度为强”，那么实际上只有“好”变成了“强”，因此只有“强”这个词应该被宣布。NVDA总是宣布全部文本，但除非你使用aria-atomic，否则我不会指望发生这种情况。 有时屏幕阅读器会出现“古怪的行为”，即使您的代码是正确的，但屏幕阅读器并不像您预期的那样进行读取。您关心声音的事实非常好，但您需要小心，不要试图编写代码以绕过屏幕阅读器当前的行为方式，特别是如果代码检查显示您正在正确地做所有事情。 描述（aria-describedby）被读两次的事实使得密码字段似乎失去了焦点，然后焦点又回到了它上面。只有在您聚焦于一个元素时才应该读取描述，因此如果它被读两次，就会给人一种“感觉”，就像是一个焦点问题。但是，您的代码中没有任何东西会影响焦点，所以这可能是VoiceOver/MacOS的问题/错误。

- slugolicious

---

非常感谢您尝试使用其他屏幕阅读器。我非常感激您的想法，特别是关于aria-atomic的提示。我知道你所说的“感觉”像是一个焦点问题；也许这只是VoiceOver的一个bug。非常感谢您的指导，我将把这标记为答案。 - Alex Nicholas