Both of the techniques mentioned in this post are helpful for pulling that off. If you’ve got a looping animated GIF, that’s going to need some sort of pause/play controls to successfully meet this criteria. The placement and design of the buttons also fits the aesthetic of the overall design of the article which makes them both functional and aesthetically pleasing.Īnimated GIFs are something to look out for too. Other more decorative or illustrative animations in the article play once and then present a button to replay them, if users want to. Each animated figure loops infinitely once it starts, so they provide a play/stop button for readers to play the animation when they want to see it, and stop it when they’re done. The WCAG specification doesn’t dictate what these controls need to look like though, you have complete design control over that.Ī good example of this in practice is how the article series “Dark Side of The Grid” handles the example animations. If you have some of these longer playing animations, you’ll need to add some kind of pause and play controls that allow users to control the motion and/or auto playing behaviour. How to meet the Pause, Stop, Hide criteria This is especially true when these are designed to play on an infinite loop, which is most definitely longer than five seconds. While each individual animation within these patterns might still be very short, the overall motion that is created often plays out over more than five seconds. For example: auto-advancing carousels or slideshows, animated backgrounds, or animated illustrations. But there are some common patterns where this would apply. Most of the durations we might use in UI animation work are far under this five second threshold individually. The recommendation specifically applies to motion initiated by the web page without user interaction, and it might sound like something that doesn’t apply to UI animation work at first. It states:įor any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential For this one, the title gives a pretty big clue into what the recommendation is all about. The first of the WCAG recommendations that applies specifically to animation is Pause, Stop, Hide. Let’s dig into each of those recommendations in more detail to see how we can apply them to our work on the web: Pause, Stop, Hide If you haven’t looked at it in a while, the specification has been updated to version 2.1, and now has even more useful guidance on how we can design web animations that are accessible. These include guidelines for when to provide pause and play controls, limits for blinking or flashing the screen, and advice on when to provide reduced motion options for users with motion sensitivities. While different contexts can affect the details of what you need to do, the WCAG provides a number of recommendations for animated content and interactions. There are also more tactical considerations for making sure the animations on our site are accessible, and that’s where the Web Content Accessibility Guidelines (WCAG) comes in. There are strategic things we can do to make sure our animations have a positive impact on accessibility, like planning how they contribute to the overall UX and ease of use of our site. It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |