search

w3c / wcag21

Repository used during WCAG 2.1 development. New issues, Technique ideas, and comments should be filed at the WCAG repository at https://github.com/w3c/wcag.
https://w3c.github.io/wcag/21/guidelines/
Other
142 stars 55 forks source link

Animation from interactions #18

Closed alastc closed 6 years ago

alastc commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Agreed. :+1:

lauracarlson commented 7 years ago

Signing up as SC Manager for Issue 18.

lauracarlson commented 7 years ago

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

lauracarlson commented 7 years ago

@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 commented 7 years ago
  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 commented 7 years ago

email thread on WCAG mailing list

DavidMacDonald commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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:

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Hi Laura,

I am uncomfortable with #3, and have a preference for #1.

JF

On Fri, Jan 20, 2017 at 11:59 AM, Laura Carlson notifications@github.com wrote:

Hi all,

For the "Significant animation" definition can anyone not live with either #1 https://github.com/w3c/wcag21/issues/1 or #2 https://github.com/w3c/wcag21/issues/2 or #3 https://github.com/w3c/wcag21/issues/3 as listed:

  1. Significant animation: animation which continues for more than 3 seconds and affects more than 1/3 of the viewport.
  2. Significant animation: animation which continues for more than 3 seconds 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.

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

Thank you, Laura

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/w3c/wcag21/issues/18#issuecomment-274137241, or mute the thread https://github.com/notifications/unsubscribe-auth/ABK-c94GT601CL5eA-AVBdkzavXxjnmcks5rUPYCgaJpZM4K2jdW .

-- John Foliot Principal Accessibility Strategist Deque Systems Inc. john.foliot@deque.com

Advancing the mission of digital accessibility and inclusion

lauracarlson commented 7 years ago

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 commented 7 years ago

4 would get my vote

alastc commented 7 years ago

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

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 commented 7 years ago

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 commented 7 years ago

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

johnfoliot commented 7 years ago

I'm still struggling with the "1-second" piece - 3 seconds I can sort of measure in this context, but 1-second? That would essentially ban all CSS transitions, and that will likely not meet the wider review we still need to undergo.

I'm with David MacDonald - 3 seconds should be the minimum bar.

JF

On Mon, Jan 23, 2017 at 11:33 AM, Laura Carlson notifications@github.com wrote:

Thank you @alastc https://github.com/alastc and @mbgower https://github.com/mbgower I updated the list of options.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/w3c/wcag21/issues/18#issuecomment-274558603, or mute the thread https://github.com/notifications/unsubscribe-auth/ABK-c2ciwG9pe3KMKgx_KeyUW2Nbgh-8ks5rVORngaJpZM4K2jdW .

-- John Foliot Principal Accessibility Strategist Deque Systems Inc. john.foliot@deque.com

Advancing the mission of digital accessibility and inclusion

alastc commented 7 years ago

Hi John,

Can you find an example of such as CSS transition? I mean one that is:

I'm struggling to see that because the first two aspects preclude most CSS animation, as either they are essential (e.g. menus, playing something), or they are quick.

In some ways I'm not too bothered about 1 vs 3 seconds as most are 'synchronised with user action' like World of Swiss, but we'd miss a few like Masterlock (clicking the buttons at the top).

DavidMacDonald commented 7 years ago

@alastc I prefer that animation under 3 seconds will pass this SC for the following reasons:

  1. We don't actually have good research for an accurate threshold, our 3 flashes SC had a ton of research, and also much case study and hospitalizations etc.
  2. We know for sure prolonged movement can be a significant problem for a fairly large audience, Nat seems to agree that the threshold of 3 seconds would be still be a very helpful SC
  3. In the world of CSS animations, 1 second would be very prescriptive without much research, and possible pushback
  4. There is a LOT of animation hovering around 1 second, which will make testing for accessibility professionals a big hassle, using a stop watch when we can't get to the time parameters in the code, but by the time you get to 3 seconds there's a pretty clear bright line between the failures and passes.
lauracarlson commented 7 years ago

Thank you @DavidMacDonald.

So can anyone not live with:

"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." ?

Thanks everyone. Laura

DavidMacDonald commented 7 years ago

I'd say "synchronized with a user action" may be at risk... especially if it is a short action. Perhaps "synchronized with a user action for the duration of the action more than 3 sections" OR "synchronized with a user action for the duration of the action"

lauracarlson commented 7 years ago

Okay. Thanks @DavidMacDonald . With David's tweak can anyone not live with:

"Significant animation: animation which continues for more than 3 seconds or is synchronized with a user action that persists for the duration of the action, and affects more than 1/3 of the viewport." ?

patrickhlauke commented 7 years ago

Wondering if, beyond "synchronized with", it should also mention "persists for the duration of" the user interaction?

lauracarlson commented 7 years ago

Thanks @patrickhlauke , I added "that persists".

DavidMacDonald commented 7 years ago

I'm OK with that, understanding that there may be pushback from some stakeholders on short animations that are synchronized with user actions, but the SC probably gives sufficient options for those stakeholders. Provide a button or setting, or it's essential movement. So let's put it out there in Draft 1 and see what comments come back. I've added it as a PASS in the spreadsheet http://tinyurl.com/jmo9st4

nattarnoff commented 7 years ago

I'm good with this wording as well.

Sent from my iPhone

On Jan 25, 2017, at 09:40, David MacDonald notifications@github.com wrote:

I'm OK with that, understanding that there may be pushback from some stakeholders on short animations that are synchronized with user actions, but let's put it out there in Draft 1 and see what comments come back.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

mbgower commented 7 years ago

I'm worried we're getting a bit wordy here, which doesn't always help readability, and hence clarity. If something is synchronized with user actions, i think there is a clear inference of persisting. It's not "triggered" by user actions, it's synchronized. Qualifiers can be put in the Understanding doc. I'd encourage going back one iteration. If you want, maybe it helps to add another comma:

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.

mbgower commented 7 years ago

There is a LOT of animation hovering around 1 second, which will make testing a big hassle, but by the time you get to 3 seconds there's a pretty clear bright line between the failures and passes.

BTW, if 1 second seemed borderline, why move immediately to 3 seconds? Why not 2 seconds? I'm assuming the three seconds comes from the flashing criteria, but shouldn't we base the time on what triggers vertigo, etc., not on trying to maintain some arbitrary time consistency for different disabilities?

BTW, not inferring 2 seconds is the trigger; just that it seems like the next logical increment to propose if 1 is too short.

lauracarlson commented 7 years ago

Agreed. It is getting wordy.

@patrickhlauke would you be okay leaving out the "persist" part? That could go in the understanding doc. So with @mbgower 's added comma (thanks Mike) we would be back to:

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.