It was Christmas Day in 2012 that I had my first major incident. You see, for as long as I could remember I suffered from migraines. I recall having to takes days off school when I was a freshman. But they started before that. At this moment in time, I was getting 20+ migraines a month. I had migraines that would last days. I had some last hours. Those were the worst. I’d start to feel better to only have another come on before the end of the day. Along with the migraines would come anxiety, nausea, dizziness, brain fog, aphasia. But that day was different.
I had been under a tremendous amount of stress earlier in the year due to a custody battle. It supposedly resolved itself in November. But on Christmas it came up again. I hadn’t had a headache that day. As I dealt with this situation, I began to feel weak and nauseous. I started stumbling into things. Still no headache, but the worst instability I had ever felt.
By May my doctor told me I wasn’t allowed to drive, but they wouldn’t take my license yet. I was using a cane 100% of the time and occasionally needed a wheelchair. I worked at a company whose entrance (at least the closest one), was nearly a 1/4 mile to my desk. The long hallway ended in a giant floor to ceiling window broken out into 9 sections. As I walked that hallway, the window actually looked tilted by about 45 degrees, rotated right. Despite not looking at it as I walked the hall, I always drifted right. Often falling into the wall. By the end of the summer of 2013, it became hard to keep going into the office. The wear on me was significant. My performance of course suffered. How do you excel when your brain is in a fog all day and you forget words? Yet, by mid-September I had three offers for remote work. I jumped on one and haven’t looked back. It’s made a huge difference.
What does this have to do with WCAG?
While I had been doing accessibility work for over a decade at that point, the criteria don’t always become clear in why we need them immediately. The reasons may not be obvious right away. Following rules is fine in most situations. However, a key to accessibility and disability work is to understand the lived experience. I hope mine, helps here.
Criteria
When we talk about 2.2.2 Pause, Stop, Hide, we are talking about a variety of things. It could be video, animation, marquee, auto-scrolling, carousels, or something else. Any of these items could trigger a reaction that could make them very sick.
To comply with the guideline, we want to offer an option to the user. This option allows users to pause or stop the movement whenever there is auto-playing. The better move is to not auto-play anything and provide the user with a control to play it on their terms. Then they know to be prepared which can alleviate symptoms.
Allow users to pause or stop the movement whenever there is auto-playing
If you can’t sell the auto-play being off, still provide the button to pause everything. You can add another layer of protection for users like me. All operating systems come with a reduce motion setting. This limits things like zooming, genie effects, and a few other motion related features. It also carries into the applications running on the OS. Your browser knows if you’ve turned this on.
Prefers-reduced-motion
Shortly after my, now diagnosed, vestibular disorder joined my life, so did iOS7. This was a punch to the guts. I spoke with industry leaders. I spoke with reporters. Eventually, Apple added the Reduce Motion feature which feels like it saved my life. Everyone else followed suit quickly. At the W3C, WCAG, the CSS and JS working groups were putting together solutions for this.
The CSS and JS groups decided on a media query of prefers-reduced-motion. This has two values it can carry:
no-preference: show me all the animationreduce: limit animation, this is also the property default and does not need to be declared
You can also use JavaScript with windows.matchMedia('prefers-reduced-motion')to determine the user’s preference. This allows us two ways to make the site the way the user prefers. If the setting is “reduce,” don’t auto play.
The media query is also a good one to use to address issues related 2.3.3 Animation from Interaction. This guideline addresses issues from user initiated action, like parallax.
Eliminating animation isn’t my goal
Limited motion does not equal no motion
I want to make this especially clear. Because of my disorder, I despise most web animation. But eliminating animation isn’t my goal, or an objective I’m pushing. I’m pushing to let the user control their level of animation.
If I have prefers-reduced-motion on, I’m not looking for no animation. I’m looking for the least animation possible to convey the message. I’m not going to slap your hand because you made a mega menu (opening/closing is animation even if instant). Same for selects, accordions, tabs, etc. Where we start to get in problems is when the animation is not essential to function. Parallax scrolling is not essential.
Come find me on LinkedIn and BlueSky to continue the discussion!