CODEWITHSUNDEEP
safariwai-ariavoiceover
yangli-io
yangli-io

Reputation: 17334

safari OSX voiceover not reading aria label for input

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.

Scenario:

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.

Here is an example http://plnkr.co/edit/x0c67oIl0wlQEguBIQVZ?p=preview

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

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

Upvotes: 0

Views: 2623

Answers (1)

MobA11y
MobA11y

Reputation: 18860

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.

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 announcement we're getting is simply 

"The edited text"

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.

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);
}

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.

Upvotes: 1

Related Questions