WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Advice Sought for Continuous Scrolling on Retail Websites

for

From: Karl Groves
Date: Jan 25, 2015 3:55PM

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