Reducing Motion to Improve Accessibility

Content Warning: This blog post contains gifs. Hey friends! In this post, I am going to walk you through a newer media query (to me): prefers-reduced-motion . Quick confession: I know CSS fundamentals, but I am pretty behind on all the new stuff that …

Content Warning: This blog post contains gifs. Hey friends! In this post, I am going to walk you through a newer media query (to me): prefers-reduced-motion . Quick confession: I know CSS fundamentals, but I am pretty behind on all the new stuff that has been coming out. Because my focus is usually on accessibility, I am focusing far more on HTML and JavaScript. When I focus on CSS, it’s ensuring proper color contrast or custom focus states. Sometimes I use CSS to make checkboxes keyboard accessible . I always associated media queries with responsive design. I never thought of media queries as an accessibility enhancement. In this post, we are updating my blog by: Adding the prefers-reduced-motion query Adding a user-controlled setting for reducing motion. Understanding prefers…


Print Share Comment Cite Upload Translate
APA
a11y with Lindsey | Sciencx (2024-03-28T19:07:03+00:00) » Reducing Motion to Improve Accessibility. Retrieved from https://www.scien.cx/2019/08/13/reducing-motion-to-improve-accessibility/.
MLA
" » Reducing Motion to Improve Accessibility." a11y with Lindsey | Sciencx - Tuesday August 13, 2019, https://www.scien.cx/2019/08/13/reducing-motion-to-improve-accessibility/
HARVARD
a11y with Lindsey | Sciencx Tuesday August 13, 2019 » Reducing Motion to Improve Accessibility., viewed 2024-03-28T19:07:03+00:00,<https://www.scien.cx/2019/08/13/reducing-motion-to-improve-accessibility/>
VANCOUVER
a11y with Lindsey | Sciencx - » Reducing Motion to Improve Accessibility. [Internet]. [Accessed 2024-03-28T19:07:03+00:00]. Available from: https://www.scien.cx/2019/08/13/reducing-motion-to-improve-accessibility/
CHICAGO
" » Reducing Motion to Improve Accessibility." a11y with Lindsey | Sciencx - Accessed 2024-03-28T19:07:03+00:00. https://www.scien.cx/2019/08/13/reducing-motion-to-improve-accessibility/
IEEE
" » Reducing Motion to Improve Accessibility." a11y with Lindsey | Sciencx [Online]. Available: https://www.scien.cx/2019/08/13/reducing-motion-to-improve-accessibility/. [Accessed: 2024-03-28T19:07:03+00:00]
rf:citation
» Reducing Motion to Improve Accessibility | a11y with Lindsey | Sciencx | https://www.scien.cx/2019/08/13/reducing-motion-to-improve-accessibility/ | 2024-03-28T19:07:03+00:00
https://github.com/addpipe/simple-recorderjs-demo