提问者:小点点

safari OSX画外音未读取aria标签输入


我正在尝试让voiceover在safari上工作,但是,在某个场景中,当我在元素中跳转时,它似乎不会读出新输入框的aria-label。

场景:

当跳转到下一个元素,并且当前元素的on模糊对dom起作用时,它将不会读出下一个元素的aria-label。

下面是一个示例http://plnkr.co/edit/x0c67oil0wlqeGubiqvz?p=preview

请注意,如果您取出下面的onblur函数,那么它可以正常工作。

<input id="test" onblur="blurer()" onfocus="focuser()"/>

共1个答案

匿名用户

在本例中,问题不是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)在很多情况下都能很好地工作。