RE: SC 2.3.3 Animation from Interactions question - an accordion

Hi Alastair,

Thank you for the very helpful comments.

I had missed that reference to a media query for reduced motion:
https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html#examples


Very useful (I <3 CSS).

I was about to ask if you/colleagues knew if there was a *degree* of motion below which 2.3.3 does not apply, given for example the movement here
https://codepen.io/css-tricks/full/irqvo

is so small. But the wording of 2.3.3:


Ø  “Motion animation triggered by interaction can be disabled...”

seems unequivocal.

So unless I read otherwise, I will likely be using MQs to tackle this in the future.

Thanks again, cheers,

Alan

Alan Bristow
Web Programmer
Policy and Public Affairs
Elections Canada
Desk 9-A-053
30 Victoria Street, Gatineau, QC K1A 0M6
alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>
Tel.: 819-939-2232

From: Alastair Campbell [mailto:acampbell@nomensa.com]
Sent: January-10-19 12:23 PM
To: Bristow, Alan; 'w3c-wai-ig@w3.org'
Subject: Re: SC 2.3.3 Animation from Interactions question - an accordion

Hi Alan,

Providing a control, or depending on your position on accessibility-support you might use a CSS media-query.

The essential part is that it opens, but like the ARIA example:
https://www.w3.org/TR/wai-aria-practices-1.2/examples/accordion/accordion.html


It is not essential that it ‘slides’ open with an animation.

Personally, I would use the CSS media query as this technique does (temporary URL, soon to be published as CSS 39):
https://cdn.staticaly.com/gh/w3c/wcag/tech-reduce-motion/techniques/css/reduce-motion-query.html


Put the slide aspect inside the reduce-motion query, and anyone who has set that will not see the animation.

Kind regards,

-Alastair


From: "Bristow, Alan"

All,

Would providing a control to disable an accordion (accordion example: https://codepen.io/css-tricks/full/irqvo) be necessary given:

‘Success Criterion 2.3.3 Animation from Interactions’
https://www.w3.org/TR/WCAG21/#animation-from-interactions


?

Alan Bristow
Web Programmer
Policy and Public Affairs
Elections Canada
Desk 9-A-053
30 Victoria Street, Gatineau, QC K1A 0M6
alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>
Tel.: 819-939-2232