# Feature request: better support for animation accessibility

**URL:** <https://discourse.mozilla.org/t/feature-request-better-support-for-animation-accessibility/45964>\
**Category:** Firefox Development\
**Created:** [September 29, 2019, 9:20pm UTC](https://discourse.mozilla.org/t/feature-request-better-support-for-animation-accessibility/45964 "2019-09-29T21:20:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![6op](https://avatars.discourse-cdn.com/v4/letter/6/ce7236/32.png) [@6op](https://discourse.mozilla.org/u/6op)\
**Post date:** [September 29, 2019, 9:20pm UTC](https://discourse.mozilla.org/t/feature-request-better-support-for-animation-accessibility/45964/1 "2019-09-29T21:20:19Z")

</div>

I think Firefox needs more attention to animation accessibility. I know that many people think that animation is “delightful,” but it can be a terrible amount of stress for people with visual motion sensitivity. (The problem can be related to vestibular disorders, epilepsy, autism, or other conditions.)

I always set `toolkit.cosmeticAnimations.enabled` to `false` with `about:config`, but it’s no longer enough. It removes the blue animation flash on the tabs, but leaves a lot of other cosmetic animations untouched.

I think that setting `toolkit.cosmeticAnimations.enabled` to `false` should actually disable all of them.

I’ve tried using the Stylus extension to remove all animations, but this breaks some pages, and I have minimal browser extensions in some of my Firefox profiles, because I need to see what sites look like without extensions during development.

Example: almost every time I load a web page, there is a horrible flashing from the zoom percentage in the address bar. I have the font size on most pages zoomed, and each page load causes a very distracting flash on the screen.

I’m using Firefox 70.0b9 on Ubuntu 16.04. The problem exists in several Firefox profiles including one that doesn’t have any browser extensions, so it doesn’t appear to be caused by an extension.

My feature request is to consider the `toolkit.cosmeticAnimations.enabled` setting and tie all the browser animations to that setting so that they can be turned off easily.

Here is some reading on animation accessibility:

- [https://simplyaccessible.com/article/animations/](https://simplyaccessible.com/article/animations/)
- [Designing Safer Web Animation For Motion Sensitivity – A List Apart](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/)
- [Vestibular Issues in Parallax Design – Web Axe](https://www.webaxe.org/vestibular-issues-parallax-design/)
- [Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective – A List Apart](https://alistapart.com/article/accessibility-for-vestibular/)
- [A Guide to Creating Accessible Animations | Envato Tuts+](https://webdesign.tutsplus.com/tutorials/a-guide-to-creating-accessible-animations--cms-32038)
- `https://alistapart.com/blog/post/more-resources-for-accessible-animations/`
- `https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-animation-effects`
- `https://accessibility.psu.edu/animations/`

(I had to de-link some of the URLs, because new users can’t post more than 5 links in a post.)

Some of those links suggest that elements shouldn’t be flashed more than three times per second, but I think it’s also helpful to make it possible for UIs to not flash at all.

Here’s what I have in my `about:config` at the moment. Let me know if I might have missed something obvious that might fix the problem.

 ![image](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/0/4/0415b7d5b012cf2818bba94c56c7b43526da6259.png)

---

<div class="post-metadata">

**Author:** ![6op](https://avatars.discourse-cdn.com/v4/letter/6/ce7236/32.png) [@6op](https://discourse.mozilla.org/u/6op)\
**Post date:** [October 1, 2019, 4:12pm UTC](https://discourse.mozilla.org/t/feature-request-better-support-for-animation-accessibility/45964/2 "2019-10-01T16:12:05Z")

</div>

After a lot of searching, I discovered `userChrome.css`, but it doesn’t seem to work correctly, even if I set `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`. (Sample rules are at the bottom.)

The word “legacy” in the setting makes it sound like the feature is [going to disappear](https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Tutorial/Modifying_the_Default_Skin).

It shouldn’t be this difficult — that one setting should turn all the cosmetic animation off, including the zoom icon and in the dev tools.

```auto
#urlbar-zoom-button {
    display: none !important;
    animation-name: urlbar-zoom-reset-pulse;
    animation-duration: 0 !important;
}
#urlbar-zoom-button[animate="true"] {
    animation-duration: 0 !important;
    animation-name: urlbar-zoom-reset-pulse;
    display: none !important;
}

```

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [October 2, 2019, 9:05pm UTC](https://discourse.mozilla.org/t/feature-request-better-support-for-animation-accessibility/45964/3 "2019-10-02T21:05:24Z")

</div>

The first line of your first rule completely hides the button in Firefox 69 because nothing after the display: none is ever needed:

```auto
#urlbar-zoom-button {
    display: none !important;
    animation-name: urlbar-zoom-reset-pulse;
    animation-duration: 0 !important;
}

```

If you still see the button, there might be an issue with file or folder naming or location. You can compare with the steps on my site here:

[https://www.userchrome.org/how-create-userchrome-css.html](https://www.userchrome.org/how-create-userchrome-css.html)

To remove _only_ the bulging effect, you just need to override the animation name:

```auto
/* Remove animation on URL bar zoom reset button */
#urlbar-zoom-button {
  animation-name: none !important;
}

```

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [October 2, 2019, 9:09pm UTC](https://discourse.mozilla.org/t/feature-request-better-support-for-animation-accessibility/45964/4 "2019-10-02T21:09:28Z")

</div>

That made me wonder whether this could work as a global animation override for the toolbar area:

```auto
/* Override animations in the toolbar area */
#navigator-toolbox * {
  animation-name: none !important;
}

```

I’m not sure what is animated these days, so I’m not sure how best to test that.

---

<div class="post-metadata">

**Author:** ![6op](https://avatars.discourse-cdn.com/v4/letter/6/ce7236/32.png) [@6op](https://discourse.mozilla.org/u/6op)\
**Post date:** [October 17, 2019, 9:26pm UTC](https://discourse.mozilla.org/t/feature-request-better-support-for-animation-accessibility/45964/5 "2019-10-17T21:26:38Z")

</div>

Thanks, I didn’t have the `userChrome.css` file in a `chrome` directory, but the snippet below seems to work on the one profile I’ve tested it on.

```css
#urlbar-zoom-button {
    animation-name: none !important;
}

```

It would be ideal if `toolkit.cosmeticAnimations.enabled` could disable all of the cosmetic animations by default. Superfluous animation is creeping into many areas of the browser, like dev tools and even the rendering of pages that don’t have any animations on them.

Animation is not “delightful” to some people. It interferes with our ability to browse the Web comfortably.