Accessibility

FlatifyCSS respects accessibility. For documentation, attributes like aria- are included with examples and there is always a note for accessibilty.

Reduced motion

Based on this article: "Vestibular disorders can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss. Anyone who has spun around too quickly is familiar with a confused vestibular system."
As web developers, we should consider this and define or reset current animation and transitions with limited movement.
In favor of prefers-reduced-motion media feature, it is possible to know if the user wants reduced motion or not.

FlatifyCSS takes these facts over, inside a11y.scss file these rules are applied:

Background

Depends on web.dev article:
"There are decorative effects like animated gradients, parallax scrolling, background videos, and several others. While many users enjoy such animations, some users dislike them because they feel distracted or slowed down by them. In the worst case, users may even suffer from motion sickness as if it were a real life experience, so for these users reducing animations is a medical necessity."

We fix the issue with: background-attachment: initial;

Transitions

No transition is necessary for reduced motion so we reset FlatifyCSS defined transitions duration to 0: -flatify__simple-transition
-flatify__long-transition
-flatify__bouncing-transition

Animations

We use flatify-fade-in, flatify-fade-in-out and flatify-fade-out animations instead of primary, also it is a good practice to limit animation steps for complex animations like what we do for spinner loadings: