How to immediately increase the accessibility rating of your (GatsbyJS) site

When I first started working with GatsbyJS, I focused on creating fun colorful sites and honestly not really focusing on accessibility (a11y). In that way I had been severely spoiled with WordPress. I usually used themes which already had built in accessibility, so aside from color, there was not much else I had to do to make a site accessible. That changed when I switched over to building with GatsbyJS.

That is not to say that I was not being reminded of the importance of a11y when developing a site. A few years ago (2016 I think?) eslint-plugin-jsx-a11y came out. One can parse this plugin with an editor lint plugin, thereby adding accessibility standards into an application in real-time. I have been using this in my React development workflow for a while now, but often I used to simply turn off individual rules I did not know about.

Then I started working with GatsbyJS. Around the same time I started seeing much reference to a11y on Twitter amongst developers I follow. I also heard about cases where people with accessibility issues were suing site owners with low or no accessibility ratings, and I started to pay attention.

When I migrated my WordPress websites over to GatsbyJS, at first I did not pay any heed to accessibility when re-building my developer blog. I didn’t think it would matter much there. By the time I got to working on my business site, I decided to learn more about what an accessible friendly site meant and how to increase its accessibility rating.

The first thing I learned was that I had to pay attention to color contrast. According to the article Contrast and Color Accessibility on the WebAIM (web accessibility in mind) website,

Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page.

Initially, the colors I chose for my developer blog failed miserably. I later found out that I (originally) had an overall Lighthouse accessibility rating of 57! But what struck me the most was when I finished my business site for which I was extremely a11y conscious and revisited my developer blog, I screeched! In fact, I shared the following tweet on Twitter when that happened:

Forcing myself to make my sites more accessible has made me more sensitive to color choices and look at colors differently. When I completed my biz site and went back to my dev blog, I screeched! And now am working on making it more accessible all around. It's a process.

— Maria Campbell (@letsbsocial1) June 10, 2019

So why is web accessibility SOOO important now? Because now, more than ever, we are all extremely dependent on the internet. For example, physical businesses are closing in favor of ecommerce. There is less and less physical mail in favor of email. The list goes on and on. So in order for the web experience to be useful to those with impairments, we need to continue to make the web more accessible. We did it with wheelchair access on the physical plane, for example, so why not provide accessibility support on the internet?

As I mentioned in my tweet, it is a process. It is especially a process for creative types who want to show off their skills and creativity! We just have to become more creative within the confines of accessibility. That is a creative skill in itself, and that is how we should look at it. Things are ever evolving, and we have evolved into more of an a11y society. I don’t know how things work around the rest of the world, but it is definitely a big issue here in the States (as it should be).

Getting back to my accessibility journey with GatsbyJS, when it came to my business site, I wanted to make one that was “colorful” but still “color accessible”. To do that, I had to find tools that would help me get there.

First off, I made sure to make frequent use of Google’s Lighthouse Tool for Web Developers. According to the Lighthouse page,

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Next I had to find a tool which would let me know whether my color combinations passed the a11y “Contrast Ratio” test. I came across a great tool called ColorCube. ColorCube is

… an a11y tool aimed at designers and developers. From a list of colors, we give you lots of information about how those colors perform with common color combinations.

Created by Oomph, they state that

A better web is an accessible web for all. We wanted a tool that could be used before a project starts—one that helps assess how an existing brand color palette might perform in an accessible way. Starting early means that we can make adjustments early to avoid non-accessible colors later.

However, they also state

The algorithm used in this tool and subsequent results are based on the luminosity algorithm recommended in the WCAG 2.0 (Web Content Accessibility Guidelines) to test for contrast. This tool is for general assessment purposes only and not a guarantee of compliance.

That being said, I was literally copying and pasting a myriad of rgb and hex colors to see which ones MIGHT pass the contrast test. It was brutal, and the most frequent colors that popped up were black and white, and very dark accompanied by very light colors. This meant that sticking to accessibility guidelines means being severely restricted to what colors are acceptable!

Recently I (re)visited the A11y Project website. There, within the Resources page, I found a bunch of tools which would aid me even better in increasing the Lighthouse (color) accessibility rating of my (and my clients’) sites. A number of them are available as Chrome extensions as well. I have already added several of them and will be trying them out immediately! I will be sharing links to various a11y related resources, including the A11y Project, at the end of this post.

I didn’t want to stop at color contrast. I wanted to make my site immediately more accessible in other ways. After some research, I found that adding tooltips via the title attribute to links (or other html tags) would somewhat increase a site’s accessibility rating. In may case, it helped A LOT.

I still have more to address on my websites, but on my business site, overall my accessibility rating on the pages ranges from 81 to 91! That’s a tremendous increase from 65. On my home page, initially I got it up to 83, but with the addition of a text carousel yesterday with purportedly low contrast colors, it fell to 75. I will have to be revisiting it in order to boost that number pronto!

On my developer blog, the rating jumped from 57 to mostly 91+, with a couple of ratings in the 80s. Not bad for a quick start!

Happy a11y design and development!

Related Resources:

• The A11y Project
• Designing for accessibility, step 1: Color contrast
• Google’s Lighthouse for Web Developers Tool
• Web Content Accessibility Guidelines (WCAG) Overview
• Contrast and Color Accessibility
• eslint-plugin-jsx-a11y on Github
• Getting Started with Web Accessibility in React
• About Accessibility (and React) on the Official ReactJS Website
• Achieving Accessibility in React Applications