![]() There you have it, an inclusive, progressively enhanced replacement for animated GIFs using HTML5 video. If you have an iOS device (iPhone/iPad), you can turn on reduced motion by following these steps: If you have a mac you can turn on reduced motion by following these steps: If this is the first time you’ve heard of the prefers-reduced-motion query Val Head sums it up perfectly, in her post: The reduced motion query at a glance.Įssentially, we can tone down or remove motion that may be harmful to those with vestibular disorders or motion-sensitivities.Ĭurrently, this feature is only supported in Safari, but will hopefully be adopted by other browsers sometime soon. That being said, I will expand on the prefersReducedMotion() method. I’ve added comments to the JavaScript so it should be pretty clear what’s going on. Instead of jumping straight in, let’s progressively enhance the markup we’ve created.įirst things first, let’s hide the buttons we just added if they aren’t needed: - will display the text when a user hovers over the button, just like the title attribute doesįor a more in-depth explanation, make sure to read Building Inclusive Toggle Buttons by Heydon Pickering.aria-label - will be read out loud by screen readers.aria-pressed - we’ll be updating this value with JavaScript to indicate if the button is pressed or not.This works great for sighted users, but not for users who rely on a screen reader. You might be thinking it’d be much easier to just change the icon between states. Why do we have a separate button to play the video and a separate button to pause the video. Ok, let’s address the elephant in the room. With that covered, let’s have a look at the markup: This can cause someones vestibular system to struggle to make sense of what is happening, resulting in loss of balance, vertigo, migraines, nausea, and hearing loss. There are many reasons someone might want to pause a video ranging from saving battery life to suffering from vestibular disorders. ![]() To make our autoplaying videos more inclusive, we’re going to add play/pause buttons, so users can pause the video if they don’t want it to play. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |