Accordion Example: Add animation on expand/collapse

[arbydev]

A complaint I have heard of your accordion example: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/accordion/accordion.html

Is that it does not smoothly animate on expand and collapse. It just blinks open and closed. It would be nice if there were configuration options that were included in your example to choose whether it does animate and what speed and easing is used.

Here are some examples of animated accordions:

https://codepen.io/chriswrightdesign/pen/cmanI https://jqueryui.com/accordion/ http://css3.bradshawenterprises.com/accordions/

[arbydev]

Another example accordion is on the IBM Carbon design system. http://carbondesignsystem.com/components/accordion/code

[gaurav5430]

I am willing to take this up. Can we discuss what kind of animation we are looking for? Can we do that in CSS + JS or do want pure CSS ?

[mcking65]

@smhigley will this be addressed by #1834?

[millieloop]

Hey, was this addressed in the end? :) - I've got the exact same question as the OP. - 4+ years later.

[JAWS-test]

@arbydev and @millieloop

The ARIA APG are intended to show how to use ARIA correctly with various widgets. This is what the pattern for Accordion does. It is not about providing implementations for all visual variants (animation, font color, text size). Everyone is free to make these adjustments.

If animations are wanted, then it should be noted that they are unfavorable from an accessibility point of view, see WCAG 2.3.3

[JAWS-test]

@mcking65 I think the issue can be closed for formal reasons and in terms of content:

• Formal: Visual adjustments can be made if necessary, they are not in the scope of the ARIA pattern.
• Content: According to WCAG (SC 2.3.3), animation from interactions should be avoided.

[jugglinmike]

The ARIA-APG Task Force discussed this during its weekly meeting today. Meeting minutes are available here, and I've copied the relevant part of the IRC log below:

IRC log of the discussion

<jugglinmike> Topic: Accordion Animation <jugglinmike> Matt_King: In a meeting a long time ago, people were complaining that the accordion was jerky, and they suggested to add animation <jugglinmike> Matt_King: We decided that we could make it animated, and we put an issue in the backlog. That was almost five years ago! <jugglinmike> Matt_King: JAWS-test recently commented that animation is a WCAG issue <jugglinmike> Matt_King: But the type of animation you would add here does not seem like the type of animation that WCAG is referring to <jugglinmike> Jem: [reads the relevant text from https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html ] <jugglinmike> Matt_King: We could agree to not add animation, or we add animation and use the CSS media query for "prefers reduced motion" <jugglinmike> CurtBellew: Oracle animates their accordions. They're useful--I think they make them easier to use visually <jugglinmike> CurtBellew: I don't feel strongly that animations are a necessity, though <jugglinmike> [general discussion about the value of animation] <jugglinmike> Matt_King: This sounds like it would be a positive and it doesn't sound like it violates WCAG 2.3.3, especially if we use "prefers reduced motion" <jugglinmike> Matt_King: So let's go for it and resolve this old issue <jugglinmike> Jem: I'll mention this issue in Sarah's pull request