Safari OSX 画外音不读取输入的咏叹调标签 [英] safari OSX voiceover not reading aria label for input

问题描述

我正在尝试让画外音在 safari 上工作，但是，似乎当我在元素之间切换时，它不会在特定情况下读出新输入框的 aria-label.

I'm trying to get voiceover to work on safari however, it seems when I tab through elements it doesnt read out the aria-label of the new input box in a certain scenario.

场景:

当跳转到下一个元素并且当前元素的模糊对 dom 做一些事情时，它不会读出下一个元素的 aria-label.

When tabbing onto the next element and the on blur of the current element does something to the dom then it will not read out the aria-label of the next element.

这是一个例子http://plnkr.co/edit/x0c67oIl0wlQEguBIQVZ?p=preview

请注意，如果您去掉下面的 onblur 功能，则它可以正常工作.

Notice if you take out the onblur function below then it works fine.

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

推荐答案

在这种情况下，问题不在于 blurer 的存在，而在于 blurer 和相应的 focuser 函数.这两个函数一起切换附近元素的隐藏状态.这是在打断公告.还有一个角色公告也会发生.完整的公告(在编辑文本控件中填充文本时)应为:

In this case, the issue isn't the presence of a blurer, but rather the contents of your blurer and corresponding focuser functions. Together these two functions are toggling the hidden state of a nearbye element. This is interupting the announcement. There's a role announcement that also occurs. The full annoucement (when text is populated in the edit text control) should be:

"The edited text" contents selected/unselected, "your aria label", edit text.

引用的部分是您控制的部分，其他部分是由 OS/VoiceOver 与其交互控制的部分，由控件的状态和其他 aria 值自动计算.

The quoted portions are parts you control, the other portions are parts controlled by the OS/VoiceOver's interaction with it, calculated automatically by the state of the control and other aria values.

我们收到的公告很简单

"The edited text"

所以，这不是 aria-label 的问题.相反，您正在导致元素的整个公告被打断.

So, it's not an issue with the aria-label specifically. But rather, you are causing the entire announcement of the element to be interrupted.

当您的模糊和聚焦功能触发您处理 VoiceOver 的响应(或操作系统的通信)这些事件时.不确定您的功能是什么导致了这种情况.无论如何，在这些情况下有帮助的一个技巧是将 setTimeout 添加到您的代码中.通过分离你的函数和实际的焦点/模糊事件，你可以让无障碍 API 做他们的事情，然后在页面上处理样式等.这是一个使您的小代码片段起作用的示例.只需将您的 javascript 文件的内容替换为:

When your blur and focus functions trigger you muck with the VoiceOver's response (or the OS's communication of) these events. Not sure what about your functions is causing this. Regardless, a trick that helps in these circumstances is to add a setTimeout to your code. By separating your function and the actual focus/blur event, you can allow the accessibility APIs to do their thing, before mucking with styles and such on the page. Here is an example that makes your little code snippet work. Just replace the contents of your javascript file with this:

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

In general I like to avoid setTimeouts because they create race conditions. However, setTimeouts of 0 are acceptable, because there is no race condition. You're just decoupling the firing event and the execution of your code by pushing your code to the end of the queue. When hacking around VoiceOver, setTimeout(someFunction, 0) works quite well for a lot of cases.

这篇关于Safari OSX 画外音不读取输入的咏叹调标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！