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
CITATION GOES HERE CITATION GOES HERE
Select a language: