Making My Website More Accessible

Written By: Jake Bauer | Posted: 2020-02-06 | Last Updated: 2020-02-13

Update: Added more links to helpful validators and resources at the bottom of the page.

For about one and a half months now I’ve been working on redesigning to make it more accessible. In that time I’ve completely overhauled the design of the website to make it scale better on different screen sizes and make use of as many accessibility features as I can. I’ve gone from this:

My website before the redesign.

To this:

My website after the redesign.

Which I think also looks a lot better and cleaner in addition to being much better in terms of accessibility.

To make my website more accessible, I’ve added page landmarks using <header>, <nav>, <main>, <footer>, and <section> tags to make it easier for those with screen readers to navigate throughout the macro-structure of the page, I re-designed the link styling to make differing between regular text and links easier, I shrunk the width of the page to keep the text within a reasonable field of view so that you don’t have to move side to side while reading, I increased the font size, and I made heavy use of a contrast checker to make sure that my colours had a bare minimum contrast ratio of 4.5:1 (WCAG AA) with an ideal goal of 7:1 (WCAG AAA) for regular text. I also ran my colour scheme through the Toptal Colour Blind Filter website to make sure that the different colours I chose didn’t cause critical issues with understanding page content for the (quite sizeable) population with a form of colourblindness.

I also tested my website using Firefox’s built-in accessibility tools which notified me of anything that I may have missed with other tools and helped me realize that I was being dumb with the way I added internal page links for pages with a table of contents.

As the ultimate test, I used the Orca screen reader software so that I could experience my website as someone who actually needs to use screen reader software would experience it.

In terms of page content, I made sure that all of my images have alt text, all of my links are descriptive instead of just reading “click here” or “this”, and all of my <input> elements have a label tag.

In addition to accessibility for those with disabilities, I also made my website more accessible to those with slower internet connections by attempting to optimize page loading times by shrinking images and keeping requests down to a minimum. The only thing I didn’t do was embed images, no matter how small, into my HTML because that would needlessly increase page sizes for those who browse using browsers that don’t render images or display favicons. I tried to make my website look good with any browser, no matter how old.

I also took this opportunity to add a light-mode theme to the website by making use of the @media query prefers-color-scheme: light. If you are using a light OS theme, you should be able to see my website in a light colour scheme.

Below is a list of resources that I used in redesigning my website: