WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML5 and iOS VoiceOver


From: Bryan Garaventa
Date: Nov 28, 2012 4:34PM

Yes, as a rule of thumb, if the content isn't contained within the top level
layer and within the viewport, then Voiceover won't activate it.

I have had success in getting Voiceover to recognize content hidden using
the class below.

.sraCSS {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;

It's still tricky to locate it though, so the most reliable method for
making such UIs accessible, is to customize the layout when Voiceover is
running, as described at
Then you have the option of dynamically simplifying the layout accordingly.

----- Original Message -----
From: "Jesse Hausler" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Wednesday, November 28, 2012 3:05 PM
Subject: [WebAIM] HTML5 and iOS VoiceOver

> 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
> > >