Add instructions to improve accessibility by setting disable: window.matchMedia('(prefers-reduced-motion: reduce)')
Author: ekelseyaCreated Aug 24, 2020Updated Jul 22, 2025
This is:
- Idea
Detailed Description
Animations can trigger vestibular disorders, causing vertigo, dizziness, and nausea. To reduce this, modern browsers support the prefers-reduced-motion flag (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#Browser_compatibility). Setting disable: window.matchMedia('(prefers-reduced-motion: reduce)') automatically disables AOS when the flag is set.
Possible Solution
Add instructions to the README:
Accessibility
To improve accessibility and prevent triggering vestibular disorders set:
disable: window.matchMedia('(prefers-reduced-motion: reduce)')
Examples:
//Only enable AOS animations if prefers-reduced-motion set to false
AOS.init({
disable: window.matchMedia('(prefers-reduced-motion: reduce)')
});Source: michalsnik/aos