Setting VoiceOver Focus with JavaScript

VoiceOver is the screen reader that comes preinstalled with iOS. It allows visually impaired or blind people to use their iPhones by listening to a voice telling them what's on the screen.

We ran into problems when we wanted to automatically set the VoiceOver focus to a certain element when the user executed some functionality. There seems to be no standard way of doing so. Some developers suggested to just use element.focus(). Well, this did not work. Neither did trying different combinations of tabindex and looking into the various aria-* attributes. After some more tinkering, we found a solution that actually does work.

function setVoiceOverFocus(element) {
  var focusInterval = 10; // ms, time between function calls
  var focusTotalRepetitions = 10; // number of repetitions

  element.setAttribute('tabindex', '0');
  element.blur();

  var focusRepetitions = 0;
  var interval = window.setInterval(function() {
    element.focus();
    focusRepetitions++;
    if (focusRepetitions >= focusTotalRepetitions) {
      window.clearInterval(interval);
    }
  }, focusInterval);
}

It enforces a tabindex, blurs the element (this is required, even if the element is not focussed) and then sets the focus ten times every 10 milliseconds. This is very ugly, but it is the only way we found to work reliably.