webcompat.com icon indicating copy to clipboard operation
webcompat.com copied to clipboard

Published 20 hours ago • verified publisher icon webcompat

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

Open MarjaE2 opened this issue 3 years ago • 6 comments

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 https://github.com/webcompat/webcompat.com/issues/3134

MarjaE2 avatar Nov 15 '20 18:11 MarjaE2

@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?

karlcow avatar Mar 26 '21 06:03 karlcow

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 avatar Mar 26 '21 21:03 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.

MarjaE2 avatar Mar 26 '21 21:03 MarjaE2

@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.

CharlesBelov avatar Jul 22 '22 01:07 CharlesBelov

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. )

karlcow avatar Jul 22 '22 01:07 karlcow

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

ksy36 avatar Jul 29 '22 17:07 ksy36

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.

MarjaE2 avatar Jan 12 '23 17:01 MarjaE2

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?

ksy36 avatar Jan 20 '23 05:01 ksy36

Yes, it's working! Thanks!

MarjaE2 avatar Jan 20 '23 07:01 MarjaE2

Thanks for checking :)

ksy36 avatar Jan 20 '23 14:01 ksy36

This has been deployed to production

ksy36 avatar Feb 02 '23 17:02 ksy36

Currently broken in Firefox.

MarjaE2 avatar Aug 22 '23 07:08 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:

https://github.com/webcompat/webcompat.com/blob/050a1a1b2ff35e24a6603dac75b5be03b82765bd/webcompat/static/css/src/nav.css#L11

And/or here:

https://github.com/webcompat/webcompat.com/blob/050a1a1b2ff35e24a6603dac75b5be03b82765bd/webcompat/static/css/src/issue-wizard.css#L62

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

MarjaE2 avatar Aug 22 '23 08:08 MarjaE2