E-mail List Archives
Thread: spinners/loading animations
Number of posts in this thread: 5 (In chronological order)
From: Swift, Daniel P.
Date: Thu, Oct 05 2017 8:45AM
Subject: spinners/loading animations
No previous message | Next message →
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.gif
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
From: Ugurcan Kutluoglu
Date: Thu, Oct 05 2017 2:22PM
Subject: Re: spinners/loading animations
← Previous message | Next message →
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 ADDRESS 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.gif
>
> 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
>
> > > > >
From: Swift, Daniel P.
Date: Fri, Oct 06 2017 9:05AM
Subject: Re: spinners/loading animations
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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.gif
>
> 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
> >
From: Ugurcan Kutluoglu
Date: Sun, Oct 08 2017 4:19PM
Subject: Re: spinners/loading animations
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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.gif
> >
> > 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
> > > >
> > > at http://webaim.org/discussion/archives
> > > > > >
From: Swift, Daniel P.
Date: Mon, Oct 09 2017 6:49AM
Subject: Re: spinners/loading animations
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
> >