WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessibility issue in infinite scrolling

for

From: Musthafa KP
Date: May 28, 2014 10:12PM

Thanks for your quick response.

Will it be a good experience if I put page indicator "Showing 1 to 10 of 20"
into a *aria-live *region? So the screen reader will announce as you scroll
down.


On Thu, May 29, 2014 at 3:23 AM, Jesse Hausler < <EMAIL REMOVED> >wrote:

> On a PC with a standard browser, we do infinite scrolling. In general if
> you navigate near the end of the page the scroll will occur. It doesn'
> matter how you get there, whether its by tabbing there, dom traversal,
> jumping by heading and so on.
>
> On iOS, you wan to avoid divs with overflow hidden. That will make iOS
> VoiceOver see a single page.. and scrolling will only work if you flick
> through the dom.
>
> On Android with its spiffy 2 finger scrolling, pretty much anything goes.
> Scroll to the bottom and more will load. The location indicators will even
> update. So "Showing 1 to 10 of 20" will change to "Showing 10 to 20 of 30"
> as appropriate.
>
> Jesse
>
>
> On Wed, May 28, 2014 at 7:33 AM, < <EMAIL REMOVED> > wrote:
>
> > Are your designers open to the idea of infinite scroll being an option?
> > For example, in the search engine Duck Duck Go, infinite scroll is the
> > default users can turn it off and replace it with standard pagination. As
> > long as this option is easy to find, this might provide the best
> compromise
> > for usability. (Infinite scroll is not just an accessibility issue; a lot
> > of usability folks find failures in infinite scroll in user testing,
> > depending on the application.)
> >
> > -Deborah Kaplan
> >
> >
> > On Wed, 28 May 2014, Musthafa KP wrote:
> >
> > Hi all
> >> I'm working on a web app which uses infinite scroll for pagination. How
> >> can
> >> I enable this interaction to screen reader? What approach should I
> follow
> >> to make it available to popular screen readers like nvda/jaws. Any help
> is
> >> highly appreciated.
> >>
> >> Thanks
> >> mkp
> >> > >> > >> > >>
> >>
> >>
> > --
> > > > > > > >
> > > >