Back in the previous millennia I used to loved (Macromedia) Flash and all it’s possibilities with animations. It was very easy to start with the timeline editing, frame by frame and then adding different loops and even functions in code.
My end results were nothing to brag with, not when I compared them with the top notch Flash sites out there, just to make this clear. But I loved the process. And I didn’t make online things but auto-playing compact disk (CD) presentations. It was a niche work not meant for online use, as it was the best option at the time when it took about half an hour to download 5 Mega Bytes via dial-up modem (making telephone line busy all the time and telecom company happier for each minute I had to pay).
Back to Flash – it was kind of a static environment (I like to think it was just as HTML canvas is today), so it was mostly non-responding to user settings like for example bigger fonts (at least not by default – one could do it by using different hacks, but cross-browser support was like large piece of cheese with large holes – a factor of luck).
It was before I was aware of accessibility and back then I thought it really was amazing. Fast forward to today – I can’t help myself being reminded of those days with the web today – when I see canvas rich animations, even three dimensional ones, powered by WebGL and all sorts of animations on large or micro scale.
But I worry about people left behind now. Perhaps this comes with age, but for sure it comes when we consider accessibility.
So I wanted to write about possible issues with animations, especially the floating ones, as the title suggests. The ones that kind of float or hover close to classical web content and react on different user interactions. That are mostly decorative, but can also be needed for understanding (please don’t).
It’s important to be aware of the dangers before we can even consider what would be their robust solutions. And solutions are very often very specific. Typical “It depends” situations, where context understanding is key.
So just to list some potential dangers I beg you to consider when making animations (especially floating ones):
- What happens when user zooms in? Are animations covering texts and other information, so that it can’t be perceived?
- And what if user resizes their font to 200% (or even more)? Does things overlap and makes the website or app impossible to use?
- With responsive design – did you make sure elements are not covering text and other info on all screen sizes, starting with 320 x 240 pixels?
- And what about dark and high contrast modes? What happens with the animated content if user changes them?
- If animations are stopped or paused at wrong time/position – can they prevent users of using the website or application ? Can animated elements that are not animated anymore stop at wrong position and overlap with content making it difficult or impossible to understand?
- Not to forget the classical animation loop – can the user pause or stop or hide it?
- And with all the on scroll animations – what if the user can not scroll at all? Perhaps only use a keyboard? What happens with the animations then?
These are just some thoughts that came to my mind, and I am certain you can find more when you test a website or app with animations. And as we are all different – it makes total sense to test with different people.
Web Content Accessibility Guidelines are just the baseline, and there are too many different technologies we can use on the web for WCAG to cover. So make sure to have a test routine that goes beyond WCAG.
And in my experience testing animations takes quite a lot of time when we consider variations of users, devices, software.
I am not saying we need to drop animations, but just make sure that your “eye catchers” are not causing harm to people (and they can actually make people harm, even trigger seizures, so please be careful).
