Expanding Accessibility around CSS Animations

[Antonio-Laguna]

Description of the Change

This change comes motivated due to our scaffold using some code like this:

/*
 * Resources on prefers-reduced-motion:
 * https://webkit.org/blog-files/prefers-reduced-motion/prm.htm
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
 */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}
}

Which takes a nuked motion approach rather than reducing motion. Before tackling that I wanted to ensure that the Best Practices were reflecting what I think could be a better approach.

The accessibility area was mentioning limited support which is no longer true. However, I still think we should take an accessibility first approach (same as we do mobile-first) so in the event that an unsupported browser encounters this, the written code will favor accessibility rather than movement. I've expanded that section so it gets also an example of more complex animation and how could it be made with this approach in mind.

I've also gone and made some things more consistent in terms of a missing Prefer section and ensuring that brackets and semicolons were consistently applied.

Checklist:

• [X] I have read the CONTRIBUTING document.
• [X] My code follows the code style of this project.
• [X] My change requires a change to the documentation.
• [X] I have updated the documentation accordingly.
• [ ] I have added tests to cover my change.
• [X] All new and existing tests passed.

[Antonio-Laguna]

@amesplant I'd love to get your input here and see whether the changes make sense and/or if you'd want to expand on this

[amesplant-dmv]

Thanks @Antonio-Laguna for the focus on Accessibility first .. looks good to me!