[英]aria-describedby repeats when aria-live region updates for the first time
I am putting together a password input which is complemented by a password strength indicator and a password criteria list.我正在整理一个密码输入,并辅以密码强度指示器和密码标准列表。 For accessibility, the desired flow is:
对于可访问性,所需的流程是:
A simplified version of the HTML and JS is as follows: 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>
This can also be seen in this Codepen .这也可以在这个 Codepen中看到。
The above code results in the following flow:上面的代码导致以下流程:
The problem is at step 2. The criteria should not be repeated.问题出在第 2 步。标准不应重复。 Everything else is fine.
其他一切都很好。
id
of the id="criteria"
node is removed when a value
is detected in the password input.value
时,会删除id="criteria"
节点的id
。 This works but it feels like there should be a better solution somewhere out there. If anyone is able to shed any light on why this is happening and whether there is an elegant/proper solution out there I would be really interested to know more.如果有人能够阐明为什么会发生这种情况以及是否有优雅/适当的解决方案,我真的很想知道更多。 I haven't been successful in finding more technical explanation of how the
aria-live
and aria-describedby
nodes play together so I have hit a bit of a wall.我还没有成功地找到更多关于
aria-live
和aria-describedby
节点如何一起玩的技术解释,所以我遇到了一些障碍。 Thanks in advance.提前致谢。
I tried VoiceOver on iOS (I don't have a Mac) and it worked ok.我在iOS (我没有 Mac)上尝试了 VoiceOver,它工作正常。 After I got to "password strength is strong", any further additions to the password were not announced.
在我得到“密码强度强”之后,没有公布任何进一步的密码添加。 Same thing happened with JAWS on Chrome.
Chrome 上的 JAWS 也发生了同样的事情。
The way it's coded, I didn't expect to hear "password strength is..." but rather only "poor", "good", or "strong".它的编码方式,我没想到会听到“密码强度是……”,而只是“差”、“好”或“强”。 You have a live region but you are not using
aria-atomic="true"
.您有一个活动区域,但您没有使用
aria-atomic="true"
。 Technically, a live region without aria-atomic
should only announce the text that actually changes.从技术上讲,没有
aria-atomic
的 live region 应该只宣布实际更改的文本。 So if the message changes from "password strength is good " to "password strength is strong ", the only text that really changed is from "good" to "strong" so only the word "strong" should be announced.因此,如果消息从“密码强度好”变为“密码强度强”,则真正改变的唯一文本是从“好”变为“强”,因此只应宣布“强”一词。 NVDA always announces the full text but I wouldn't count on that happening unless you have
aria-atomic
. NVDA 总是公布全文,但我不会指望这种情况发生,除非你有
aria-atomic
。
Sometimes there are "eccentricities" in screen readers where your code is correct but the screen reader is not announcing things like you'd expect.有时屏幕阅读器中存在“怪癖”,您的代码是正确的,但屏幕阅读器并没有像您期望的那样宣布事情。 The fact that you're worried about how it sounds is fantastic but you need to be careful that you don't try to code around the way a screen reader is currently behaving, especially if code inspection shows you're doing everything right.
您担心它的声音听起来很棒,但您需要小心不要尝试围绕屏幕阅读器当前的行为方式进行编码,特别是如果代码检查表明您做的一切都是正确的。
The fact that the description ( aria-describedby
) is read twice makes it sound like the password field loses focus and then focus moves back to it.描述(
aria-describedby
)被读取两次的事实使得密码字段听起来像失去焦点,然后焦点又移回它。 The description should only be read when you focus on an element, so if it's read twice, it "feels" like it's a focus issue.只有当你关注一个元素时才应该阅读描述,所以如果它被阅读两次,它“感觉”就像是一个焦点问题。 But nothing in your code is messing with the focus so it could be a VoiceOver/MacOS issue/bug.
但是您的代码中没有任何内容会影响焦点,因此它可能是 VoiceOver/MacOS 问题/错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.