WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: spinners/loading animations

for

From: Swift, Daniel P.
Date: Oct 9, 2017 6:49AM

Ugi:

I missed that section -- this is incredibly helpful. Thank you!

Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Ugurcan Kutluoglu
Sent: Sunday, October 08, 2017 6:20 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] spinners/loading animations

I'm not 100% certain, but the WCAG rule seems to have an exception for loading animations.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html

A "loading" animation
> A preloader animation is shown on a page which requires a certain
> percentage of a large file to be downloaded before playback can begin.
> The animation is the only content on the page and instructs the user
> to please wait while the video loads. Because the moving content is
> not presented in parallel with other content, no mechanism to pause,
> stop or hide it needs to be provided, even though the animation may
> run for more than 5 seconds for users with slower connections.


On Fri, Oct 6, 2017 at 8:05 AM, Swift, Daniel P. < <EMAIL REMOVED> > wrote:

> Ugi:
>
> The way you describe the lazy loading is exactly what we are doing.
> We are swapping the src attribute once the image is in viewport. My
> concern is with WCAG 2.2.2 -- that the spinner could spin longer than
> 5 seconds if the user is on a slow connection or indefinitely if the
> user has JS disabled.
>
> Thoughts?
>
> Dan Swift
> Senior Web Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Ugurcan Kutluoglu
> Sent: Thursday, October 05, 2017 4:23 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] spinners/loading animations
>
> Hi Dan,
>
> Could you clarify the purpose of the loading animation?
>
> If you are lazy-loading images, there's really not much you have to do.
> Most lazy loading scrips that I've encountered, re-uses the same IMG
> tag and just modifies the src attribute once the image is in viewport.
> You should be safe, as long as the IMG tag has the appropriate alt text.
>
> However, if you are loading page sections, you may have to alert
> screen reader users depending on the situation.
>
> Ugi
>
> On Thu, Oct 5, 2017 at 7:45 AM, Swift, Daniel P. < <EMAIL REMOVED> > wrote:
>
> > Can someone provide some clarification on loaders/spinners in
> > regards to accessibility? We are using something like this when we
> > lazy-load
> content:
> > http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gi
> > f
> >
> > In theory, the image should've be visible for longer than 5 seconds ...
> > but it is possible if there is a slow connection. Should we remove
> > the 'loading/spinner' image after 5 seconds or substitute it with a
> > static image of a spinner or are loaders/spinners exempt?
> >
> > Thanks!
> >
> > Dan Swift
> > Senior Web Specialist
> > Enterprise Services
> > West Chester University
> > 610.738.0589
> >
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >