This repository has been archived by the owner. It is now read-only.

Animation from interactions #18

Closed
alastc opened this Issue Nov 18, 2016 · 117 comments

Comments

@alastc
Contributor

alastc commented Nov 18, 2016

Current versions of SC and Definitions

SC Shortname

Animation from interactions

SC Text

For motion or scaling animations triggered by a user action that is not an essential part of the action, there is a mechanism for the user to pause, stop or hide the animations while still performing the same action.

Suggestion for Priority Level (A/AA/AAA)

Level AAA.

It extends "Pause, stop hide" (Level A) to cover another scenario. The level AAA is suggested because there is not sufficient research to define what size, length of time or other factors should be tested to draw a line.

Related Glossary additions or changes

Essential (already defined)

(Not used in the AAA version) Significant animation: animation which continues for more than 3 seconds, or is synchronized with a user action (e.g. parallax scrolling effects), and affects more than 1/3 of the viewport.

What Principle and Guideline the SC falls within.

Principle 2, Guideline 2.2.

It applies the same principle as "2.2.2 Pause, Stop, Hide", which is under "Guideline 2.2 Enough Time".

Description

"SC 2.2.2 Pause, Stop, Hide" applies when the web page initiates animation, "Animation from interactions" should apply when an interaction of the user initiates animation unexpectedly.

When users take an action not normally associated with animation but some animation is triggered, it can cause distraction or nausea. For example, if scrolling a page causes elements to move (other than the normal movement associated with scrolling) it can trigger vestibular disorders, causing nausea and headaches. A good overview of vestibular disorders on A List Apart from a web design point of view, and an official organisation.

If backgrounds move at a different rate to foregrounds (often termed "parallax scrolling") that can be a trigger, as are foreground animations of items moving in or out of view, rotating etc.

This interview goes through examples. For more information please consult Evidence and Examples on the Wiki.

A webpage needs to either not use these types of animation, or provide mechanism for the user to turn them off.

There is a new CSS media query to assist with the implementation that has support in Safari, and feature requests in the other browsers.

Benefits

The people who benefit from this SC include those who benefit from "Pause, Stop, Hide", as it adds another situation where animation can be triggered. People with vestibular disorders are added as beneficiaries as they cannot always anticipate when animation happens, and are negatively affected if there is no warning or way of turning off the animations.

Note: The impact can be quite severe, triggering nausea, migraine, and potentially bed rest to recover.

Testability

For each example of animation on a page/view check if:

  1. The animation is triggered by a user-action, and
  2. the animation includes movement that is not essential to the action, and
  3. there is no way of using the webpage without triggering the animation.

If all are true then it fails.

Techniques

Related Information

Articles

Public and Member Comments

Surveys

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Nov 18, 2016

FYI: Typo under "Benefits"

The people who benefit from this SC include those who benefit from "Pause, Stop, Hide", as it adds another situation where animation can be triggered. People with vestibula disorders are added as beneficiaries as they cannot always anticipate when animation happens, and are negatively affected if there is no warning or way of turning off the animations.

I'm having a hard time following the logic in the testing. If 2 is true that the animation is not typically triggered by action, then wouldn't 1 be false?

I know we talked about "system" based animations like scrolling, selects opening, pickers, etc. that by their very nature have some animation. If 2 trying to work around those things? I can see a button doesn't normally have animation, in which case we could hit all three being true. But scrolling is a user action. If it triggers parallax then 2 is true, but if there is no other motion than moving down the page is 2 false?

FYI: Typo under "Benefits"

The people who benefit from this SC include those who benefit from "Pause, Stop, Hide", as it adds another situation where animation can be triggered. People with vestibula disorders are added as beneficiaries as they cannot always anticipate when animation happens, and are negatively affected if there is no warning or way of turning off the animations.

I'm having a hard time following the logic in the testing. If 2 is true that the animation is not typically triggered by action, then wouldn't 1 be false?

I know we talked about "system" based animations like scrolling, selects opening, pickers, etc. that by their very nature have some animation. If 2 trying to work around those things? I can see a button doesn't normally have animation, in which case we could hit all three being true. But scrolling is a user action. If it triggers parallax then 2 is true, but if there is no other motion than moving down the page is 2 false?

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Nov 18, 2016

Contributor

Thanks, I find it really hard to type vestibular for some reason.

Part 2 of the testing is the hardest to word, but take parallax as an example. It is triggered by a user action (scroll), but it not typically triggered by that action (i.e. parallax is not the default for scrolling). So your last comment is correct, the movement of the page is typically triggered by scrolling, but the parallax aspect is not.

Anything which animates without user-action is covered in 2.2.2 already, so we're trying to get things that are not covered by that.

A calendar button does typically open a calendar pop-up, so should be false for test 2. It is tricky how to define typical for that sort of thing. If the calendar whooshed around the page when pressed, that wouldn't be expected, but how to phrase that?

Maybe it should take the SC text approach, where it is essential to it's action? Popping up is, whoosing around the screen isn't.

Contributor

alastc commented Nov 18, 2016

Thanks, I find it really hard to type vestibular for some reason.

Part 2 of the testing is the hardest to word, but take parallax as an example. It is triggered by a user action (scroll), but it not typically triggered by that action (i.e. parallax is not the default for scrolling). So your last comment is correct, the movement of the page is typically triggered by scrolling, but the parallax aspect is not.

Anything which animates without user-action is covered in 2.2.2 already, so we're trying to get things that are not covered by that.

A calendar button does typically open a calendar pop-up, so should be false for test 2. It is tricky how to define typical for that sort of thing. If the calendar whooshed around the page when pressed, that wouldn't be expected, but how to phrase that?

Maybe it should take the SC text approach, where it is essential to it's action? Popping up is, whoosing around the screen isn't.

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Nov 18, 2016

You aren't the only one who struggles to spell vestibular. I find spell checkers have an issue with it as well.

Ok, so I do understand it (not that I know how to word it). Obviously we could go so far as to define "typical" for controls, but as the platforms change that definition is going to change and the spec might not update soon enough.

##Attempt (thinking in type):
An item that typically moves is one that by design of the browser performs the repaint or animation. An item that requires HTML, CSS, or JavaScript to move or change is not an element that typically moves. Perhaps if we word 2 as "the animation is not typically triggered by the action without coding from the author of the page, and"...

You aren't the only one who struggles to spell vestibular. I find spell checkers have an issue with it as well.

Ok, so I do understand it (not that I know how to word it). Obviously we could go so far as to define "typical" for controls, but as the platforms change that definition is going to change and the spec might not update soon enough.

##Attempt (thinking in type):
An item that typically moves is one that by design of the browser performs the repaint or animation. An item that requires HTML, CSS, or JavaScript to move or change is not an element that typically moves. Perhaps if we word 2 as "the animation is not typically triggered by the action without coding from the author of the page, and"...

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Nov 18, 2016

Contributor

I think 'typical' is not a good word in this context (sorry), but the terms "essential" and "movement" are key to what we're getting at.

How about:
2 the animation includes movement that is not essential to the action, and

Contributor

alastc commented Nov 18, 2016

I think 'typical' is not a good word in this context (sorry), but the terms "essential" and "movement" are key to what we're getting at.

How about:
2 the animation includes movement that is not essential to the action, and

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Nov 18, 2016

Yes, typical is a tough word to work around. So what does essential cover?

"My new design that has parallax scrolling in order to show the sides of the Mac Pro is essential. The concept just doesn't translate otherwise." - Some designer

"Changing the 'Submit' to 'Processing' with a moving processing meter is essential to letting the user know something is happening." - Another designer

"We have a deep navigation scheme. It's essential that the child menu displays when the parent is activated. Doing it instantly with no transition has tested out jarring to users, so we added a .25s transition." - A more informed designer

The first seems obvious to us. The second and third are probably not essential, but not problematic either. But they are very different than displaying select options, a calendar picker, color picker, or scrolling. I think putting the emphasis on something non-native to the control and programmed by the author clarifies this.

Yes, typical is a tough word to work around. So what does essential cover?

"My new design that has parallax scrolling in order to show the sides of the Mac Pro is essential. The concept just doesn't translate otherwise." - Some designer

"Changing the 'Submit' to 'Processing' with a moving processing meter is essential to letting the user know something is happening." - Another designer

"We have a deep navigation scheme. It's essential that the child menu displays when the parent is activated. Doing it instantly with no transition has tested out jarring to users, so we added a .25s transition." - A more informed designer

The first seems obvious to us. The second and third are probably not essential, but not problematic either. But they are very different than displaying select options, a calendar picker, color picker, or scrolling. I think putting the emphasis on something non-native to the control and programmed by the author clarifies this.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Nov 18, 2016

Contributor

Essential is already defined in WCAG: https://www.w3.org/TR/WCAG20/#essentialdef

So I think that would cover the first, probably not the second or third. All are controlled and programmed by the author, it seems that the size and time-taken for the movement should be the limiting factors?

E.g. should it only apply to something that takes more than 1 second, and more than 1/3 of the view?

Contributor

alastc commented Nov 18, 2016

Essential is already defined in WCAG: https://www.w3.org/TR/WCAG20/#essentialdef

So I think that would cover the first, probably not the second or third. All are controlled and programmed by the author, it seems that the size and time-taken for the movement should be the limiting factors?

E.g. should it only apply to something that takes more than 1 second, and more than 1/3 of the view?

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Nov 18, 2016

I'm researching the effects for a new talk and so far the action based animation questions would indicate that anything larger than 1/3 of the view would be problematic. I don't delve into timing, but I know for me, 1 second feels like a long time. I'd like more opinions before I suggest something shorter though.

I'm researching the effects for a new talk and so far the action based animation questions would indicate that anything larger than 1/3 of the view would be problematic. I don't delve into timing, but I know for me, 1 second feels like a long time. I'd like more opinions before I suggest something shorter though.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Nov 18, 2016

Contributor

Ok, I've updated the SC, definition and testing to include 'significant animation. Please let me know if you have any advance on that based on feedback...

Contributor

alastc commented Nov 18, 2016

Ok, I've updated the SC, definition and testing to include 'significant animation. Please let me know if you have any advance on that based on feedback...

@DavidMacDonald

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

DavidMacDonald Dec 4, 2016

Contributor

Perhaps 3 seconds for the threshold in significant animation or do more study. There is a lot of fade in etc that may last a little over 1 second.

Contributor

DavidMacDonald commented Dec 4, 2016

Perhaps 3 seconds for the threshold in significant animation or do more study. There is a lot of fade in etc that may last a little over 1 second.

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Dec 5, 2016

@DavidMacDonald I'm all for testing to find that "sweet spot." I can only speak for my own experience. Most fade in/out don't affect me as a user with a vestibular disorder. Slides, horizontal motion, and rotating motion cause significant problems for me. The shorter the are, the better. I've developed coping mechanisms, such as long blinks, to try and avoid those. However when they last longer than a long blink (~1 sec), it gets hard to cope.

there isn't enough research on this subject, especially considering all the cognitive issues that are affected and how the effects vary per user.

@DavidMacDonald I'm all for testing to find that "sweet spot." I can only speak for my own experience. Most fade in/out don't affect me as a user with a vestibular disorder. Slides, horizontal motion, and rotating motion cause significant problems for me. The shorter the are, the better. I've developed coping mechanisms, such as long blinks, to try and avoid those. However when they last longer than a long blink (~1 sec), it gets hard to cope.

there isn't enough research on this subject, especially considering all the cognitive issues that are affected and how the effects vary per user.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 5, 2016

Contributor

Having a time limit doesn't make much sense to me, these are caused by interaction but cannot be avoided. How long is too long for scrolling? It depends how far you have to scroll! The problem is you can't avoid them, not how long they take.

Contributor

alastc commented Dec 5, 2016

Having a time limit doesn't make much sense to me, these are caused by interaction but cannot be avoided. How long is too long for scrolling? It depends how far you have to scroll! The problem is you can't avoid them, not how long they take.

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Dec 6, 2016

So no limit on the top, but we're saying anything over 1 second would be true to the 3rd of 4 testing guidelines. I'm good with this, but I read what David says as 3 seconds being the threshold, not 1 second. In essence, any animation UP to 3 seconds would not count as "true" by test 3. Your current wording (which I agree with) says any animation UP to 1 second would not count as "true."

So no limit on the top, but we're saying anything over 1 second would be true to the 3rd of 4 testing guidelines. I'm good with this, but I read what David says as 3 seconds being the threshold, not 1 second. In essence, any animation UP to 3 seconds would not count as "true" by test 3. Your current wording (which I agree with) says any animation UP to 1 second would not count as "true."

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 6, 2016

Contributor

Urg, need to remind myself of the main text before jumping in, sorry. David's suggestion of 3 seconds reminded me of the upper limit of pause/stop/hide, we added 1 second as a lower limit to help with "significant" animation.

I don't think an upper limit makes sense as it is based on user-initiation, but a lower limit makes sense to remove minor animation from being caught.

Contributor

alastc commented Dec 6, 2016

Urg, need to remind myself of the main text before jumping in, sorry. David's suggestion of 3 seconds reminded me of the upper limit of pause/stop/hide, we added 1 second as a lower limit to help with "significant" animation.

I don't think an upper limit makes sense as it is based on user-initiation, but a lower limit makes sense to remove minor animation from being caught.

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Dec 6, 2016

Agreed. 👍

Agreed. 👍

@nattarnoff nattarnoff referenced this issue in w3c/csswg-drafts Dec 6, 2016

Closed

Add 'prefers-reduced-motion' media feature #586

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson Dec 13, 2016

Contributor

Signing up as SC Manager for Issue 18.

Contributor

lauracarlson commented Dec 13, 2016

Signing up as SC Manager for Issue 18.

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson Dec 14, 2016

Contributor

Possible Future Technique: Switch for letting the user control animation on a site. (check omrijs)

Contributor

lauracarlson commented Dec 14, 2016

Possible Future Technique: Switch for letting the user control animation on a site. (check omrijs)

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson Dec 19, 2016

Contributor

@DavidMacDonald noted 2 issues on his spreadsheet regarding this proposal. They are that the proposal:

  1. does not meet the Testable point in the WCAG SC acceptance criteria.
  2. overlaps with COGA Issue #6 Support personalization.

Thoughts on these 2 points?

Contributor

lauracarlson commented Dec 19, 2016

@DavidMacDonald noted 2 issues on his spreadsheet regarding this proposal. They are that the proposal:

  1. does not meet the Testable point in the WCAG SC acceptance criteria.
  2. overlaps with COGA Issue #6 Support personalization.

Thoughts on these 2 points?

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 19, 2016

Contributor
  1. Need more information on why it isn't testable - the testing bit seems clear to me (but I wrote it), can @DavidMacDonald or someone comment on what isn't clear?
  2. Anything which could be addressed by personalisation will overlap with #6, but this one could be avoided by not using animation, or addressed by means other than personalisation. (I.e. personalisation might be an answer, but this is the problem statement.)
Contributor

alastc commented Dec 19, 2016

  1. Need more information on why it isn't testable - the testing bit seems clear to me (but I wrote it), can @DavidMacDonald or someone comment on what isn't clear?
  2. Anything which could be addressed by personalisation will overlap with #6, but this one could be avoided by not using animation, or addressed by means other than personalisation. (I.e. personalisation might be an answer, but this is the problem statement.)
@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

DavidMacDonald Jan 10, 2017

Contributor

I guess I identified 3 things that I'd like to know more about

(1) The definition of "Significant"? It seems fairly arbitrary...
(2) It is a major requirement on the modern web which is full of animation, so we better be ready to defend it, it requires designers to change designs, marketing to carve out space for a button on the "above the fold" etc...
(3) minimal research available on triggering characteristics such as (length of exposure, speed, provocation, time of day, etc.)

We have several people sharing their experience which is helpful... I know someone who shares Nat's experiences, and I've been talking with her about our SC which she thinks would be helpful... but I would like more information for such a large requirement ...

There may be times when animation is helpful... for instance a long home page on a website, and the author wants people to scroll down. The automated scroll lets them know they are moving to a place on the same page, rather than another page, so it helps distinguish an in page link (href=#...) from an regular link (href=http://...)

It will cause many web sites to have to create a gear icon, or another button in addition to a "Pause" button on a carousel. One big thing is how to create a button that doesn't eat expensive real estate, that is easily understood. Is there an icon that people with vestibular disabilities would have? Does the dev add a button on the $50 million "above the fold" part of the page <button>Stop all animation on this site</button>?

@alastc the 3 second was actually a lower threshold proposal instead of 1 second. In other words if it stops in 3 seconds it would pass the SC. Or maybe 2 seconds... this would allow for transitions etc. which are entrenched on the web, forbidding fades etc and will likely cause push back...

Contributor

DavidMacDonald commented Jan 10, 2017

I guess I identified 3 things that I'd like to know more about

(1) The definition of "Significant"? It seems fairly arbitrary...
(2) It is a major requirement on the modern web which is full of animation, so we better be ready to defend it, it requires designers to change designs, marketing to carve out space for a button on the "above the fold" etc...
(3) minimal research available on triggering characteristics such as (length of exposure, speed, provocation, time of day, etc.)

We have several people sharing their experience which is helpful... I know someone who shares Nat's experiences, and I've been talking with her about our SC which she thinks would be helpful... but I would like more information for such a large requirement ...

There may be times when animation is helpful... for instance a long home page on a website, and the author wants people to scroll down. The automated scroll lets them know they are moving to a place on the same page, rather than another page, so it helps distinguish an in page link (href=#...) from an regular link (href=http://...)

It will cause many web sites to have to create a gear icon, or another button in addition to a "Pause" button on a carousel. One big thing is how to create a button that doesn't eat expensive real estate, that is easily understood. Is there an icon that people with vestibular disabilities would have? Does the dev add a button on the $50 million "above the fold" part of the page <button>Stop all animation on this site</button>?

@alastc the 3 second was actually a lower threshold proposal instead of 1 second. In other words if it stops in 3 seconds it would pass the SC. Or maybe 2 seconds... this would allow for transitions etc. which are entrenched on the web, forbidding fades etc and will likely cause push back...

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson Jan 10, 2017

Contributor

Hi @nattarnoff ,

Have you gotten the results of your survey? Do you have any data on triggering characteristics such as (length of exposure, speed, provocation, time of day, etc.) Check David's email.

Contributor

lauracarlson commented Jan 10, 2017

Hi @nattarnoff ,

Have you gotten the results of your survey? Do you have any data on triggering characteristics such as (length of exposure, speed, provocation, time of day, etc.) Check David's email.

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Jan 10, 2017

@lauracarlson while I have responses, I don't know that they identify what David is asking for. For one, it wasn't the best of composed surveys and I have a list of improvements to make it more scientific and easier to answer. The other aspect is I only received 42 usable responses. Considering about half of them don't have any disability at all, the findings are pretty slim. They achieve the goal I needed for the upcoming talk in that I'm not just speaking of my experiences, but hardly scientific.

A high summary is:

  • Parallax sucks.
  • Color fades are not a problem at any size
  • Shape changes (Say circle to square) at less than 1/4 of the screen are not an issue at all.
  • Moving items on the X or Y axis is fine if smaller than 1/4 the screen AND moves less than 1x away. So an object of 50 x 50 pixels moving on either the X or Y 50 pixels or less doesn't seem to be a problem for anyone.
  • Zooming or movement on the Z axis is nearly always an issue, but a minor one if less than 1/8 the screen at the largest point.

I didn't include time as a factor in my survey. Pushing my personal feelings and experiences aside, I think animation settling by 3 seconds makes sense (I prefer less, but I'm an extreme case).

There may be times when animation is helpful... for instance a long home page on a website, and the author wants people to scroll down. The automated scroll lets them know they are moving to a place on the same page, rather than another page, so it helps distinguish an in page link (href=#...) from an regular link (href=http://...)

This is not considered a helpful animation for a lot of the people I've spoken to. It is definitely a trigger depending on individual and speed of scrolling. Helpful animations would be more like the movement of the green box to indicate selection in this Dribbble or this verification notification on Stripe. Small, discrete, reduction of jarring changes that actually improve cognitive load or hide system/network lag.

It will cause many web sites to have to create a gear icon, or another button in addition to a "Pause" button on a carousel. One big thing is how to create a button that doesn't eat expensive real estate, that is easily understood.

Is the job of this group to decide how to implement this on a per site basis? Shouldn't that be left up to the designers and we provide a set of guidelines on how to make things accessible? Yes, there are design concerns and constraints, but if the rules are provided, I would think the designers and developers will need to solve that themselves.

Is there an icon that people with vestibular disabilities would have?

There isn't. I started a hashtag on Twitter, #dzy, in order to flag social content, but there isn't a common icon. Additionally, accessible animation doesn't help just people with vestibular disorders. Poorly used animation has a tremendous impact on people with autistic, ADHD, PTSD, migraine & headaches, mental illness, epilepsy, and low vision or blindness. In fact, in my survey, motion sickness, vertigo, and vestibular disorders only made up 14% of respondents. Because of how animation is usually coded, screen reader users are large group that ANY animation can prevent an accessible experience. The combination of trying to hit higher frame rates and using display:none makes most content unreadable.

@lauracarlson while I have responses, I don't know that they identify what David is asking for. For one, it wasn't the best of composed surveys and I have a list of improvements to make it more scientific and easier to answer. The other aspect is I only received 42 usable responses. Considering about half of them don't have any disability at all, the findings are pretty slim. They achieve the goal I needed for the upcoming talk in that I'm not just speaking of my experiences, but hardly scientific.

A high summary is:

  • Parallax sucks.
  • Color fades are not a problem at any size
  • Shape changes (Say circle to square) at less than 1/4 of the screen are not an issue at all.
  • Moving items on the X or Y axis is fine if smaller than 1/4 the screen AND moves less than 1x away. So an object of 50 x 50 pixels moving on either the X or Y 50 pixels or less doesn't seem to be a problem for anyone.
  • Zooming or movement on the Z axis is nearly always an issue, but a minor one if less than 1/8 the screen at the largest point.

I didn't include time as a factor in my survey. Pushing my personal feelings and experiences aside, I think animation settling by 3 seconds makes sense (I prefer less, but I'm an extreme case).

There may be times when animation is helpful... for instance a long home page on a website, and the author wants people to scroll down. The automated scroll lets them know they are moving to a place on the same page, rather than another page, so it helps distinguish an in page link (href=#...) from an regular link (href=http://...)

This is not considered a helpful animation for a lot of the people I've spoken to. It is definitely a trigger depending on individual and speed of scrolling. Helpful animations would be more like the movement of the green box to indicate selection in this Dribbble or this verification notification on Stripe. Small, discrete, reduction of jarring changes that actually improve cognitive load or hide system/network lag.

It will cause many web sites to have to create a gear icon, or another button in addition to a "Pause" button on a carousel. One big thing is how to create a button that doesn't eat expensive real estate, that is easily understood.

Is the job of this group to decide how to implement this on a per site basis? Shouldn't that be left up to the designers and we provide a set of guidelines on how to make things accessible? Yes, there are design concerns and constraints, but if the rules are provided, I would think the designers and developers will need to solve that themselves.

Is there an icon that people with vestibular disabilities would have?

There isn't. I started a hashtag on Twitter, #dzy, in order to flag social content, but there isn't a common icon. Additionally, accessible animation doesn't help just people with vestibular disorders. Poorly used animation has a tremendous impact on people with autistic, ADHD, PTSD, migraine & headaches, mental illness, epilepsy, and low vision or blindness. In fact, in my survey, motion sickness, vertigo, and vestibular disorders only made up 14% of respondents. Because of how animation is usually coded, screen reader users are large group that ANY animation can prevent an accessible experience. The combination of trying to hit higher frame rates and using display:none makes most content unreadable.

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Jan 13, 2017

Member

Quickfire comment (distilled out from the lengthy sidetrack conversation on the mailing list): I'd replace "...more than 1/3 of the webpage view" with "...more than 1/3 of the viewport"

Member

patrickhlauke commented Jan 13, 2017

Quickfire comment (distilled out from the lengthy sidetrack conversation on the mailing list): I'd replace "...more than 1/3 of the webpage view" with "...more than 1/3 of the viewport"

@DavidMacDonald

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

DavidMacDonald Jan 13, 2017

Contributor

@alastc I think as per @nattarnoff above mentioned Let's set the threshold to 3 seconds not 1 second. That will allow most CSS transitions and save a lot of testing time, which of course would focus on a stop watch an a 1 second boundary. Also incorporating Patrick's suggestions.

Significant animation: animation which continues for more than 3 seconds, and affects more than 1/3 of the viewport.

Contributor

DavidMacDonald commented Jan 13, 2017

@alastc I think as per @nattarnoff above mentioned Let's set the threshold to 3 seconds not 1 second. That will allow most CSS transitions and save a lot of testing time, which of course would focus on a stop watch an a 1 second boundary. Also incorporating Patrick's suggestions.

Significant animation: animation which continues for more than 3 seconds, and affects more than 1/3 of the viewport.

@mbgower

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Jan 16, 2017

Contributor

Thanks for a great discussion on this. I'll weigh in on the broader topic, but I wanted to express my concern with the threshold. Here's the issue: how can time be used as a measure to capture failure when the animation 'response' only lasts as long as the user action. In other words, if I don't ever scroll for 3 seconds straight, I would never trigger enough animation to fail the threshold. That is true not matter what the time threshold is set at, so I'm concerned that it is part of a 4-part AND statement to reach failure.
What would happen if the third parameter "the animation takes more than 1 second and affects more than 1/3 of the webpage view" became 2 different items, and you put an OR in:
3) the animation takes more than 1 second or is synchronized with a user action, and
4) the animation affects more than 1/3 of the webpage view, and...

The wording is awkward and imperfect, but hopefully you get the idea I'm trying to cover and we can improve -- if the animation is continuous for as long as the user action takes place (i.e., parallax while scrolling) than it shouldn't matter what its duration is.
Finally on this point, I'm a little concerned that "1/3 of the webpage view" is a tough way to measure parallax, which I believe is one of THE biggest culprits here.

Contributor

mbgower commented Jan 16, 2017

Thanks for a great discussion on this. I'll weigh in on the broader topic, but I wanted to express my concern with the threshold. Here's the issue: how can time be used as a measure to capture failure when the animation 'response' only lasts as long as the user action. In other words, if I don't ever scroll for 3 seconds straight, I would never trigger enough animation to fail the threshold. That is true not matter what the time threshold is set at, so I'm concerned that it is part of a 4-part AND statement to reach failure.
What would happen if the third parameter "the animation takes more than 1 second and affects more than 1/3 of the webpage view" became 2 different items, and you put an OR in:
3) the animation takes more than 1 second or is synchronized with a user action, and
4) the animation affects more than 1/3 of the webpage view, and...

The wording is awkward and imperfect, but hopefully you get the idea I'm trying to cover and we can improve -- if the animation is continuous for as long as the user action takes place (i.e., parallax while scrolling) than it shouldn't matter what its duration is.
Finally on this point, I'm a little concerned that "1/3 of the webpage view" is a tough way to measure parallax, which I believe is one of THE biggest culprits here.

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Jan 16, 2017

Member

Finally on this point, I'm a little concerned that "1/3 of the webpage view" is a tough way to measure parallax, which I believe is one of THE biggest culprits here.

surely classic parallax scrolling affects the entire viewport, so crosses the "1/3 of the viewport" (using the more accurate definition here rather than "webpage view") with ease?

Member

patrickhlauke commented Jan 16, 2017

Finally on this point, I'm a little concerned that "1/3 of the webpage view" is a tough way to measure parallax, which I believe is one of THE biggest culprits here.

surely classic parallax scrolling affects the entire viewport, so crosses the "1/3 of the viewport" (using the more accurate definition here rather than "webpage view") with ease?

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Jan 16, 2017

Member

however, excellent point about animations that are continuous for the duration of the interaction. in theory, they can be stopped/last a lot less than 3 seconds purely by virtue of the user stopping to scroll

Member

patrickhlauke commented Jan 16, 2017

however, excellent point about animations that are continuous for the duration of the interaction. in theory, they can be stopped/last a lot less than 3 seconds purely by virtue of the user stopping to scroll

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Jan 16, 2017

While an individual element may take up less than 1/3 the viewport in a parallax animation, it's the combination of elements that cause the problem, so I would agree that parallax exceeds the 1/3 of viewport point.

While an individual element may take up less than 1/3 the viewport in a parallax animation, it's the combination of elements that cause the problem, so I would agree that parallax exceeds the 1/3 of viewport point.

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson Jan 17, 2017

Contributor

A general 2015 parallax scrolling usability study turned up a couple of people who experienced motion sickness. The Effects of Parallax Scrolling on User Experience in Web Design By Dede Frederick, James Mohler, Mihaela Vorvoreanu, Ronald Glotzbach states:

"...two of the participants in the study suffered from motion sickness...

Tips for Usability Practitioners...

PS may cause certain people to experience nausea; therefore, it is important to screen your participants for motion sickness and vestibular disorders before allowing them to participate in a test."

Contributor

lauracarlson commented Jan 17, 2017

A general 2015 parallax scrolling usability study turned up a couple of people who experienced motion sickness. The Effects of Parallax Scrolling on User Experience in Web Design By Dede Frederick, James Mohler, Mihaela Vorvoreanu, Ronald Glotzbach states:

"...two of the participants in the study suffered from motion sickness...

Tips for Usability Practitioners...

PS may cause certain people to experience nausea; therefore, it is important to screen your participants for motion sickness and vestibular disorders before allowing them to participate in a test."

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson Jan 20, 2017

Contributor

Hi all,

For the "Significant animation" definition can anyone not live with either number 1, 2, 3, or 4 as listed:

  1. Significant animation: animation which continues for more than 3 seconds or is synchronized with a user action, and affects more than 1/3 of the viewport.
  2. Significant animation: animation which continues for more than 3 seconds or is synchronized with a user action, and affects more than 1/2 of the viewport.
  3. Significant animation: animation which takes more than 1 second or is synchronized with a user action.
  4. Significant animation: animation which takes more than 1 second or is synchronized with a user action, and affects more than 1/3 of the view of the viewport.

If you have a preference among the 4, please let me know that too :-)

Thank you,
Laura

Contributor

lauracarlson commented Jan 20, 2017

Hi all,

For the "Significant animation" definition can anyone not live with either number 1, 2, 3, or 4 as listed:

  1. Significant animation: animation which continues for more than 3 seconds or is synchronized with a user action, and affects more than 1/3 of the viewport.
  2. Significant animation: animation which continues for more than 3 seconds or is synchronized with a user action, and affects more than 1/2 of the viewport.
  3. Significant animation: animation which takes more than 1 second or is synchronized with a user action.
  4. Significant animation: animation which takes more than 1 second or is synchronized with a user action, and affects more than 1/3 of the view of the viewport.

If you have a preference among the 4, please let me know that too :-)

Thank you,
Laura

@mbgower

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Jan 20, 2017

Contributor

Currently, the definition reads:

Significant animation: Animation which continues for more than 1 second, and affects more than 1/3 of the view of the webpage.

So there is a measure for duration and for size. In my review of the Testability section, I'd suggested expanding the duration to include user action. So shouldn't one of your options include that in addtion? How about:

Significant animation: animation which takes more than 1 second or is synchronized with a user action, and affects more than 1/3 of the view of the webpage.

Contributor

mbgower commented Jan 20, 2017

Currently, the definition reads:

Significant animation: Animation which continues for more than 1 second, and affects more than 1/3 of the view of the webpage.

So there is a measure for duration and for size. In my review of the Testability section, I'd suggested expanding the duration to include user action. So shouldn't one of your options include that in addtion? How about:

Significant animation: animation which takes more than 1 second or is synchronized with a user action, and affects more than 1/3 of the view of the webpage.

@johnfoliot

This comment has been minimized.

Show comment
Hide comment
@johnfoliot

johnfoliot Jan 20, 2017

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson Jan 20, 2017

Contributor

Hi @mbgower and @johnfoliot ,

I added a fourth option for the definition per @mbgower 's suggestion:

  1. Significant animation: animation which takes more than 1 second or is synchronized with a user action, and affects more than 1/3 of the view of the viewport.

Please let me know if you cannot not live with any of those 4 or have a preference. Thank you.

Contributor

lauracarlson commented Jan 20, 2017

Hi @mbgower and @johnfoliot ,

I added a fourth option for the definition per @mbgower 's suggestion:

  1. Significant animation: animation which takes more than 1 second or is synchronized with a user action, and affects more than 1/3 of the view of the viewport.

Please let me know if you cannot not live with any of those 4 or have a preference. Thank you.

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Jan 20, 2017

Member

#4 would get my vote

Member

patrickhlauke commented Jan 20, 2017

#4 would get my vote

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Jan 22, 2017

Contributor

Number 4. I think any need the 'or is synchronized', so it really comes down to:

  • 1 or 3 seconds, and
  • 1/2 or 1/3 of the viewport.

Given the trigger is of a similar nature to flashes for epilepsy, 3 seconds seems a long time. I also don't think that many things take 3 seconds but aren't continuous. 1 second allows quick animations to happen (e.g. menus), so it doesn't seem that difficult.

I don't feel strongly about 1/2 - 1/3 of the viewport, given the varying sizes of viewport, 1/2 should be ok.

Contributor

alastc commented Jan 22, 2017

Number 4. I think any need the 'or is synchronized', so it really comes down to:

  • 1 or 3 seconds, and
  • 1/2 or 1/3 of the viewport.

Given the trigger is of a similar nature to flashes for epilepsy, 3 seconds seems a long time. I also don't think that many things take 3 seconds but aren't continuous. 1 second allows quick animations to happen (e.g. menus), so it doesn't seem that difficult.

I don't feel strongly about 1/2 - 1/3 of the viewport, given the varying sizes of viewport, 1/2 should be ok.

@mbgower

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Jan 23, 2017

Contributor

As per @alastc's comments, I'd suggest the synchronized phrase needs to be there for all of them. So it does come down to his two bulletted considerations. I'm fine with option 4 as written, but I can live with any of the resulting combinations, as per Alastair's note.

Contributor

mbgower commented Jan 23, 2017

As per @alastc's comments, I'd suggest the synchronized phrase needs to be there for all of them. So it does come down to his two bulletted considerations. I'm fine with option 4 as written, but I can live with any of the resulting combinations, as per Alastair's note.

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson Jan 23, 2017

Contributor

Thank you @alastc and @mbgower I updated the list of options.

Contributor

lauracarlson commented Jan 23, 2017

Thank you @alastc and @mbgower I updated the list of options.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc May 16, 2017

Contributor

Note that Webkit has recently implemented a preference (with media query to access) for reduced motion:
https://webkit.org/blog/7551/responsive-design-for-motion/

Contributor

alastc commented May 16, 2017

Note that Webkit has recently implemented a preference (with media query to access) for reduced motion:
https://webkit.org/blog/7551/responsive-design-for-motion/

@mgifford

This comment has been minimized.

Show comment
Hide comment
@mgifford

mgifford May 19, 2017

We've got a few issues that highlight this problem in #Drupal and would love a WCAG 2.1 model to follow https://www.drupal.org/project/issues/search?issue_tags=VIMS

Thanks for the heads up @DavidMacDonald

We've got a few issues that highlight this problem in #Drupal and would love a WCAG 2.1 model to follow https://www.drupal.org/project/issues/search?issue_tags=VIMS

Thanks for the heads up @DavidMacDonald

@dboudreau

This comment has been minimized.

Show comment
Hide comment
@dboudreau

dboudreau May 23, 2017

(Slowly) catching up to this SC. Will get in touch with @DavidMacDonald soon.

Hi @dboudreau Probably best to talk to Andrew or Michael in terms of admin rights etc... I'm just another worker bee around here:)

dboudreau commented May 23, 2017

(Slowly) catching up to this SC. Will get in touch with @DavidMacDonald soon.

Hi @dboudreau Probably best to talk to Andrew or Michael in terms of admin rights etc... I'm just another worker bee around here:)

@lauracarlson

This comment has been minimized.

Show comment
Hide comment
@lauracarlson

lauracarlson May 31, 2017

Contributor

Browser bugs filed by @cookiecrook to add support for CSS prefers-reduced-motion media feature:

Contributor

lauracarlson commented May 31, 2017

Browser bugs filed by @cookiecrook to add support for CSS prefers-reduced-motion media feature:

@DavidMacDonald

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

DavidMacDonald Jun 28, 2017

Contributor

Hi @dboudreau Probably best to talk to Andrew or Michael or Joshue in terms of admin rights etc... I'm just another worker bee around here:)

Contributor

DavidMacDonald commented Jun 28, 2017

Hi @dboudreau Probably best to talk to Andrew or Michael or Joshue in terms of admin rights etc... I'm just another worker bee around here:)

@alastc alastc self-assigned this Jul 27, 2017

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Aug 2, 2017

Contributor

Comment from Rachel Nabors:
https://twitter.com/rachelnabors/status/892782753783074818

More research needed before including this seems to be the theme. Is there anyone at the larger companies who can or would do research in this area? (e.g. Microsoft, @alexswli, Google) any contacts in the research areas?)

Contributor

alastc commented Aug 2, 2017

Comment from Rachel Nabors:
https://twitter.com/rachelnabors/status/892782753783074818

More research needed before including this seems to be the theme. Is there anyone at the larger companies who can or would do research in this area? (e.g. Microsoft, @alexswli, Google) any contacts in the research areas?)

@DavidMacDonald

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

DavidMacDonald Aug 2, 2017

Contributor

More research needed before including this seems to be the theme.

I'm in agreement with this...

General acceptance that motion can cause trouble ..."Significant" is hard to test... it's a Big requirement on modern animated web... minimal research available on triggering characteristics such as length of time and angle of exposure, speed of animation, provocation, time of day, etc.) Large discussion ongoing about the size of the animation on the screen ... It appears every user with Vestibular disabilities is unique and its hard to nail down a group of provocative actions that would significantly address a lot of the issues without significant impact on design.

Given the level of impact on the modern web and the above considerations, I'd say punt it, unless someone can come up with a significant compelling argument for a limited list of actionable, testable, achievable things for authors to avoid doing.

Contributor

DavidMacDonald commented Aug 2, 2017

More research needed before including this seems to be the theme.

I'm in agreement with this...

General acceptance that motion can cause trouble ..."Significant" is hard to test... it's a Big requirement on modern animated web... minimal research available on triggering characteristics such as length of time and angle of exposure, speed of animation, provocation, time of day, etc.) Large discussion ongoing about the size of the animation on the screen ... It appears every user with Vestibular disabilities is unique and its hard to nail down a group of provocative actions that would significantly address a lot of the issues without significant impact on design.

Given the level of impact on the modern web and the above considerations, I'd say punt it, unless someone can come up with a significant compelling argument for a limited list of actionable, testable, achievable things for authors to avoid doing.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Aug 2, 2017

Contributor

Let's break this into two streams:

  1. Longer term: Yes, more research is needed. Who has contacts in organisations which could make progress in this area? Is there a good lead person? I'm not affected by vestibular disorders or an expert in animation, I just tried to point out the gap.

  2. Short term: Is there anything we can be confident in applying in guidelines now?

Whilst I think everyone would agree with Rachel Nabor's main point (of having a strong research backing up guidelines), there are some differences between specs for CSS/HTML/JS and accessibility guidelines. The scope of HTML (etc) is to "dictate how people BUILD THE WEB...", but accessibility guidelines encourage/discourage particular ways of doing it.

In CSS if you spec a property that people start using, it is really hard to change it later. In the guidelines you can start with a narrow scope and then widen it later (in 2.2., 3.0 etc).

The risks in new SCs are whether it covers enough to be useful (doesn't provide enough benefit), or covers things that are not useful (costs too much for little benefit).

The one that stands out as an obvious first step is parallax scrolling, i.e. ensuring people can avoid it somehow. I get complaints about that from people without (known) vestibular issues in our office.

If that were the specific issue addressed by this initial SC would that mitigate the concerns? It could be expanded on later, widened to cover more cases and for that we'd need to specify time/size/angle whatever the variables need to be.

Longer term we do need more research, someone to lead that aspect, and perhaps a team/task force? That seemed to work for the low-vision/coga/mobile task forces (which started before my time here).

Contributor

alastc commented Aug 2, 2017

Let's break this into two streams:

  1. Longer term: Yes, more research is needed. Who has contacts in organisations which could make progress in this area? Is there a good lead person? I'm not affected by vestibular disorders or an expert in animation, I just tried to point out the gap.

  2. Short term: Is there anything we can be confident in applying in guidelines now?

Whilst I think everyone would agree with Rachel Nabor's main point (of having a strong research backing up guidelines), there are some differences between specs for CSS/HTML/JS and accessibility guidelines. The scope of HTML (etc) is to "dictate how people BUILD THE WEB...", but accessibility guidelines encourage/discourage particular ways of doing it.

In CSS if you spec a property that people start using, it is really hard to change it later. In the guidelines you can start with a narrow scope and then widen it later (in 2.2., 3.0 etc).

The risks in new SCs are whether it covers enough to be useful (doesn't provide enough benefit), or covers things that are not useful (costs too much for little benefit).

The one that stands out as an obvious first step is parallax scrolling, i.e. ensuring people can avoid it somehow. I get complaints about that from people without (known) vestibular issues in our office.

If that were the specific issue addressed by this initial SC would that mitigate the concerns? It could be expanded on later, widened to cover more cases and for that we'd need to specify time/size/angle whatever the variables need to be.

Longer term we do need more research, someone to lead that aspect, and perhaps a team/task force? That seemed to work for the low-vision/coga/mobile task forces (which started before my time here).

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Aug 2, 2017

Member
Member

patrickhlauke commented Aug 2, 2017

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Aug 2, 2017

Contributor

There's a big difference between "use this attribute to do X", and "provide an accessible name via X, Y or Z".

I was trying to draw the difference between specs and guidelines, the way the guidelines are setup you have multiple ways of achieving it, some are easier, therefore "encouraged". Admittedly some methods are banned, but that's rare in the big picture.

Contributor

alastc commented Aug 2, 2017

There's a big difference between "use this attribute to do X", and "provide an accessible name via X, Y or Z".

I was trying to draw the difference between specs and guidelines, the way the guidelines are setup you have multiple ways of achieving it, some are easier, therefore "encouraged". Admittedly some methods are banned, but that's rare in the big picture.

@DavidMacDonald

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

DavidMacDonald Aug 3, 2017

Contributor

obvious first step is parallax scrolling, i.e. ensuring people can avoid it somehow.

Do you mean substitute the word parallax for animation?

if not, then that's what the current SC language is, yet it has drawn a pretty strong response, albeit from an animation professional .

Contributor

DavidMacDonald commented Aug 3, 2017

obvious first step is parallax scrolling, i.e. ensuring people can avoid it somehow.

Do you mean substitute the word parallax for animation?

if not, then that's what the current SC language is, yet it has drawn a pretty strong response, albeit from an animation professional .

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Aug 3, 2017

Contributor

Something like:

There is a mechanism to prevent animations triggered by scrolling that are not an essential part of scrolling.

That could probably be simplified/improved, but it would hit the nub of the complaint about parallax. Sufficient techniques would be using the reduce-motion media query, or an on-page mechanism.

I would very much like to know from Rachel whether she would think that is a reasonable course, my gut feeling is that there is a wide variety of things which are problematic for people with vestibular issue, and even the current wording was fairly reasonable (i.e. feasible to do), and didn't cover that much of the issue-space.

I guess another option would be to put the current wording at AAA, as an indicator that it is a known issue whilst the research side is worked on.

Contributor

alastc commented Aug 3, 2017

Something like:

There is a mechanism to prevent animations triggered by scrolling that are not an essential part of scrolling.

That could probably be simplified/improved, but it would hit the nub of the complaint about parallax. Sufficient techniques would be using the reduce-motion media query, or an on-page mechanism.

I would very much like to know from Rachel whether she would think that is a reasonable course, my gut feeling is that there is a wide variety of things which are problematic for people with vestibular issue, and even the current wording was fairly reasonable (i.e. feasible to do), and didn't cover that much of the issue-space.

I guess another option would be to put the current wording at AAA, as an indicator that it is a known issue whilst the research side is worked on.

@cookiecrook

This comment has been minimized.

Show comment
Hide comment
@cookiecrook

cookiecrook Aug 3, 2017

Consider using animation verbiage from these articles, because it most closely reflects the shared vocabulary of the designers and UI implementors you are trying to influence.

cookiecrook commented Aug 3, 2017

Consider using animation verbiage from these articles, because it most closely reflects the shared vocabulary of the designers and UI implementors you are trying to influence.

@mbgower

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Aug 4, 2017

Contributor

Creating Usability with Motion: The UX in Motion Manifesto

Be warned that there is an animated section at the top of this page which cannot be easily disabled/stopped (or at least I couldn't figure out how to disable before it made me feel nauseous). It fails existing Pause, Hide, Stop, and may very well trigger some participants in this thread.

Update: the animations are throughout the "Manifesto" article. I couldn't even review it. The other two sources are useful. Thanks for sharing @cookiecrook

Contributor

mbgower commented Aug 4, 2017

Creating Usability with Motion: The UX in Motion Manifesto

Be warned that there is an animated section at the top of this page which cannot be easily disabled/stopped (or at least I couldn't figure out how to disable before it made me feel nauseous). It fails existing Pause, Hide, Stop, and may very well trigger some participants in this thread.

Update: the animations are throughout the "Manifesto" article. I couldn't even review it. The other two sources are useful. Thanks for sharing @cookiecrook

@mbgower

This comment has been minimized.

Show comment
Hide comment
@mbgower

mbgower Aug 4, 2017

Contributor

@alastc

"There is a mechanism to prevent animations triggered by scrolling that are not an essential part of scrolling."
That could probably be simplified/improved, but it would hit the nub of the complaint about parallax.

I think it's a reasonable approach to at least get it to CFC and hopefully surface some more studies. If we want to think of this in regards to holes to plug, we are trying to address animation that is triggered by and synchronized with user action. Many of the other cases I've encountered (especially in web animation blogs, etc) seem to me to be already failing Pause, Hide, Stop.

I agree wordsmithing is called for. I'm always a bit leery of using "mechanism". I'm assuming your thought is that a technique to use prefers-reduced-motion would be a success technique example. I haven't done any testing, but it seems like it is viable when used in combination with iOS's Reduce Motion setting which sounds like it is integrated into Safari.
James Craig does a great job of identifying considerations in his article that he linked to, and I'm hoping he can assist with language. @cookiecrook ?

Contributor

mbgower commented Aug 4, 2017

@alastc

"There is a mechanism to prevent animations triggered by scrolling that are not an essential part of scrolling."
That could probably be simplified/improved, but it would hit the nub of the complaint about parallax.

I think it's a reasonable approach to at least get it to CFC and hopefully surface some more studies. If we want to think of this in regards to holes to plug, we are trying to address animation that is triggered by and synchronized with user action. Many of the other cases I've encountered (especially in web animation blogs, etc) seem to me to be already failing Pause, Hide, Stop.

I agree wordsmithing is called for. I'm always a bit leery of using "mechanism". I'm assuming your thought is that a technique to use prefers-reduced-motion would be a success technique example. I haven't done any testing, but it seems like it is viable when used in combination with iOS's Reduce Motion setting which sounds like it is integrated into Safari.
James Craig does a great job of identifying considerations in his article that he linked to, and I'm hoping he can assist with language. @cookiecrook ?

@AmeliaBR

This comment has been minimized.

Show comment
Hide comment
@AmeliaBR

AmeliaBR Aug 5, 2017

Would it be reasonable at this time to include this as a AAA-level condition, with a note that AA or A level guidance may be added in the future?

For AAA level (highest accessibility), you could drop the 3 seconds / one-third of screen tests—which are currently based on rule of thumb guesstimates—and instead say that the website must be usable without triggering animations that are not essential for the website's purpose.

For A or AA level requirements (which are legally enforceable in many jurisdictions), I would prefer to see evidence-based standards and objective measurements of what content is likely to cause a problem.

AmeliaBR commented Aug 5, 2017

Would it be reasonable at this time to include this as a AAA-level condition, with a note that AA or A level guidance may be added in the future?

For AAA level (highest accessibility), you could drop the 3 seconds / one-third of screen tests—which are currently based on rule of thumb guesstimates—and instead say that the website must be usable without triggering animations that are not essential for the website's purpose.

For A or AA level requirements (which are legally enforceable in many jurisdictions), I would prefer to see evidence-based standards and objective measurements of what content is likely to cause a problem.

@cookiecrook

This comment has been minimized.

Show comment
Hide comment
@cookiecrook

cookiecrook Aug 5, 2017

@alastc wrote:

I'm hoping [James] can assist with language. @cookiecrook ?

I cannot commit to authoring new guidelines, but I will review them on case-by-case basis (@ me in) as time allows.

@mbgower wrote:

Be warned that there is an animated section at the top of this page which cannot be easily disabled/stopped (or at least I couldn't figure out how to disable before it made me feel nauseous).

Apologies, I should have anticipated that. I've updated my link to it to include a warning inline.

PS. If you'd still like to review the article, try Reader mode, RSS, or even Print as PDF.

@alastc wrote:

I'm hoping [James] can assist with language. @cookiecrook ?

I cannot commit to authoring new guidelines, but I will review them on case-by-case basis (@ me in) as time allows.

@mbgower wrote:

Be warned that there is an animated section at the top of this page which cannot be easily disabled/stopped (or at least I couldn't figure out how to disable before it made me feel nauseous).

Apologies, I should have anticipated that. I've updated my link to it to include a warning inline.

PS. If you'd still like to review the article, try Reader mode, RSS, or even Print as PDF.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Aug 6, 2017

Contributor

Consider using animation verbiage from these articles

Will do @cookiecrook, I'm not sure that those terms would be suitable for the core SC text as it needs to fit with the current animations SC, but certainly in the understanding document. (NB: It wasn't me asking you to author this, the articles provides plenty to go on.)

@AmeliaBR wrote:

For AAA level (highest accessibility), you could drop the 3 seconds / one-third of screen tests—which are currently based on rule of thumb guesstimates

I think that's a fair approach, for the SC text that would mean dropping 'significant':

For animations triggered by a user action that are not an essential part of the action, there is a mechanism for the user to pause, stop or hide the animation while still performing the same action. (Level AAA).

On the basis that we need parallel work to narrow down which factors are key and where we draw the line at A/AA. Does anyone on the thread object to that?

Contributor

alastc commented Aug 6, 2017

Consider using animation verbiage from these articles

Will do @cookiecrook, I'm not sure that those terms would be suitable for the core SC text as it needs to fit with the current animations SC, but certainly in the understanding document. (NB: It wasn't me asking you to author this, the articles provides plenty to go on.)

@AmeliaBR wrote:

For AAA level (highest accessibility), you could drop the 3 seconds / one-third of screen tests—which are currently based on rule of thumb guesstimates

I think that's a fair approach, for the SC text that would mean dropping 'significant':

For animations triggered by a user action that are not an essential part of the action, there is a mechanism for the user to pause, stop or hide the animation while still performing the same action. (Level AAA).

On the basis that we need parallel work to narrow down which factors are key and where we draw the line at A/AA. Does anyone on the thread object to that?

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Aug 6, 2017

Member

does this now mandate that any kind of animation must be preventable/stoppable by the user? is animation, as used in this SC, just referring to motion, or any kind of gradual visual change (for instance animating the background / ramping the color to a different value, having a border subtly fade into view when an element is focused/selected, etc)?

Member

patrickhlauke commented Aug 6, 2017

does this now mandate that any kind of animation must be preventable/stoppable by the user? is animation, as used in this SC, just referring to motion, or any kind of gradual visual change (for instance animating the background / ramping the color to a different value, having a border subtly fade into view when an element is focused/selected, etc)?

@AmeliaBR

This comment has been minimized.

Show comment
Hide comment
@AmeliaBR

AmeliaBR Aug 7, 2017

@patrickhlauke

is animation, as used in this SC, just referring to motion, or any kind of gradual visual change

Good point. There should probably be a distinction between "animation" in general (including color and opacity changes) and "animated motion" of objects on the page (including motion relative to the normal user-controlled scroll movement, and also changing relative sizes of objects).

Are there non-motion animations that are vestibular triggers? Blurring or focus changes, maybe? Severe color flashing is a problem, of course, but is covered by other WCAG criteria. Beyond that, the main concern of non-motion animation (as far as I know) is general distraction. Considering that we're talking about user-triggered effects in this criteria, distraction is probably not as big a concern.

It might be best to start narrow (specifically focusing on animated motion) unless/until there is clear argument to be more strict. Even if the initial criteria is AAA-level, you don't want to make it sound like everything is equally bad, and thereby discourage developers from substituting a fade-in animation for a slide-in animation.

AmeliaBR commented Aug 7, 2017

@patrickhlauke

is animation, as used in this SC, just referring to motion, or any kind of gradual visual change

Good point. There should probably be a distinction between "animation" in general (including color and opacity changes) and "animated motion" of objects on the page (including motion relative to the normal user-controlled scroll movement, and also changing relative sizes of objects).

Are there non-motion animations that are vestibular triggers? Blurring or focus changes, maybe? Severe color flashing is a problem, of course, but is covered by other WCAG criteria. Beyond that, the main concern of non-motion animation (as far as I know) is general distraction. Considering that we're talking about user-triggered effects in this criteria, distraction is probably not as big a concern.

It might be best to start narrow (specifically focusing on animated motion) unless/until there is clear argument to be more strict. Even if the initial criteria is AAA-level, you don't want to make it sound like everything is equally bad, and thereby discourage developers from substituting a fade-in animation for a slide-in animation.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Aug 7, 2017

Contributor

How about:

For any motion or scaling animations triggered by a user action that are not an essential part of the action...

Or trying to simplify:

For any non-essential motion or scaling animations triggered by a user action...

Contributor

alastc commented Aug 7, 2017

How about:

For any motion or scaling animations triggered by a user action that are not an essential part of the action...

Or trying to simplify:

For any non-essential motion or scaling animations triggered by a user action...

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Aug 7, 2017

Member

Provided there's no other types of animation that cause problems (as mentioned by @AmeliaBR), that looks good to me as a start to at least limit the scope. Wondering if it does still need some quantifier (as this would still disallow absolutely minimal changes like extremely small movements of 1px or similar) or if it's ok for now for AAA

Member

patrickhlauke commented Aug 7, 2017

Provided there's no other types of animation that cause problems (as mentioned by @AmeliaBR), that looks good to me as a start to at least limit the scope. Wondering if it does still need some quantifier (as this would still disallow absolutely minimal changes like extremely small movements of 1px or similar) or if it's ok for now for AAA

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Aug 7, 2017

Contributor

I think large areas of colour-change have been mentioned above, but I'm not sure what to call that?

In terms of the ones tackled in the articles linked above, they are all motion in one form or another, (even 'scaling' could be described as motion), so I think "non-essential motion" covers most things.

If you can think of a better way of saying "significant", or a quantifier we can use, let me know :-)

Contributor

alastc commented Aug 7, 2017

I think large areas of colour-change have been mentioned above, but I'm not sure what to call that?

In terms of the ones tackled in the articles linked above, they are all motion in one form or another, (even 'scaling' could be described as motion), so I think "non-essential motion" covers most things.

If you can think of a better way of saying "significant", or a quantifier we can use, let me know :-)

@cookiecrook

This comment has been minimized.

Show comment
Hide comment
@cookiecrook

cookiecrook Aug 7, 2017

FYI, although the Edge request has a respectable 117 votes, the Mozilla and Chrome bugs have only 2 and 3 votes respectively and are categorized as Priority 3. If you have a stake in this race and want this feature supported across implementations, spread the word and upvote. Thanks.

cookiecrook commented Aug 7, 2017

FYI, although the Edge request has a respectable 117 votes, the Mozilla and Chrome bugs have only 2 and 3 votes respectively and are categorized as Priority 3. If you have a stake in this race and want this feature supported across implementations, spread the word and upvote. Thanks.

@DavidMacDonald

This comment has been minimized.

Show comment
Hide comment
@DavidMacDonald

DavidMacDonald Aug 7, 2017

Contributor

@cookiecrook Done!

Note: it looks like this is not on the lockdown list for Aug for consideration in WCAG 2.1. It looks like the browsers could actually address this better than authors.

Contributor

DavidMacDonald commented Aug 7, 2017

@cookiecrook Done!

Note: it looks like this is not on the lockdown list for Aug for consideration in WCAG 2.1. It looks like the browsers could actually address this better than authors.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Aug 7, 2017

Contributor

Any comment from @nattarnoff or @CharlesBelov about the change to AAA and removal of 'significant'?

For motion or scaling animations triggered by a user action that are not an essential part of the action, there is a mechanism for the user to pause, stop or hide the animations while still performing the same action.

Not ideal, but the window for 2.1 SCs is rapidly closing, so it's a question of (possibly) something now, or wait for 2.2 / 3.0.

Contributor

alastc commented Aug 7, 2017

Any comment from @nattarnoff or @CharlesBelov about the change to AAA and removal of 'significant'?

For motion or scaling animations triggered by a user action that are not an essential part of the action, there is a mechanism for the user to pause, stop or hide the animations while still performing the same action.

Not ideal, but the window for 2.1 SCs is rapidly closing, so it's a question of (possibly) something now, or wait for 2.2 / 3.0.

@nattarnoff

This comment has been minimized.

Show comment
Hide comment
@nattarnoff

nattarnoff Aug 8, 2017

@CharlesBelov

This comment has been minimized.

Show comment
Hide comment
@CharlesBelov

CharlesBelov Aug 14, 2017

CharlesBelov commented Aug 14, 2017

@CharlesBelov

This comment has been minimized.

Show comment
Hide comment
@CharlesBelov

CharlesBelov Dec 22, 2017

A nice to have would be that if a user agent supports prefers-reduced-motion and the user has specified a preference for prefers-reduced-motion, that the content respecting eliminating unnecessary animation is AA. That is, there's no need to decide whether animation is bothersome if the visitor has specifically stated that animation is bothersome.

A nice to have would be that if a user agent supports prefers-reduced-motion and the user has specified a preference for prefers-reduced-motion, that the content respecting eliminating unnecessary animation is AA. That is, there's no need to decide whether animation is bothersome if the visitor has specifically stated that animation is bothersome.

@alastc

This comment has been minimized.

Show comment
Hide comment
@alastc

alastc Dec 23, 2017

Contributor

HI Charles,

The latest itteration of this SC is more general:

Animations triggered by user interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

However, that is pretty strict, so it is at AAA level. If we can get together some more research/evidence we can consider a AA version.

Cheers,

-Alastair

Contributor

alastc commented Dec 23, 2017

HI Charles,

The latest itteration of this SC is more general:

Animations triggered by user interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

However, that is pretty strict, so it is at AAA level. If we can get together some more research/evidence we can consider a AA version.

Cheers,

-Alastair

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.