WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML5 and iOS VoiceOver

for

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
http://useyourloaf.com/blog/2012/05/14/detecting-voiceover-status-changes.html
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
> > >