我正在尝试让voiceover在safari上工作,但是,在某个场景中,当我在元素中跳转时,它似乎不会读出新输入框的aria-label。
场景:
当跳转到下一个元素,并且当前元素的on模糊对dom起作用时,它将不会读出下一个元素的aria-label。
下面是一个示例http://plnkr.co/edit/x0c67oil0wlqeGubiqvz?p=preview
请注意,如果您取出下面的onblur函数,那么它可以正常工作。
<input id="test" onblur="blurer()" onfocus="focuser()"/>
在本例中,问题不是blurer
的存在,而是blurer
和相应的focuser
函数的内容。这两个函数一起切换nearbye元素的隐藏状态。这打断了宣布。还有一个角色公告也会出现。完整的annoucement(当文本填充在edit text控件中时)应为:
"The edited text" contents selected/unselected, "your aria label", edit text.
引用的部分是您控制的部分,其他部分是由OS/VoiceOver与其交互控制的部分,由控件的状态和其他aria值自动计算。
我们得到的消息很简单
"The edited text"
所以,这不是一个问题与咏叹调标签特别。而是导致元素的整个公告被中断。
当你的模糊和聚焦功能触发你的画外音的响应(或操作系统的通信)这些事件。不确定你的功能是什么造成的。无论如何,在这些情况下,一个有帮助的技巧是在代码中添加一个setTimeout。通过分离您的函数和实际的焦点/模糊事件,您可以允许可访问性API在处理页面上的样式和诸如此类的事情之前完成它们的工作。下面是一个使您的小代码段工作的示例。只需将javascript文件的内容替换为以下内容:
function blurer(){
window.setTimeout(function() {
document.getElementById('myDiv').style.display = 'none';//
}, 0);
}
function focuser(){
window.setTimeout(function() {
document.getElementById('myDiv').style.display = 'block';//
}, 0);
}
一般来说,我喜欢避免setTimeouts,因为它们会产生竞争条件。但是,setTimeouts为0是可以接受的,因为没有竞争条件。您只是通过将代码推到队列的末尾来解耦触发事件和代码的执行。当黑客攻击VoiceOver时,setTimeout(someFunction,0)在很多情况下都能很好地工作。