This small piece of CSS code will improve your website’s accessibility

When building websites, accessibility is a key concern we should keep in mind at all times. For the majority of users, website are relatively easy to use but for those with visual impairments the web can be a difficult place to navigate. These impairments cover a wide range with some experiencing diminished vision while others see colours differently: fortunately there are lots of tools and things we can do to help these users have a good experience when accessing our content. There are far too many to go into in a single article – contrast levels, font sizes and semantic HTML which caters for screen readers to name but a few – so today I’m going to share a small piece of code which will improve the experience of users who struggle with too much movement on the page.

On MacOS, movement can be reduced at the operating system level by enabling ‘Reduce motion’ in System Settings > Accessibility > Display; on Windows 11 you’ll be looking for ‘Animation effects’ in Settings > Accessibility > Visual effects (for other OSs please consult your favourite search engine). You can test this functionality by enabling it yourself and viewing a website in your browser: feel free to give MGHD.dev a go!

This small piece of CSS code can be easily integrated into your base styles and is designed to be a simple removal of as much motion as possible. First we target all DOM elements with the * wildcard selector, then remove all animations and transitions on these elements if the prefers-reduced-motion media query returns reduce, meaning the user has requested reduced motion as detailed above. I’ve included before/after pseudo elements because in my experience these are sometimes used to add moving elements such as button icons; the box-sizing style is a staple you’re likely already using but feel free to whip it out and refactor if not. Finally we include the !important property to make sure these styles override any more specific or inline styles.

Although this is designed to be a quick win for these users, you should still take care to thoroughly test your site after its inclusion as there may be edge cases for which this could cause problems.

Have you used something similar on your website? Do you have a different solution? Get in touch or let us know on social media!