[A11Y] Bug report form can trigger migraines and motion sickness for users with visual or vestibular issues

[MarjaE2]

Visiting https://webcompat.com/issues/new

1. Type url into 1st field.

2. Click confirm.

3. Get hit with blinding pain. Get migraine and motion sickness. It's hard to see as it happens, but I think there's flashing and smooth scrolling. Flashing often gives me migraines, and smooth scrolling, zooming, etc. always reliably do.

See also #3134

[karlcow]

@MarjaE2 There's no flashing but there is smooth scrolling moving all the page indeed.
What would be the type of interactions that would not trigger the motion sickness and migraine?

[MarjaE2]

There is flashing when I try that page, as well as painful smooth pain-scrolling. I have a really bad migraine + nausea after checking.

[MarjaE2]

A lot of standard web design can trigger migraines. For me, smooth scrolling is by far the worst and hardest to protect against. Others include flashing, zooming animation, marquee animation, parallax animation, carousel animation, foregrounds scrolling separately from backgrounds, columns scrolling separately from each other without enough distance and distinctiveness, the nav buttons on the new about:reader, headers flashing and/or animating as users scroll, modals suddenly flashing, and so on.

[CharlesBelov]

@karlcow One step would be that if prefers-reduced-motion is set on the operating system to not autoscroll as the site visitor answers each question as well as suppress the smooth-scrolling feature. Let the site visitor control all scrolling. prefers-reduced-motion is supported on Windows, Android, macOS and iOS in Chrome, Safari, and Firefox.

[karlcow]

Thanks @CharlesBelov. FYI @ksy36

(I lightly participate to this part of the code right now. I hope I can dedicate a bit of time in the future, but not right now. )

[ksy36]

Thanks for the ping, I'll take a look at this when I have some spare cycles :)

[MarjaE2]

I currently use layout.frame_rate 1 in Firefox as a global fix to stop animation. Inspecting webcompat, a lot of the site uses transitions with "ease" animation, which explains a lot of the migraines and motion sickness I've encountered. I would suggest removing the "ease" animation, at least for users with rprefers-reduced-motion.

[ksy36]

Hi @MarjaE2, I've removed animation and scrolling for the form and deployed it on https://staging.webcompat.com/issues/new. Could you please check it without modified layout.frame_rate and with prefers-reduced-motion?

[MarjaE2]

Yes, it's working! Thanks!

[ksy36]

Thanks for checking :)

[ksy36]

This has been deployed to production

[MarjaE2]

Currently broken in Firefox.

[MarjaE2]

It looks like its the result of the "Navigation" section on the top of the form here, as well as the aggressive use of transform functions with timers and "ease in-out" timing code.

https://webcompat.com/issues/new

The offending code appears to be here:

webcompat.com/webcompat/static/css/src/nav.css

Line 11 in 050a1a1

transition: transform 400ms ease;

And/or here:

webcompat.com/webcompat/static/css/src/issue-wizard.css

Line 62 in 050a1a1

transition: top 400ms ease, box-shadow 200ms ease-in;

But the relevant lines haven't been changed anytime recently.