#611·aos

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:

javascript
//Only enable AOS animations if prefers-reduced-motion set to false
AOS.init({
    disable: window.matchMedia('(prefers-reduced-motion: reduce)')
});