Simple VoiceOver iPhone Focus Test

This test is the same as the previous test, but elements that are expected to receive focus are initially hidden using display:none. Clicking or tapping on a button shows the corresponding field and gives it focus. The focus is there, as evidenced visually by a red border. However, VoiceOver is not so willing to give focus to the newly visible element.

• Menu item 1
• Menu item 2
• Menu item 3

Observations

I'm recording these as I observe them, trying to figure out how to give VoiceOver reliable focus to once-hidden elements. There's a good chance these notes won't make much sense until I figure this out...

1. When the form field receives focus, this brings up the on-screen keyboard and VoiceOver announces the key that currently has focus, rather than the form field (for some reason that always seems to be "Capital C" on my iPhone).
2. When the menu item receives focus, VoiceOver's focus remains on the "Go to menu button".
3. After the content has been made visible, tapping either button a second time results in a change in focus and this time VoiceOver correctly announcing the change.
4. I tried loading both target elements as visible initially, then hid them using JQuery after the DOM had loaded. This did not help VoiceOver.
5. Wondering whether the Jquery .hide() and .show() methods were somehow causing problems, I tried using the .css() method instead to change display:none to display:block and vice versa. This did not help VoiceOver.
6. I tried moving each of the .focus() methods into a callback function so they wouldn't be called until after the .show() method was complete. This did not help VoiceOver.
7. I tried added a 1-second timeout after the callback, before the focus. This actually did help VoiceOver on the menu item - after the delay, the menu item receives focus and VoiceOver announces it! However, the delay for the form field causes problems in iOS - even the onscreen keyboard doesn't display. I experimented with various delay values and iOS doesn't seem to tolerate delays of any length, so I don't think this is a viable solution.
8. I'm wondering if this is a problem with inheritance. Can VoiceOver give focus to these items if they are not children of hidden items, but are instead the direct target of our hiding and showing? To test this I created yet another test page, and found different results with the two different element types. Indeed, I have no problem giving focus to the newly visible input field. However, a newly visible link requires a delay.

The implications of all this? Don't know. Maybe it's a VoiceOver bug. Or maybe there's a better way to setup my event handlers in JQuery. For now, here's the action I plan to take:

• For the search field, either:
  1. don't use a form. Just use a search field, with title and placeholder attributes to serve the function of a label element. With no parent-child inheritance involved in the showing and hiding of content, VoiceOver should recognize when the input field becomes visible; or
  2. Show and hide each element within the form individually. I'm not even sure if that will work, but it might if the first option isn't feasible.
• For the menu item, add a timeout. That seems to do the trick.

If you have ideas or insights, please let me know. Meanwhile, here's the final test, with these recommendations implemented.