Overriding CSS to help with ADHD
A friend with ADHD approached me years ago, telling me that she’d love to be able to surf the web, but all the different font sizes and colours really made her life difficult. We devised a CSS override that basically eliminated everything that she found distracting.
20 years later, it is still possible to achieve something similar, although it is more complicated because the range of elements, custom classes and ID’s, layout declaration and CSS techniques has grown exponentially. It can take a bit of fiddling to get what you want. And it might not be possible to get all sites looking satisfactorily. But it might be that you will be able to create something that works well on the sites you visit most often.
Accessibility is about more than just screen reader users and people with ADD or ADHD are often forgotten in the accessibility “race”. While a lot of people with ADHD have developed coping techniques, they may not be aware that there are some technical solutions that might help them.
The concept
It’s simple, but can be fiddly.
- Create a CSS file that will override a page’s elements the way you want.
- Place the CSS file in your browser’s user profile
- Restart your browser.
You can create a stylesheet to override styles on all pages. Or you can target specific sites.
Alternatives
Plugins
There are, or at least were, some plugins to achieve something similar, which may be easier than the method described here. But my quick search has not revealed plugins that were still in development. And I tend to like to “roll my own”, but that depends a lot on your skills. You may be able to spend a bit of time to research plugins if you need this but feel overwhelmed with all the technical stuff.
Edit: Ashley Bischoff pointed to Stylish, a plugin that works well in Firefox. Thank you Ashley.
Reader mode
An even easier method would be to trigger the browser’s reader mode. This gives you a distraction free read on a lot, although not all, pages. Variations of this are available in Firefox (Reader View), Safari (Reader View), and Chrome (Distill mode).
Smashing Magazine article as is
The same Smashing Magazine article in Reader mode in Firefox.
In practice
Locate the user folder in your browser
I’m giving instructions for Firefox on OS X. But you can do this on Firefox or Chrome on OS X, Windows and Linux.
- In Firefox, press the ALT key to show the top menu.
- Click on Help, then Troubleshooting information.
- Click Show Folder beside Profile Folder
Create a folder and file in the user folder
- Create a folder called “chrome” in the folder that opens (note, use a small c, not a big C. Also note, yes, even though it’s for Firefox browser, the folder needs to be called chrome.)
- Create a file called userContent.css in that folder.
Edit the CSS file
I used Eric Meyer’s Reset CSS 2.0 as a starting point. You can grab that here: http://meyerweb.com/eric/tools/css/reset/
From there, it’s a question of fiddling with the various declarations to make it work for you.
- To ensure my CSS overrides everything, I added ```
!important
with each declaration. - I also removed all font colours and text-decoration. You may not wish to do this, but as it is something I had done for Sheryl, I figured I do that again.
- I set all images to ```
display:none;
to eliminate further distraction.
Customizing for a specific site
Should you wish to apply these changes only to a specific site, wrap all the relevant declarations inside:
@-moz-document domain(example.com) {
}
Download my file
userContent.css – Be aware, this is just to give you an idea. It was created quickly. Don’t use without modifying for your own needs.
Where you replace example.com with the relevant domain.
Results
In order to see the results, you have to restart your browser.
Looking at my homepage with my userContent.CSS overriding the page isn’t too bad.
Comparing CNN’s homepage with and without my CSS override shows that it would take a lot more work to make it function properly. But it might be worth the time if you want to access the news from that particular site and the layout, animation, etc drive you to distraction.
With CSS override applied.
Without CSS override
What about you?
I’d love to hear how you manage surfing an increasingly distracting web if you have ADHD.