'Selecting an option can cause VoiceOver to jump to top of page

iOS9, Safari with VoiceOver enabled.

Not 100% reproducible but simply selecting an option will cause the VoiceOver focus to jump to the button at the top of the page.

Now can listen for the option being selected and then force focus on the element over a couple of seconds but that leads to undesired UX.

  :focus {
    background-color: pink;
  }
<div>
  <button tabindex="-1">close</button><br/><br/><br/><br/><br/><br/><br/><br/>
  <select>
    <option>Email</option>
    <option>Tobias</option>
    <option>Linus</option>
  </select>

</div>

<p>This example shows how to fill a dropdown list</p>

In production code (which uses AngularJS) explicitly setting focus after a 2 second timeout fixed the problem but that's not ideal! Thanks.

htmlaccessibilityvoiceover


Solution 1:[1]

Maybe it may come in handy this css property:

.button {
 speak: spell-out;
}

Edit: this only works in firefox, see Mozilla docs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sarout

Related Questions