Accessibility Updates

I’ve been learning a lot about accessibility this year, as I’ve written about in recent blog posts. (See “Accessibility Adventures: August 2020” and “Accessibility Adventures: October 2020.”) I’ve gotten a better sense of why accessibility is important, what exactly it is, and how to implement it on the web.

I realized that my website needed some accessibility updates, so I recently conducted an accessibility audit on this site and made some updates. I logged the issues on GitHub, so you can look there for the full details on the changes, but here’s a quick roundup:

• I fixed a couple HTML validation errors.
• I added/beautified focus styles.
• I fixed a couple color contrast issues. Specifically, I updated the navbar and the footer to ensure WCAG-conformant color contrast between the text and the background.
• I added ARIA labels to the social media icons on the about page, which allows screen readers to identify what those icons are.

There’s still one outstanding accessibility bug. HTML uses six tags to identify headings: h1, h2, h3, h4, h5, and h6 (h1 being the page title, h2 being a subheading, h3 being a sub-subheading, and so forth.) You should use only one h1 element per page, use headings in a logical order (1 to 6), and not skip levels. When you follow those rules, the logical structure of the site can be clearly represented to users of assistive technology. This makes it easy for screen reader users, for example, to quickly scan a page’s headings and skip around.

My site does not follow those rules. The blog post pages skip heading level 1, the homepage includes two h1 elements, and the homepage skips to heading level 5 for the sidebar.

Unfortunately, this bug is not as easy to fix as the other bugs, because to fix this bug, I’ll actually need to update the headings on most all of my blog posts. (Right now, most section headings in my blog posts start at h3 rather than h2.) It’s a simple — but somewhat time-consuming — fix. I’m planning to fix this accessibility issue soon, as part of a redesign of the site. (I’ve been learning a lot more about CSS, so I want to shift away from using the Bootstrap framework for this site and instead design the site/write the CSS on my own from the ground up.) This last accessibility bug will get fixed, but it will take me a little more time.