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

Question

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

场景：

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

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

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

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

Answer 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)在很多情况下都能很好地工作。