WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML5 and iOS VoiceOver

for

From: Bryan Garaventa
Date: Nov 29, 2012 1:20PM


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 REMOVED> >
To: "'WebAIM Discussion List'" < <EMAIL 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
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
> Sent: November 29, 2012 3:02 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] HTML5 and iOS VoiceOver
>
> 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 REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL 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 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 REMOVED> >
>> To: "WebAIM Discussion List" < <EMAIL 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
>>> >>> >>> >>
>> >> >> >>
>> >> >> >
> > > > > >