WebAIM - Web Accessibility In Mind

E-mail List Archives

HTML5 and iOS VoiceOver

for

From: Jesse Hausler
Date: Nov 28, 2012 4:05PM

Does anyone here have experience developing html5 apps of iOS?

The more I play around with VoiceOver, the less I like it. From a sighted point of view, when a user flicks through a webpage, a black rectangle moves from DOM item to DOM item. If it's a link, button, form input, etc, voiceover tells the user and double tap allows users to perform an action.

Sounds simple enough, but this is what I've observed. If the item in VO's focus, isn't on top of the Z index, then double tapping doesn't do anything, or worse.. It performs the action that happens to be visually above the item on the z-axis one it trying to trigger.

Here are a few different examples:

We built one app with a toolbar that pushes off screen above the stage, when the toolbar is closed. VO still allows the user to navigate through these links when the toolbar is closed (which we did expect), but the black focus rectangle displays over the chrome of mobile safari. So when a user hears "Home" the black rectangle is visually displayed over the bookmarks button in the browser chrome. Double tap opens bookmarks!

How weird is that?

Another example is we have 'pull to refresh' panels that only appear when a sighted user pulls down a panel. For VO users, we made the text, "Pull to refresh" a hyperlink that triggers a refresh. But since this link is not in view in an Z-axis sense.. Double tapping doesn't do anything.

I'm assuming the same would happen if we used css to hide Skiplinks off screen, even if they were in order DOM-wise.

Does anyone have any experience with this? Or experience writing html5 apps for iOS and VO with overlapping panels, etc.

Thanks,
Jesse Hausler