How I Made an Inaccessible Site Accessible for Myself with UserCSS

As mentioned in the blog post about reducing motion, I'm sensitive to certain types of movement on the web. For a long time, I've been wondering if there is a way to access and change websites' styles and modify them to not include that kind of movement.

A few weeks ago, my colleague Fotis demonstrated how to do this with user styles. I finally found the missing piece - I already knew how to remove or change the problematic things, but didn't know how to inject new styles into the pages.

In this blog post, I share how I wrote some simple enhancements for Mimmit Koodaa's (a Finnish initiative for getting more women to tech) webpage. They have some animations and auto-playing videos as background. As those animations can make me a bit dizzy and nauseous, and videos that automatically play are just distracting, I wanted to remove these factors from the website.

Stylus

For injecting the user styles to the site, I'm using the Stylus Chrome extension. If you want to read more, here's their repository:

openstyles / stylus

Stylus - Userstyles Manager

The basic idea with the Stylus extension is that users can use, edit and save user styles from either userstyles.org or self-hosted user styles (with postfixes .user.css and .user.styl). I'm self-hosting my code on Github, and you can find the link to the repository at the end of the blog post.

Writing the styles

As mentioned, I'm writing the styles with UserCSS. If you're interested in the syntax, or UserCSS in general, head to Stylus' docs about UserCSS.

Animation

On the website, on the page for this spring's launch event, there are animations behind the headings that shift horizontally when scrolling vertically. It's especially problematic for me, so that is one thing I wanted to get rid of.

I've fiddled with many websites to try to turn their animations off, and I've seen many different solutions. I was a bit afraid of what I would find. This time, animations were done with good old transitions, and I was happy. That is easy to fix.

I decided to go with the "remove motion"-solution for this instead of just reducing motion. All of the headings have a class of elementor-motion-effects-container, which wraps the heading-element and the image behind the header. That image is the one that transitions. Thus it's possible to target all the elements inside the container and set transition to none. Targeting all the child elements is done just in case if there ever appears something else that moves.

.elementor-motion-effects-container > * {
    transform: none !important;
}

Another problem on the launch website was the image gallery. I wanted to remove the animation from when images appear. They slide in, and it was a bit distracting.

Finding the correct class to set the properties wasn't easy. I went through multiple classes having different transformations and finally found the correct element.

Here's how I removed the animation:

.elementor-gallery-item__image.e-gallery-image {
    transition-duration: 0s !important;
    transition-property: none !important;
 }

Video

On the same page, there is an auto-playing video behind the hero/banner. As it's impossible to fiddle with the auto-playing attribute or pause the video with css, I decided to just remove the video. Luckily, there is actually a static background image behind the video, so the layout doesn't get messed up when removing something.

video {
  display: none;
}

Complete Styles

You can find the complete styles and instructions on how to install them from the repository:

eevajonnapanula / mimmit-koodaa-motion-safer-css

A Motion safe UserCSS for Mimmit Koodaa-website

Wrapping Up

I'm thrilled that I've found the tools to make the web more usable for myself by modifying the websites' styles. Of course, there are a ton of other use cases for UserCSS, and I can't wait to explore them.

However, this does not mean that the responsibility of making the web usable and accessible is on the users - accessibility is definitely a thing developers should learn and be concerned with when creating user interfaces. Even if I have the tools to modify the site for myself, it doesn't mean that most people have.

Have you ever tried out UserCSS or similar solutions?

Cover photo by Daria Nepriakhina on Unsplash

Comments

[Ben Sinclair]

I've used a few community style extensions. I find they're of variable quality and tend to go out of date quickly on sites that change a lot.

I wrote a post about using *monkey scripts to do similar things a while ago. Though not specifically with an accessibility aim in mind, I do use them to fix responsiveness and so on sometimes.

Remixing other people's websites

Ben Sinclair ・ Oct 12 '18 ・ 4 min read

#ux #ui #javascript

I see userscripts/userstyles as often a symptom of websites being bad in the first place. I almost wish that website owners would get a notification whenever one gets shared so they can see how much people want them to improve. But that's not fair, because they're not all about fixing problems and a lot of website owners would prefer to change their templates to break the plugin instead.

The biggest challenge with these modifications is sites which produce "div soup" or use horrible things like CSS-in-JS with random DOM IDs. I don't know whether this is on purpose or because it's some kind of JS trend, but finding that reloading the page makes <div id="sjdfh7823"><div id="dfsf37"><div..><div..> change its IDs is just the worst thing I can imagine, and it's a thing now.

[Eevis]

Yeah, you're right. I think getting a notification from such events would maybe open the owners' eyes to see that how many users actually can't/don't want to use the sites with the way they're built. From what I've seen, the argument against fixing accessibility issues is often about "But that group of users is so small, so we don't want to invest any money on them". That notification would maybe show how a) it is not a small group, and b) there are others as well who would benefit from fixing the site.

And yes! When I wrote

I've fiddled with many websites to try to turn their animations off, and I've seen many different solutions. I was a bit afraid of what I would find.

one thing what I was thinking about are those CSS-in-JS things and random ids. That is so frustrating, when I'm trying to fix the site quickly for myself, racing against the time before some kind of symptoms hit (if I can't hide the animation), and then realise that nope, those freaking ids are changing and I need to come up with something more time consuming and need to spend time staring at those animations 🙄 I usually just abandon the site at that point.

I need to check those things you write about, using scripting would totally help, as CSS can't do everything 😄 Thanks for sharing!