Guerrilla Accessibility: CSS Tricks

Scary thing in the darkness

Not all disabilities are treated equally and you can’t create 100% accessible space. Those two rules are absolute. What you can do is to create things which can be easily made accessible. CSS Tricks is tricky but it can be made accessible for a subset of people living with anxiety.

The current design iteration of CSS Tricks utilizes thumbnails in the background which are kept partially in darkness. Unfortunately that triggers my anxiety the same way darkness at night does which is a reason why I use a nightlight.

CSS Tricks without my filter applied and thumbnail is visible

After a bit of1 poking I was able to find a nightlight for CSS Tricks.

First step is to install an add-on which allows to run custom code. I use Stylish in Firefox2 and it is available for Chrome as well.

Second step is using a piece of code:

Unfortunately it’s necessary to use !important  because styles for thumbnails are inlined and generated on the fly. The final result looks like this:

CSS Tricks with my filter applied and thumbnail is not visible

With this small adjustment I am able to read posts, browse archives and visit the homepage without having my anxiety triggered.

  1. It took me couple of months to overcome the initial parts of starting anxiety
  2. This is my main browser