E-mail List Archives
Thread: HTML5 and iOS VoiceOver
Number of posts in this thread: 22 (In chronological order)
From: Jesse Hausler
Date: Wed, Nov 28 2012 4:05PM
Subject: HTML5 and iOS VoiceOver
No previous message | Next message →
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
From: Bryan Garaventa
Date: Wed, Nov 28 2012 4:34PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
> > >
From: Jesse Hausler
Date: Wed, Nov 28 2012 5:02PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
> > >
From: Bryan Garaventa
Date: Wed, Nov 28 2012 5:15PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>> >> >> >
> > > >
> > >
From: Bryan Garaventa
Date: Wed, Nov 28 2012 5:51PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
Plus, the following resources may help
http://html5boilerplate.com/html5boilerplate.com/dist/mobile/
and
http://mobilehtml5.org/
----- Original Message -----
From: "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>>> >>> >>> >>
>> >> >> >>
>> >> >> >
> > >
From: Jesse Hausler
Date: Thu, Nov 29 2012 10:38AM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
Bryan, Can you expand on this point?
"The detection mechanism though, can be used to add buttons or controlling elements for accomplishing the same tasks accessibly in a dynamic manner."
I'm curious to learn more about how to address scrollable divs.
Thanks again,
Jesse
From: Bryan Garaventa
Date: Thu, Nov 29 2012 11:30AM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
No problem. One way this can be helpful is like so.
<div class="hidden">
<button>Scroll Up</button>
<button>Scroll Down</button>
</div>
<div class="scrollable">
Content...
</div>
Then, when Voiceover is enabled, you can remove the class of 'hidden' to
display the scroll buttons at the top of the scrollable div, and when
Voiceover is disabled, the class of 'hidden' can be readded to continue with
the original layout.
----- Original Message -----
From: "Jesse Hausler" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 29, 2012 9:38 AM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> Bryan, Can you expand on this point?
>
> "The detection mechanism though, can be used to add buttons or controlling
> elements for accomplishing the same tasks accessibly in a dynamic manner."
>
> I'm curious to learn more about how to address scrollable divs.
>
> Thanks again,
> Jesse
> > >
From: Jesse Hausler
Date: Thu, Nov 29 2012 12:45PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
That makes sense. Thanks for the clarification.
Ideally, I'd love to see something in html5 apps similar to how Android does native scrolling regions.
There if you have 30 items in a master list and only 5 on stage, Talkback will say "Showing items 5 through 10 of 30".
It would be great if there were ARIA attributes we could add to a list element in a scrollable div to get this effect.
On 11/29/12 10:30 AM, "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = > wrote:
No problem. One way this can be helpful is like so.
<div class="hidden">
<button>Scroll Up</button>
<button>Scroll Down</button>
</div>
<div class="scrollable">
Content...
</div>
Then, when Voiceover is enabled, you can remove the class of 'hidden' to
display the scroll buttons at the top of the scrollable div, and when
Voiceover is disabled, the class of 'hidden' can be readded to continue with
the original layout.
----- Original Message -----
From: "Jesse Hausler" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 29, 2012 9:38 AM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> Bryan, Can you expand on this point?
>
> "The detection mechanism though, can be used to add buttons or controlling
> elements for accomplishing the same tasks accessibly in a dynamic manner."
>
> I'm curious to learn more about how to address scrollable divs.
>
> Thanks again,
> Jesse
> > >
From: Bryan Garaventa
Date: Thu, Nov 29 2012 1:01PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
I agree, this may be possible using role=list, role=listitem, aria-setsize,
and aria-posinset.
It would need to be tested in iOS to see if this works though.
----- Original Message -----
From: "Jesse Hausler" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 29, 2012 11:45 AM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> That makes sense. Thanks for the clarification.
>
> Ideally, I'd love to see something in html5 apps similar to how Android
> does native scrolling regions.
> There if you have 30 items in a master list and only 5 on stage, Talkback
> will say "Showing items 5 through 10 of 30".
>
> It would be great if there were ARIA attributes we could add to a list
> element in a scrollable div to get this effect.
>
>
> On 11/29/12 10:30 AM, "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> No problem. One way this can be helpful is like so.
>
> <div class="hidden">
> <button>Scroll Up</button>
> <button>Scroll Down</button>
> </div>
> <div class="scrollable">
> Content...
> </div>
>
> Then, when Voiceover is enabled, you can remove the class of 'hidden' to
> display the scroll buttons at the top of the scrollable div, and when
> Voiceover is disabled, the class of 'hidden' can be readded to continue
> with
> the original layout.
>
> ----- Original Message -----
> From: "Jesse Hausler" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Thursday, November 29, 2012 9:38 AM
> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>
>
>> Bryan, Can you expand on this point?
>>
>> "The detection mechanism though, can be used to add buttons or
>> controlling
>> elements for accomplishing the same tasks accessibly in a dynamic
>> manner."
>>
>> I'm curious to learn more about how to address scrollable divs.
>>
>> Thanks again,
>> Jesse
>> >> >> >
> > > >
> > >
From: Corbett, James
Date: Thu, Nov 29 2012 1:05PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
Hi:
If I may, are you coding specifically for a device or AT in general?
Jim
From: Jesse Hausler
Date: Thu, Nov 29 2012 1:15PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
Hi Jim,
My goal is always to not code specifically for any device or AT. We are developing new touch friendly products that are likely to be widely used on iPad and iPhone, so VoiceOver is an important factor.
Typically, I preach that developers should code using proper semantics, following HTML and WCAG specs, and *most* accessibility needs will fall into place. This does not happen to be the case with VoiceOver which has lead our discussion to VO detection, etc.
Bryan, I'll get a colleague to put together a scrollable div using the attributes you mentioned below and will let you know how it goes.
Jesse
On 11/29/12 12:05 PM, "Corbett, James" < = EMAIL ADDRESS REMOVED = > wrote:
Hi:
If I may, are you coding specifically for a device or AT in general?
Jim
From: Bryan Garaventa
Date: Thu, Nov 29 2012 1:20PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
I was referring to Voiceover feedback in iOS devices, but adding these
attributes to a standard list element doesn't appear to work properly in
JAWS and IE for instance.
E.G
<ol>
<li>
Apple
</li>
<li>
Orange
</li>
<li>
Banana
</li>
</ol>
<ol role="list">
<li role="listitem" aria-setsize="3" aria-posinset="1">
Apple
</li>
<li role="listitem" aria-setsize="3" aria-posinset="2">
Orange
</li>
<li role="listitem" aria-setsize="3" aria-posinset="3">
Banana
</li>
</ol>
If you try this, JAWS announces the numbers correctly on the standard OL
tag, but not on the ARIA marked up tag.
----- Original Message -----
From: "Corbett, James" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 29, 2012 12:05 PM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> Hi:
>
> If I may, are you coding specifically for a device or AT in general?
>
> Jim
>
>
From: Bourne, Sarah (ITD)
Date: Thu, Nov 29 2012 1:48PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
Bryan, do you think that is because the ARIA role is superseding (and suppressing) the native OL/LI role?
sb
Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd
From: Bryan Garaventa
Date: Thu, Nov 29 2012 2:36PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
Possibly, but this looks like a screen reader bug to me, since the same
information should be conveyed via aria-setsize and aria-posinset in the
same manner as a listbox control would be.
----- Original Message -----
From: "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 29, 2012 12:48 PM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> Bryan, do you think that is because the ARIA role is superseding (and
> suppressing) the native OL/LI role?
>
> sb
>
> Sarah E. Bourne
> Director of Assistive Technology &
> Mass.Gov Chief Technology Strategist
> Information Technology Division
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> = EMAIL ADDRESS REMOVED =
> http://www.mass.gov/itd
>
>
>
From: Chris Moore
Date: Thu, Nov 29 2012 3:47PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
WHich version of IE are you guys using? You might have better results with IE 10 and the latest JAWS.
On 29 Nov 2012, at 21:36, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> Possibly, but this looks like a screen reader bug to me, since the same
> information should be conveyed via aria-setsize and aria-posinset in the
> same manner as a listbox control would be.
>
> ----- Original Message -----
> From: "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Thursday, November 29, 2012 12:48 PM
> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>
>
>> Bryan, do you think that is because the ARIA role is superseding (and
>> suppressing) the native OL/LI role?
>>
>> sb
>>
>> Sarah E. Bourne
>> Director of Assistive Technology &
>> Mass.Gov Chief Technology Strategist
>> Information Technology Division
>> Commonwealth of Massachusetts
>> 1 Ashburton Pl. rm 1601 Boston MA 02108
>> 617-626-4502
>> = EMAIL ADDRESS REMOVED =
>> http://www.mass.gov/itd
>>
>>
>>
From: Bryan Garaventa
Date: Thu, Nov 29 2012 4:07PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
I'm currently on an XP machine so this is with IE8 and JAWS13.
If anyone would like to test it in later versions, please let me know how it
works.
----- Original Message -----
From: "Chris Moore" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 29, 2012 2:47 PM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> WHich version of IE are you guys using? You might have better results
> with IE 10 and the latest JAWS.
> On 29 Nov 2012, at 21:36, Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Possibly, but this looks like a screen reader bug to me, since the same
>> information should be conveyed via aria-setsize and aria-posinset in the
>> same manner as a listbox control would be.
>>
>> ----- Original Message -----
>> From: "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Thursday, November 29, 2012 12:48 PM
>> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>>
>>
>>> Bryan, do you think that is because the ARIA role is superseding (and
>>> suppressing) the native OL/LI role?
>>>
>>> sb
>>>
>>> Sarah E. Bourne
>>> Director of Assistive Technology &
>>> Mass.Gov Chief Technology Strategist
>>> Information Technology Division
>>> Commonwealth of Massachusetts
>>> 1 Ashburton Pl. rm 1601 Boston MA 02108
>>> 617-626-4502
>>> = EMAIL ADDRESS REMOVED =
>>> http://www.mass.gov/itd
>>>
>>>
>>>
From: Chris Moore
Date: Thu, Nov 29 2012 5:40PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
IE8 is probably the problem then. Have you tried with another web browser such as Firefox or Chrome? IE8 has poor ARIA support.
On 29 Nov 2012, at 23:07, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> I'm currently on an XP machine so this is with IE8 and JAWS13.
>
> If anyone would like to test it in later versions, please let me know how it
> works.
>
>
> ----- Original Message -----
> From: "Chris Moore" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Thursday, November 29, 2012 2:47 PM
> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>
>
>> WHich version of IE are you guys using? You might have better results
>> with IE 10 and the latest JAWS.
>> On 29 Nov 2012, at 21:36, Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> Possibly, but this looks like a screen reader bug to me, since the same
>>> information should be conveyed via aria-setsize and aria-posinset in the
>>> same manner as a listbox control would be.
>>>
>>> ----- Original Message -----
>>> From: "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = >
>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>> Sent: Thursday, November 29, 2012 12:48 PM
>>> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>>>
>>>
>>>> Bryan, do you think that is because the ARIA role is superseding (and
>>>> suppressing) the native OL/LI role?
>>>>
>>>> sb
>>>>
>>>> Sarah E. Bourne
>>>> Director of Assistive Technology &
>>>> Mass.Gov Chief Technology Strategist
>>>> Information Technology Division
>>>> Commonwealth of Massachusetts
>>>> 1 Ashburton Pl. rm 1601 Boston MA 02108
>>>> 617-626-4502
>>>> = EMAIL ADDRESS REMOVED =
>>>> http://www.mass.gov/itd
>>>>
>>>>
>>>>
From: Bryan Garaventa
Date: Thu, Nov 29 2012 6:10PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
It does the same in the latest version of Firefox, but works correctly in
the latest version of Chrome.
----- Original Message -----
From: "Chris Moore" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 29, 2012 4:40 PM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> IE8 is probably the problem then. Have you tried with another web browser
> such as Firefox or Chrome? IE8 has poor ARIA support.
> On 29 Nov 2012, at 23:07, Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> I'm currently on an XP machine so this is with IE8 and JAWS13.
>>
>> If anyone would like to test it in later versions, please let me know how
>> it
>> works.
>>
>>
>> ----- Original Message -----
>> From: "Chris Moore" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Thursday, November 29, 2012 2:47 PM
>> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>>
>>
>>> WHich version of IE are you guys using? You might have better results
>>> with IE 10 and the latest JAWS.
>>> On 29 Nov 2012, at 21:36, Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
>>> wrote:
>>>
>>>> Possibly, but this looks like a screen reader bug to me, since the same
>>>> information should be conveyed via aria-setsize and aria-posinset in
>>>> the
>>>> same manner as a listbox control would be.
>>>>
>>>> ----- Original Message -----
>>>> From: "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = >
>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>>> Sent: Thursday, November 29, 2012 12:48 PM
>>>> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>>>>
>>>>
>>>>> Bryan, do you think that is because the ARIA role is superseding (and
>>>>> suppressing) the native OL/LI role?
>>>>>
>>>>> sb
>>>>>
>>>>> Sarah E. Bourne
>>>>> Director of Assistive Technology &
>>>>> Mass.Gov Chief Technology Strategist
>>>>> Information Technology Division
>>>>> Commonwealth of Massachusetts
>>>>> 1 Ashburton Pl. rm 1601 Boston MA 02108
>>>>> 617-626-4502
>>>>> = EMAIL ADDRESS REMOVED =
>>>>> http://www.mass.gov/itd
>>>>>
>>>>>
>>>>>
From: Henny Swan
Date: Fri, Nov 30 2012 12:10AM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
Jesse, you asked:
"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?"
Up until iOS 6 a header could only be assigned to the screen title for
native apps however iOS 6 introduces the UIAccessibilityTraitHeader which
can now be assigned to elements other than the screen title. I've not
tested this in the wild however.
What is listed in the Web Rotor for web and native apps changes dependant
on the environment and the option to select a Landmark via the Rotor when
in a native app isn't there. In fact quite a lot isn't there that I'd
expect to be there. I don't have Section listed as an option in Web Rotor
but have a feeling I might have seen this before (am on iOS6). I would
imagine this navigates between containers.
Many thanks, Henny
On 29 November 2012 20:48, Bourne, Sarah (ITD) < = EMAIL ADDRESS REMOVED = >wrote:
> Bryan, do you think that is because the ARIA role is superseding (and
> suppressing) the native OL/LI role?
>
> sb
>
> Sarah E. Bourne
> Director of Assistive Technology &
> Mass.Gov Chief Technology Strategist
> Information Technology Division
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> = EMAIL ADDRESS REMOVED =
> http://www.mass.gov/itd
>
>
>
From: Jesse Hausler
Date: Fri, Nov 30 2012 1:35PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
What behavior are you expecting? Both FF and Chrome report the group as a list. Although Chrome tells me the number of the item I'm on.
I don't have a test together yet for a scrollable div, but as I mentioned earlier, it would be great to tell us the status of the list items "on screen" in an android native list style.
On 11/29/12 5:10 PM, "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = > wrote:
It does the same in the latest version of Firefox, but works correctly in
the latest version of Chrome.
----- Original Message -----
From: "Chris Moore" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 29, 2012 4:40 PM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> IE8 is probably the problem then. Have you tried with another web browser
> such as Firefox or Chrome? IE8 has poor ARIA support.
> On 29 Nov 2012, at 23:07, Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> I'm currently on an XP machine so this is with IE8 and JAWS13.
>>
>> If anyone would like to test it in later versions, please let me know how
>> it
>> works.
>>
>>
>> ----- Original Message -----
>> From: "Chris Moore" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Thursday, November 29, 2012 2:47 PM
>> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>>
>>
>>> WHich version of IE are you guys using? You might have better results
>>> with IE 10 and the latest JAWS.
>>> On 29 Nov 2012, at 21:36, Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
>>> wrote:
>>>
>>>> Possibly, but this looks like a screen reader bug to me, since the same
>>>> information should be conveyed via aria-setsize and aria-posinset in
>>>> the
>>>> same manner as a listbox control would be.
>>>>
>>>> ----- Original Message -----
>>>> From: "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = >
>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>>> Sent: Thursday, November 29, 2012 12:48 PM
>>>> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>>>>
>>>>
>>>>> Bryan, do you think that is because the ARIA role is superseding (and
>>>>> suppressing) the native OL/LI role?
>>>>>
>>>>> sb
>>>>>
>>>>> Sarah E. Bourne
>>>>> Director of Assistive Technology &
>>>>> Mass.Gov Chief Technology Strategist
>>>>> Information Technology Division
>>>>> Commonwealth of Massachusetts
>>>>> 1 Ashburton Pl. rm 1601 Boston MA 02108
>>>>> 617-626-4502
>>>>> = EMAIL ADDRESS REMOVED =
>>>>> http://www.mass.gov/itd
>>>>>
>>>>>
>>>>>
From: Jesse Hausler
Date: Fri, Nov 30 2012 1:36PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | Next message →
Henry, Thanks for the tip on UIAccessibilityTraitHeader.
If this could be used to introduce various sections/panels in an app, that could be very beneficial for navigation.
Jesse
On 11/29/12 11:10 PM, "Henny Swan" < = EMAIL ADDRESS REMOVED = > wrote:
Jesse, you asked:
"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?"
Up until iOS 6 a header could only be assigned to the screen title for
native apps however iOS 6 introduces the UIAccessibilityTraitHeader which
can now be assigned to elements other than the screen title. I've not
tested this in the wild however.
What is listed in the Web Rotor for web and native apps changes dependant
on the environment and the option to select a Landmark via the Rotor when
in a native app isn't there. In fact quite a lot isn't there that I'd
expect to be there. I don't have Section listed as an option in Web Rotor
but have a feeling I might have seen this before (am on iOS6). I would
imagine this navigates between containers.
Many thanks, Henny
On 29 November 2012 20:48, Bourne, Sarah (ITD) < = EMAIL ADDRESS REMOVED = >wrote:
> Bryan, do you think that is because the ARIA role is superseding (and
> suppressing) the native OL/LI role?
>
> sb
>
> Sarah E. Bourne
> Director of Assistive Technology &
> Mass.Gov Chief Technology Strategist
> Information Technology Division
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> = EMAIL ADDRESS REMOVED =
> http://www.mass.gov/itd
>
>
>
From: Bryan Garaventa
Date: Fri, Nov 30 2012 2:06PM
Subject: Re: HTML5 and iOS VoiceOver
← Previous message | No next message
You are seeing the same thing, the list is identified, but the numbering is
not when ARIA is used.
It would be simplest to just try a simple ordered list without ARIA and see
if the content is recognized by Voiceover in the scrollable div when you
have it up and running. Since Voiceover will read the visible portion
anyway, it should be clear if the numbering is conveyed as well.
----- Original Message -----
From: "Jesse Hausler" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 30, 2012 12:35 PM
Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
> What behavior are you expecting? Both FF and Chrome report the group as a
> list. Although Chrome tells me the number of the item I'm on.
>
> I don't have a test together yet for a scrollable div, but as I mentioned
> earlier, it would be great to tell us the status of the list items "on
> screen" in an android native list style.
>
>
>
> On 11/29/12 5:10 PM, "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> It does the same in the latest version of Firefox, but works correctly in
> the latest version of Chrome.
>
>
> ----- Original Message -----
> From: "Chris Moore" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Thursday, November 29, 2012 4:40 PM
> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>
>
>> IE8 is probably the problem then. Have you tried with another web
>> browser
>> such as Firefox or Chrome? IE8 has poor ARIA support.
>> On 29 Nov 2012, at 23:07, Bryan Garaventa < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> I'm currently on an XP machine so this is with IE8 and JAWS13.
>>>
>>> If anyone would like to test it in later versions, please let me know
>>> how
>>> it
>>> works.
>>>
>>>
>>> ----- Original Message -----
>>> From: "Chris Moore" < = EMAIL ADDRESS REMOVED = >
>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>> Sent: Thursday, November 29, 2012 2:47 PM
>>> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>>>
>>>
>>>> WHich version of IE are you guys using? You might have better results
>>>> with IE 10 and the latest JAWS.
>>>> On 29 Nov 2012, at 21:36, Bryan Garaventa
>>>> < = EMAIL ADDRESS REMOVED = >
>>>> wrote:
>>>>
>>>>> Possibly, but this looks like a screen reader bug to me, since the
>>>>> same
>>>>> information should be conveyed via aria-setsize and aria-posinset in
>>>>> the
>>>>> same manner as a listbox control would be.
>>>>>
>>>>> ----- Original Message -----
>>>>> From: "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = >
>>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>>>> Sent: Thursday, November 29, 2012 12:48 PM
>>>>> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>>>>>
>>>>>
>>>>>> Bryan, do you think that is because the ARIA role is superseding (and
>>>>>> suppressing) the native OL/LI role?
>>>>>>
>>>>>> sb
>>>>>>
>>>>>> Sarah E. Bourne
>>>>>> Director of Assistive Technology &
>>>>>> Mass.Gov Chief Technology Strategist
>>>>>> Information Technology Division
>>>>>> Commonwealth of Massachusetts
>>>>>> 1 Ashburton Pl. rm 1601 Boston MA 02108
>>>>>> 617-626-4502
>>>>>> = EMAIL ADDRESS REMOVED =
>>>>>> http://www.mass.gov/itd
>>>>>>
>>>>>>
>>>>>>