WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Guidelines for Animation/Motion Sickness?

for

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

From: Elizabeth Pyatt
Date: Tue, May 02 2017 11:40AM
Subject: Guidelines for Animation/Motion Sickness?
No previous message | Next message →

The use of animation on Web sites is something I am seeing more of in sites we review and I had a question about updated animation guidelines in relation to vestibular disorders such as motion sickness, vertigo or headaches. Some interesting sites that I could see being problematic (at least to me) include:

http://www.digitalhands.net
http://hellomonday.com
https://www.adamunderwear.com

And also iPhone 7 - http://www.webaxe.org/vestibular-issues-parallax-design/

I know WCAG 2.0 restricts videos/animations to 5 seconds (unless a pause button is provided), but even so it seems like some 5 seconds can be too long for some animation effects. I did find some recommendations/discussions at these sites

https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity
http://www.webaxe.org/vestibular-issues-parallax-design/

So...have people encountered this kind of issue on websites they review, and if so, what guidelines do people recommend? I don't think it's quite covered in WCAG, but yet is an issue to address.

Hope this makes sense.

Thanks
Elizabeth

P.S. Actually, I can handle the iPhone, but I will confess that some parallax animations can give me a headache.

=-=-=-=-=-=-=-=-=-=-=-=-Elizabeth J. Pyatt, Ph.D.
Accessibility IT Consultant
Teaching and Learning with Technology
Penn State University
= EMAIL ADDRESS REMOVED = , (814) 865-0805 or (814) 865-2030 (Main Office)

The 300 Building
304 West College Avenue
University Park, PA 16801
http://accessibility.psu.edu

From: Birkir R. Gunnarsson
Date: Tue, May 02 2017 1:24PM
Subject: Re: Guidelines for Animation/Motion Sickness?
← Previous message | No next message

There is nothing in WCAG 2.0that directly addresses this.
It could be put as a best practice/usability issue under 2.2.2 I tink.
But efforts are underway to address this in future:

WCAG 2.1 proposed success criterion to cover animations (extend 2.2.2)
https://www.w3.org/WAI/GL/wiki/Animation_caused_by_user_interaction

Reduced motion media query:
https://css-tricks.com/introduction-reduced-motion-media-query/



On 5/2/17, Elizabeth Pyatt < = EMAIL ADDRESS REMOVED = > wrote:
> The use of animation on Web sites is something I am seeing more of in sites
> we review and I had a question about updated animation guidelines in
> relation to vestibular disorders such as motion sickness, vertigo or
> headaches. Some interesting sites that I could see being problematic (at
> least to me) include:
>
> http://www.digitalhands.net
> http://hellomonday.com
> https://www.adamunderwear.com
>
> And also iPhone 7 - http://www.webaxe.org/vestibular-issues-parallax-design/
>
> I know WCAG 2.0 restricts videos/animations to 5 seconds (unless a pause
> button is provided), but even so it seems like some 5 seconds can be too
> long for some animation effects. I did find some
> recommendations/discussions at these sites
>
> https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity
> http://www.webaxe.org/vestibular-issues-parallax-design/
>
> So...have people encountered this kind of issue on websites they review, and
> if so, what guidelines do people recommend? I don't think it's quite covered
> in WCAG, but yet is an issue to address.
>
> Hope this makes sense.
>
> Thanks
> Elizabeth
>
> P.S. Actually, I can handle the iPhone, but I will confess that some
> parallax animations can give me a headache.
>
> =-=-=-=-=-=-=-=-=-=-=-=-> Elizabeth J. Pyatt, Ph.D.
> Accessibility IT Consultant
> Teaching and Learning with Technology
> Penn State University
> = EMAIL ADDRESS REMOVED = , (814) 865-0805 or (814) 865-2030 (Main Office)
>
> The 300 Building
> 304 West College Avenue
> University Park, PA 16801
> http://accessibility.psu.edu
>
> > > > >


--
Work hard. Have fun. Make history.