RE: What is the expected behavior of scrollable divs within touch screen devices, and does ARIA apply?

"Bryan Garaventa" <bryan.garaventa@ssbbartgroup.com> wrote on 04/24/2014 
12:08:16 PM:
> This may not be an ARIA issue, but it seems like the role of region and 
the use of aria-label
> should be available for this purpose.

It seems to me that using role region with a label on each of the two divs 
you described is one approach. Why do you say the option is not available 
to you?

True enough that VO does not have a useful "where am I" gesture. That is 
true whether on or off the web. That is such a basic screen reader command 
that I am often baffled and frustrated by that short coming. How often to 
you flick left then right just to find out where the VO cursor is? Then 
you only get a little info about what has focus, there is 0 context 
information available. You can do a 3-finger tab and now and then get a 
little more info, but most of the time it is not very helpful information.

But, I digress.... I think the option of using regions is there. However, 
the left-hand div sounds almost like it could be coded up as a list box 
from an ARIA perspective.

Matt King
IBM Senior Technical Staff Member
I/T Chief Accessibility Strategist
IBM BT/CIO - Global Workforce and Web Process Enablement 
Phone: (503) 578-2329, Tie line: 731-7398
mattking@us.ibm.com



From:   "Bryan Garaventa" <bryan.garaventa@ssbbartgroup.com>
To:     Richard Schwerdtfeger/Austin/IBM@IBMUS, 
Cc:     "'James Craig'" <jcraig@apple.com>, Matthew 
King/Fishkill/IBM@IBMUS, <public-pfwg@w3.org>
Date:   04/24/2014 12:10 PM
Subject:        RE: What is the expected behavior of scrollable divs 
within touch  screen  devices, and does ARIA apply?



It might also help if I explain the use case I have in mind.
 
Last month I was working on a project that included two scrollable 
regions, these were Divs that used overflow:auto. The goal was to achieve 
responsive design for both desktop and mobile device support, so it needed 
to be accessible from the keyboard and using touch screen devices at the 
same time.
 
Both Divs were positioned side by side, so both appeared in the viewport 
at the same time. The left Div included a list of dates ranging from 
prehistoric times till the present, and the right Div included a timeline 
where all relevant dates included important events that occurred during 
that time frame. You had the option of scrolling through the dates on the 
left and activating one so that it would automatically scroll that date 
range into view on the right, or you had the choice of manually scrolling 
through all events listed on the right.
 
The use of tabindex solved keyboard accessibility, and visually there were 
borders to separate the sections, and the browser handled the scrolly 
thingies so everything looked and acted as expected for sighted users.
 
The issue though, had to do with touch screen devices. There is no 
supported mechanism for conveying the separation between scrollable 
regions when using a screen reader.
 
So, if you use VoiceOver for example, and you move focus between each 
region from left to right, there is no way to tell which region is 
scrollable, and no way to determine where one ends and another begins.
 
This may not be an ARIA issue, but it seems like the role of region and 
the use of aria-label should be available for this purpose.
 
 
 
 
 
From: Richard Schwerdtfeger [mailto:schwer@us.ibm.com] 
Sent: Wednesday, April 23, 2014 3:15 PM
To: Bryan Garaventa
Cc: 'James Craig'; Matthew King; public-pfwg@w3.org
Subject: RE: What is the expected behavior of scrollable divs within touch 
screen devices, and does ARIA apply?
 
Bryan, we make use of CSS scrollable <divs> in Dojo mobile. As you 
navigate, say with voiceover, it scrolls fine. The scrollable div speaking 
is not an aria issue. Are you labelling the regions? 

Rich


Rich Schwerdtfeger

"Bryan Garaventa" ---04/16/2014 01:35:06 PM--->Most users would not want 
such a verbose output, because so many views are scrollable. The scrollba

From: "Bryan Garaventa" <bryan.garaventa@ssbbartgroup.com>
To: "'James Craig'" <jcraig@apple.com>, Matthew King/Fishkill/IBM@IBMUS
Cc: <public-pfwg@w3.org>
Date: 04/16/2014 01:35 PM
Subject: RE: What is the expected behavior of scrollable divs within touch 
 screen  devices, and does ARIA apply?

 
>Most users would not want such a verbose output, because so many views 
are scrollable. The scrollbars are likewise irrelevant if the user can 
change the scroll position via some other mechanism such as linear 
navigation or in this case, a gesture.
 
This is part of the problem I’m referring to though. Here is a 
conversation that I’ve recently been having about this
http://lnkd.in/b-gg2tZ

 
When there are multiple scrollable regions within the same viewport, there 
is no way to determine which is which, nor which are scrollable and which 
are not.
 
 
 
From: James Craig [mailto:jcraig@apple.com] 
Sent: Tuesday, April 15, 2014 6:07 PM
To: Matthew King
Cc: public-pfwg@w3.org
Subject: Re: What is the expected behavior of scrollable divs within touch 
screen devices, and does ARIA apply?
 
 
On Apr 15, 2014, at 5:53 PM, Matthew King <mattking@us.ibm.com> wrote:
James, 

A VO user does care what is on the screen in a touch device. 
 
No disagreement here. That works as expected. 
Seems like VO gestures for 3 finger flicks for scrolling up/down and 
left/right should work. And, 3-finger tap for hearing what portion of the 
scroll is shown. 
 
That works too. If you have a test case where it doesn't, please file a 
bug at bugreport.apple.com.
 
Usability decision of a particular screen reader is outside the scope of 
PFWG, but since Matt seems to have misunderstood my implication, I'd like 
to clarify… briefly. Bryan's comment was about explicitly interacting with 
scrollbars, and hearing regions announced as "scrollable." Most users 
would not want such a verbose output, because so many views are 
scrollable. The scrollbars are likewise irrelevant if the user can change 
the scroll position via some other mechanism such as linear navigation or 
in this case, a gesture.
 
Cheers.
 
Matt King
IBM Senior Technical Staff Member
I/T Chief Accessibility Strategist
IBM BT/CIO - Global Workforce and Web Process Enablement 
Phone: (503) 578-2329, Tie line: 731-7398
mattking@us.ibm.com 



From:        James Craig <jcraig@apple.com> 
To:        Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>, 
Cc:        public-pfwg@w3.org 
Date:        04/15/2014 05:47 PM 
Subject:        Re: What is the expected behavior of scrollable divs 
within touch  screen devices, and does ARIA apply? 




Hi Bryan, 

The short answer to your question is, there is no recommended mapping, and 
since this is an HTML-specific problem, you'd be better off asking the 
HTML accessibility task force. 

The longer answer is one of general usability and assistive technology 
prerogative to make the best possible experience for the user. For 
example, I don't typically hear screen reader users asking for more 
information about the scroll views, b/c most of them don't care and 
shouldn't have to care. As long as they can navigate to all of the content 
in the scroll view, it shouldn't matter that it's in a scroll view. 

The lack of AT-triggered interaction on custom scroll views, is still 
another matter, and of the drivers behind the scrollrequest events defined 
in IndieUI Events 1.0. 

Cheers, 
James 



On Apr 14, 2014, at 3:10 PM, Bryan Garaventa <
bryan.garaventa@ssbbartgroup.com> wrote: 

This is a question I’ve been asked several times lately, and I’m not sure 
there is a suitable answer. 
 
Basically, if you have a scrollable div, such as the following: 
 
<div tabindex=”0” class=”scrollable”> 
Internal markup and content… 
</div> 
 
Where the class ‘scrollable’ includes the rules for setting a specific 
height/width and overflow:auto. 
 
This occurs all over the web to reduce screen real estate, and is 
happening quite a bit on mobile devices where this is premium. 
 
So, for iOS touch screen devices using VoiceOver, you can move focus into 
the content region, then swipe up and down with one finger to scroll 
through the content. 
E.G 
http://whatsock.com/tsg/Coding%20Arena/Scrollable%20Divs/Scrollable%20Div%20(Internal%20Content)/demo.htm 

 
However, there is no native way to identify when a particular region is 
scrollable. Adding role=”region” and aria-label=”Scrollable” does nothing 
at all and is not conveyed. To my knowledge, this works even less 
intuitively on the Android using TalkBack. This makes it impossible for a 
blind user to know that content is scrolled offscreen within a particular 
region of the UI. 
 
The only ARIA equivalent that seems like it may have some value is 
role=scrollbar 
http://www.w3.org/TR/wai-aria/roles#scrollbar 
Though this refers to a trackbar or graphic, and doesn’t actually apply in 
this case. 
 
So I guess my question is, is there a documented method for implementing a 
label to convey that a region is scrollable for touch screen devices? 
If there is not, should there be one? 
And if there is, do touch screen devices support it? 
 
I’m not sure where the breakdown is. 
 
Side note: If you hear scrollable in the above demo, it’s because I 
cheated by using an offscreen positioned live region to announce 
“scrollable” when focus is first set into the region with VoiceOver 
running. No other method worked for doing this. 
 
Thanks, 
Bryan