Example 3 - VoiceOver on iOS and Impotent Buttons
Summary
Sometimes you may need to offer functionality to screen reader users only. If you want to do that without cluttering up your webpage, you can hide the text and controls visually but still make them accessible to screen reader users. You do this using CSS, either by clipping the content or moving it outside the screen. Simple, right?
Not always!
When a button element is visually hidden it cannot be activated using VoiceOver on an iOS device. The user can swipe to it, double click it, but nothing happens. There is an accessibility Viagra for that. If you make the button visible again, or if you change the visually hidden button to a visually hidden link, everything starts working perfectly.
Examples
Please review the following on your iOS device.
Clipped (offscreen) Button and Link (can only "be seen" with a screen reader).
Visible Button and Link
Explanation
Once in a Blue Moon we have to present content exclusively for screen reader users. We generally avoid this practice, a webpage should not need special operating instructions for those who can't see it. But there are situations that call for screen-reader-only content or functionality.
One common situation that requires visually hidden links and buttons has to do with implementing an accessible autocomplete search widget that works on touch-screen devices running Voiceover. (people who are going to CSUN 2016 can attend our "When Push Comes to Touch" presentation to learn more).
But some buttons are more impotent than others, especially those that are visually hidden (if you don't believe us, try to activate the visually hidden button above using VoiceOver on a touch-screen device). Good luck to ya!
Imagine...
You have implemented a beautiful accessible autocomplete search with a close button that is hidden off-screen. But in your testing you discover that you are not able to activate the button on your iPhone with VoiceOver running. The off-screen search suggestions do not go away unless you search for something or refresh the page.
If you changed the button to a link, the problem goes away. But a link should take you to a different page, not cause an action to happen on the current page. Your boss is a member of the "save the semantic meaning" foundation and is unhappy with the inappropriate use of links as buttons. Also, your solution works on all other devices and screen readers, the problem only happens on the iPhone.
So...