Mobile Test: Hiding and Displaying Content

This site includes search and a navigation menu, but both are hidden by default. Display of each is toggled using jQuery when the corresponding icon is clicked (or tapped).

The experience for a VoiceOver user goes something like this:

1. User navigates to "Search image". There's no indication that this is a button or link, so the user might not realize they can interact with it.
2. If they continue on, they hear "Landmark image" - same problem as above.
3. If they do intuit by the alt text "Search" and "Menu" that these images are interactive, they may tap them, but VoiceOver provides no indication that new content has become visible (or on subsequent taps, hidden). If they continue navigating through the page they will eventually find the new content if it's still visible, but users shouldn't have to work so hard.

These problems are solvable. Check out the more accessible version.