WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Advice Sought for Continuous Scrolling on Retail Websites

for

Number of posts in this thread: 11 (In chronological order)

From: Reckless Player
Date: Sun, Jan 25 2015 8:11AM
Subject: Advice Sought for Continuous Scrolling on Retail Websites
No previous message | Next message →

Hello,

I hope this is the right place to ask my questions.
I want to encourage the local online retailers in my country to have
more accessible websites.
Consequently, I would send them specific tutorials and guides for the
needed changes to be implemented.
However, there is one point on continuous scrolling I'm not sure about.
After applying specific filters, in case of a large number of items
left in the result, different websites handle the final display
differently.
Local Amazon and eBay sites, following the global model, break up the
result into multiple pages.
However, other local online retailers put the result in a single
webpage and new items are loaded when one reaches the end of n number
of items.
This almost always causes a conflict with screen readers regardless of
the underlying JavaScript code. This includes the focus jumping back
to the top of the webpage, focus remaining at the bottom of the
webpage, and other scenarios except the scenario when the screen
reader stays at the top of the newly loaded items enabling seamless
scrolling.
The reason that these retailers load the display in a single webpage
is likely because people don't wish to click through to multiple
webpages. This is my theory of course because even as a screen reader
user, I would prefer to quickly navigate a single webpage using html
elements, rather than changing webpages.

I'm not sure how clear I was in my explanation, but here are the
questions that it all boils down to.
1. Is there a way of loading a large number of newer items (> 100) on
a webpage without losing focus by a screen reader user?
2. If so, can anyone direct me to information related to this topic?
3. If not, then is the Amazon/ eBay way of breaking into multiple
webpages the only way?

Thanks

--
Peace
RP

From: Karl Groves
Date: Sun, Jan 25 2015 3:55PM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

I think you have a pretty complete overview of the challenges. This is
an important design paradigm that should be accessible If I understand
correctly, the challenges are:

1. Users should be able to get easy access to all results.
2. Users should be able to access other content elsewhere (after the
results) in the document.
3. Users should understand that new results have appeared on the screen
4. Users should be able to access the newly added results.
5. Focus order should match intended interaction order *and* not
interfere with users' current interactions.

There are some people who have a negative opinion of infinite scroll,
but I think it is a good feature in the right circumstances.

Here are my ideas, though they're completely untested and so I
definitely think others should chime in.

1. The design should not include content in the DOM that appears
*after* the infinite scroll area.
2. The design should utilize landmarks to make it possible to jump
between sections, though this is probably only beneficial for power
users.
3. The design should notify the user (via a live region, if necessary)
that new results have appeared. The notification should include a link
to allow the user to jump to the new results.
4. The appearance of the new results should not cause any changes to
focus order.


Does anyone else have any ideas (besides OMG infinite scroll is the devil!)?








On Sun, Jan 25, 2015 at 10:11 AM, Reckless Player
< = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
>
> I hope this is the right place to ask my questions.
> I want to encourage the local online retailers in my country to have
> more accessible websites.
> Consequently, I would send them specific tutorials and guides for the
> needed changes to be implemented.
> However, there is one point on continuous scrolling I'm not sure about.
> After applying specific filters, in case of a large number of items
> left in the result, different websites handle the final display
> differently.
> Local Amazon and eBay sites, following the global model, break up the
> result into multiple pages.
> However, other local online retailers put the result in a single
> webpage and new items are loaded when one reaches the end of n number
> of items.
> This almost always causes a conflict with screen readers regardless of
> the underlying JavaScript code. This includes the focus jumping back
> to the top of the webpage, focus remaining at the bottom of the
> webpage, and other scenarios except the scenario when the screen
> reader stays at the top of the newly loaded items enabling seamless
> scrolling.
> The reason that these retailers load the display in a single webpage
> is likely because people don't wish to click through to multiple
> webpages. This is my theory of course because even as a screen reader
> user, I would prefer to quickly navigate a single webpage using html
> elements, rather than changing webpages.
>
> I'm not sure how clear I was in my explanation, but here are the
> questions that it all boils down to.
> 1. Is there a way of loading a large number of newer items (> 100) on
> a webpage without losing focus by a screen reader user?
> 2. If so, can anyone direct me to information related to this topic?
> 3. If not, then is the Amazon/ eBay way of breaking into multiple
> webpages the only way?
>
> Thanks
>
> --
> Peace
> RP
> > > --

Karl Groves
www.karlgroves.com
@karlgroves
http://www.linkedin.com/in/karlgroves
Phone: +1 410.541.6829

Modern Web Toolsets and Accessibility
https://www.youtube.com/watch?v=_uq6Db47-Ks

www.tenon.io

From: _mallory
Date: Mon, Jan 26 2015 7:41AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

On Sun, Jan 25, 2015 at 05:55:58PM -0500, Karl Groves wrote:
> Does anyone else have any ideas (besides OMG infinite scroll is the devil!)?

Needs to at least hit all of Adrian's list:
http://blog.adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.html

On top of that, for e-commerce, customers like to have several items
open or easily reachable once they've started going into their
compare fase. While a separate compare function can be useful (we use
it, as do many other e-commerce sites), people who don't know the
open-a-new-tab tricks (or people on mobiles or anywhere where browser
tabs are either not a thing or the UA is just single-context) have no
"tricks" to juggle several products at a time (being able to quickly
switch between products that have caught their eye but are not really
committed to otherwise).

That and the "inifinite choice" mental paradigm has been shown to
work against conversion. See the Colombia U. jars-of-jam study.
(seems the actual study itself is only a PDF that I can find...)

And of course this:
OMG infinite scroll is the devil!

The one place I can see it being okay might be a single news story
on a single site, without footers or anything on the bottom. This
because it's the only type of site I can think of where I will not
do any interaction other than scrolling... and possible highlighting
text.
Though then that too will break when you include external links or
haven't implemented a substitute for the now-broken / or CTRL-F
inbuilt browser search function.

Also, regarding landmarks for keyboard skipping... I would have plain
links going from column to column, since screen reader users aren't
the only ones needing to get the cursor around.

_mallory

From: Reckless Player
Date: Mon, Jan 26 2015 10:08AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

Hello,

Thanks for your responses.

@Karl, thanks for understanding the problem! I wasn't sure if I was
making sense. I didn't know that it's called infinite scroll.
I prefer infinite scrolling (given that I can follow the right order),
because after establishing a pattern of checking items, I don't like
to break the flow.
Example: if a website has a graphic followed by a link for all the
items, I continue to press g, u with occasional CTRL+Tab as Mallory
suggests.
But the main issue is that the websites are not going to bend over
backwards to accommodate me. I think that sighted users prefer single
webpage scrolling.
@Mallory, thanks for the link. It further links to other places that
I'll examine when I have time. But from the list, the easiest thing
seems to be of providing an option to disable infinite scrolling on
the website for keyboard users.
I'll probably suggest that because again the retailers aren't going to
read detailed discussions on the topic.

Thanks

On 1/26/15, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
> On Sun, Jan 25, 2015 at 05:55:58PM -0500, Karl Groves wrote:
>> Does anyone else have any ideas (besides OMG infinite scroll is the
>> devil!)?
>
> Needs to at least hit all of Adrian's list:
> http://blog.adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.html
>
> On top of that, for e-commerce, customers like to have several items
> open or easily reachable once they've started going into their
> compare fase. While a separate compare function can be useful (we use
> it, as do many other e-commerce sites), people who don't know the
> open-a-new-tab tricks (or people on mobiles or anywhere where browser
> tabs are either not a thing or the UA is just single-context) have no
> "tricks" to juggle several products at a time (being able to quickly
> switch between products that have caught their eye but are not really
> committed to otherwise).
>
> That and the "inifinite choice" mental paradigm has been shown to
> work against conversion. See the Colombia U. jars-of-jam study.
> (seems the actual study itself is only a PDF that I can find...)
>
> And of course this:
> OMG infinite scroll is the devil!
>
> The one place I can see it being okay might be a single news story
> on a single site, without footers or anything on the bottom. This
> because it's the only type of site I can think of where I will not
> do any interaction other than scrolling... and possible highlighting
> text.
> Though then that too will break when you include external links or
> haven't implemented a substitute for the now-broken / or CTRL-F
> inbuilt browser search function.
>
> Also, regarding landmarks for keyboard skipping... I would have plain
> links going from column to column, since screen reader users aren't
> the only ones needing to get the cursor around.
>
> _mallory
> > > >


--
Peace
RP

From: Don Mauck
Date: Mon, Jan 26 2015 11:03AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

I think Karl has good ideas, however, the only thing I wonder about is the ability to reread the live region since screen readers don't currently have a way to do that. I have pushed for this but I certainly don't know that FS, AI squared (Window-eyes) or NVDA have that ability, at least not that I'm aware of.

From: Jonathan C Cohn
Date: Tue, Jan 27 2015 7:18AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

I am fairly sure that JAWS has a feature for live region reading. And VoiceOVer has a roar for live regions, though I have not had a chance to test VoiceOVer.

> On Jan 26, 2015, at 13:03, Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
>
> I think Karl has good ideas, however, the only thing I wonder about is the ability to reread the live region since screen readers don't currently have a way to do that. I have pushed for this but I certainly don't know that FS, AI squared (Window-eyes) or NVDA have that ability, at least not that I'm aware of.
>

From: Don Mauck
Date: Tue, Jan 27 2015 8:48AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

Jonathan, from the JAWS help:
ARIA Live Region
Enter some text that may be contained in a live region update. Then choose
whether to speak or ignore updates containing the filter text. This does not allow to reread the text.

From: David Farough
Date: Tue, Jan 27 2015 9:01AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

Recent Jaws versions has speech history functionality which allows you
to view a text copy of all items spoken for a period of time. What do
users do if speech is turned off or they rely on their braille device
for this purpose? will the content of live regions be presented in
braille as well?



>
Ce courriel est destiné exclusivement au destinataire mentionné en titre
et peut contenir de l'information privilégiée, confidentielle ou
soustraite à la communication aux termes des lois applicables. Toute
divulgation non autorisée, toute reproduction ou réacheminement est
interdit. Si vous n'êtes pas le destinataire de ce courriel, ou n'êtes
pas autorisé par le destinataire visé, ou encore, si vous l'avez reçu
par erreur, veuillez le mentionner immédiatement à l'expéditeur et
supprimer le courriel et les copies.

>
This e-mail message is intended for the named recipient(s) and may
contain information that is privileged, confidential and/or exempt from
disclosure under applicable law. Unauthorized disclosure, copying or
re-transmission is prohibited. If you are not a named recipient or not
authorized by the named recipient(s), or if you have received this
e-mail in error, then please notify the sender immediately and delete
the message and any copies.

From: Don Mauck
Date: Tue, Jan 27 2015 9:10AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

I don't know, hadn't thought speech history for reading ARIA live regions. I'll try that and see how it works. Then I'll be sure and let everyone know.

From: Devarshi Pant
Date: Tue, Jan 27 2015 9:30AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | Next message →

It seems managing keyboard focus and consistently directing it in the
proximity of its target would be helpful.

Extending this discussion to scrolling in large data tables, is it
recommended to repeat header row(s) when scrolling?

-devarshi
On Jan 25, 2015 10:12 AM, "Reckless Player" < = EMAIL ADDRESS REMOVED = >
wrote:

> Hello,
>
> I hope this is the right place to ask my questions.
> I want to encourage the local online retailers in my country to have
> more accessible websites.
> Consequently, I would send them specific tutorials and guides for the
> needed changes to be implemented.
> However, there is one point on continuous scrolling I'm not sure about.
> After applying specific filters, in case of a large number of items
> left in the result, different websites handle the final display
> differently.
> Local Amazon and eBay sites, following the global model, break up the
> result into multiple pages.
> However, other local online retailers put the result in a single
> webpage and new items are loaded when one reaches the end of n number
> of items.
> This almost always causes a conflict with screen readers regardless of
> the underlying JavaScript code. This includes the focus jumping back
> to the top of the webpage, focus remaining at the bottom of the
> webpage, and other scenarios except the scenario when the screen
> reader stays at the top of the newly loaded items enabling seamless
> scrolling.
> The reason that these retailers load the display in a single webpage
> is likely because people don't wish to click through to multiple
> webpages. This is my theory of course because even as a screen reader
> user, I would prefer to quickly navigate a single webpage using html
> elements, rather than changing webpages.
>
> I'm not sure how clear I was in my explanation, but here are the
> questions that it all boils down to.
> 1. Is there a way of loading a large number of newer items (> 100) on
> a webpage without losing focus by a screen reader user?
> 2. If so, can anyone direct me to information related to this topic?
> 3. If not, then is the Amazon/ eBay way of breaking into multiple
> webpages the only way?
>
> Thanks
>
> --
> Peace
> RP
> > > >

From: Don Mauck
Date: Tue, Jan 27 2015 9:41AM
Subject: Re: Advice Sought for Continuous Scrolling on Retail Websites
← Previous message | No next message

Yes, speech history does indeed work for "live region" messages. I also can see them on my Braille display.