Mobile Test 6: The Final Test

In previous tests I established that VoiceOver can shift focus to a newly visible child element, if a reasonably long delay is introduced between showing the parent element and giving the child focus. However, no amount of delay is sufficient for this to work on form fields unless they are standalone form fields, not children of a newly shown form element. I'm convinced this is a bug in VoiceOver.

But I think I have a workaround: Hide the form element from sighted users, but not from screen reader users. I can do that using the clip method. That will make the form content always available to screen readers, which isn't desirable in this user interface, but the only readable content in this form is the input field. So, I can hide that using display:none, just like I did in the previous example. Then, when a user clicks on the search button, the form is restored to clip:auto (the default setting, which is no clipping), and the search field is revealed using display:block. Since I'm only changing the display property of the search field, not its parent, I can give that field focus and VoiceOver follows.

Observations

It works!