WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML5 and iOS VoiceOver

for

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

Plus, the following resources may help
http://html5boilerplate.com/html5boilerplate.com/dist/mobile/
and
http://mobilehtml5.org/

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


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