anchor.diff:  = Reduced Motion Media Query to Avoid Vestibular Disorders and Seizures
  +
   :hp-tags: css3, accessibility, Reduced Motion, prefers-reduced-motion, media query,
   
   When I was doing my research in Accessibility, I came across the term Vestibular Disorder. I really didn’t know much about it at that time. It is basically a type of disability that a person viewing the screen might have. It is often grouped with seizures and symptoms may include dizziness, vertigo, nausea, etc. 
   
  -In terms of browsing the web, this sort of motion sickness might be caused by weird animations, or parallax backgrounds[1], which a lot of might not like and thus causing a higher bounce rate [4].
  +In terms of browsing the web, this sort of motion sickness might be caused by weird animations, or parallax backgrounds[1], which a lot of might not like and thus causing a higher bounce rate[4].
   
   In order to provide a solution for this accessibility issue, the web specifications now include a new media query called `prefers-reduced-motion`. What it does is, it lets the browser run a specific css stated under `prefers-reduced-motion` media query[3] which can contain fixes for Reduced Motion. 
  +
   
   == Enable Reduced Motion
   
  
positive.code: }
  --------------
  
  If you want, you can take a look at the demo below. If you have Reduced Motion enabled, you will see a black overlay. Or else you see a gif.
  
  ++++
  <p class="codepen" data-height="1029" data-theme-id="3991" data-default-tab="result" data-user="prateekjadhwani" data-slug-hash="eajegp" style="height: 1029px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="prefers-reduced-motion">
  
negative.code: 
  
  If you are unable to view the gif above, the steps are as follows:
  
  1. Go to *System Preferences* > *Accessibility* > *Display*
  2. Click on *Reduce Motion* checkbox
  
  And you can disable by unchecking the same checkbox. 
  
  