WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML5 and iOS VoiceOver

for

From: Bryan Garaventa
Date: Nov 28, 2012 5:15PM

jQuery Mobile may do this, which might be of help.

I agree in the single UI approach as well, which works well for most
standard UI features in Voiceover. One problem though is scrollable Divs,
where it is extremely difficult to work with VO enabled, since the swiping
feature doesn't appear to work properly, nor are scrollable Divs conveyed.
The detection mechanism though, can be used to add buttons or controlling
elements for accomplishing the same tasks accessibly in a dynamic manner.

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


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