Making this site accessible

Background

I attended Women Who Code Portland’s Design Study Night Online: Accessibility Design Principles and Strategies. I learned a few things. I have known some basics for years now, like always set the alt text.

What I learned

Color contrast is important. There are tools that measure contrast. WebAIM has a great contrast checker.

Structure is (more) important (than I thought). I know better than to use an h1 just because I want large text. What I did learn is that a page should probably only have a single h1, and heading tags should be hierarchical. I usually follow this practice, but I found many examples where I did not.

“Click here” is lazy. These words do not describe what is behind the link. I do this all the time. My format has been: “You can find more examples here,” where here is a link. Often I use a colon, or list URLs. That appears to be even worse, because some (many? all?) screen readers will read the URL. It cannot be pronounced. Imagine a URL with some sort of ID at the end. Imagine a URL with a query string. If it’s a link to a document, then title the link as the document’s title.

Another critique of “click here” is the ingrained ableist language. Not everyone clicks. Not to mention, someone might be tapping. There is no good reason for using this language anymore. Instead of “click here to download,” use “download thing.” Instead of “click here to read more,” use “read more.”

The most important thing I learned was about WebAIM’s Web Accessibility Evaluation tool, WAVE. I evaluated my personal website and saw nearly a dozen alerts for lacking color contrast. My next thought was to evaluate my website without releasing the changes. Thankfully WebAIM has me covered with a WAVE Firefox extension.

Changes

Here are some changes that I made. It didn’t hurt. You should give it a try.

First up is increasing the color contrast. I didn’t use WebAIM’s contrast checker. All I had to do was darken the grays in this website’s theme. The blue used for links was too light against the white background, so I darkened it.

I replaced any undeserving h1 tags with h2 tags. Meaning, I replaced most of them. I did the same with other headings so that each page had a clear hierarchy.

The pagination links on each page used to be arrow icons. I changed those to be text. A computer is certainly able to read the words “previous page” and “next page.” And the icons were small. I almost didn’t notice them.

Last, but not least: I removed justified test styling. The browser’s default alignment will be used. From WAVE’s reference:

Large blocks of justified text can negatively impact readability due to varying word/letter spacing and ‘rivers of white’ that flow through the text.

This has a greater effect on smaller screens, but I think it looks better anyways.