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
140 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

mbgower commented 7 years ago

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

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

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

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

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

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

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

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

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

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

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

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

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

My 2¢, I'm ok with the move. It gets things rolling and addresses it as a goal we can refine and make lower tiers within AA and A. There are people who need all animation off, and I know I was one for quite a while, so AAA and removal of 'significant' makes sense.

With more research we should be able to find a AA SC that benefits a large portion of the community who needs this. If anyone has the time and resources for that research, I'm happy to have a meeting about what I did, what worked, what didn't work, and what I would do if I had the time and resources to do the next level. It would be nice to see AA in 2.2, but certainly by 3.0.

On Mon, Aug 7, 2017 at 5:25 PM, Alastair Campbell notifications@github.com wrote:

Any comment from @nattarnoff https://github.com/nattarnoff or @CharlesBelov https://github.com/charlesbelov about the change to AAA and removal of 'significant'?

For any 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.

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.

— 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-320797542, or mute the thread https://github.com/notifications/unsubscribe-auth/AAXI4Ljs8IFk077JkXtEudZKTo1q6J27ks5sV47mgaJpZM4K2jdW .

CharlesBelov commented 7 years ago

On the Mozilla animation reduction issuehttps://bugzilla.mozilla.org/show_bug.cgi?id=1365045, note that Bugzilla’s UI to upvote is not obvious. You have to expand the Details section to access it, not simply comment a +1.

Hope this helps. Charles Belov Webmaster, Communications and Marketing

CharlesBelov commented 6 years ago

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

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