WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML5 and iOS VoiceOver

for

From: Jesse Hausler
Date: Nov 28, 2012 5:02PM

Thanks for the feedback and the resource. Do you know of any resources for HTML5 based webapps with VO?

Generally speaking, I'm weary of detecting for AT, even if it is built into the OS. I've been preaching a 'One UI to rule them all' approach to just about everything. I'd really hate to break from that for iOS.

Given the current emphasis/trend on universal design, joined with responsive design, I think we're going to see many Uis with off-stage components depending on the size of the viewport. VO detection seems a step backwards.

On a separate note, does anyone know what constitutes a Section, Landmark, or Header (as far as the Rotor is concerned) in a native app?

Thanks,
Jesse


On 11/28/12 3:34 PM, "Bryan Garaventa" < <EMAIL REMOVED> > wrote:

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