The journey began when I ran my first Google Lighthouse test and scored 86% for A11Y (Accessibility). From there, I added alt text to all my images and increased the contrast in several areas. This brought my score to 100, but I would hardly call my site accessible at that point.

I recently read through WCAG 2.1. Okay, I didn't read it cover-to-cover but combined with a few Youtube videos and several additional automated tools recommended by W3, I found more ways to increase accessibility.

The primary issue with my site was that I was not correctly implementing semantic HTML. Turns out elements like < h1 > and < h2 > don't just change font-size; They provide meaningful structure to the page, allowing search crawlers, power users, and the visually impaired to navigate a site.

After creating a wireframe of my site in Figma, I added landmark elements, ensured my headings followed a sequential order, and added a few nice-to-haves like a skip link to allow keyboard users to skip over the nav right into the main content of the page.

Figma wireframe of blogthedata.com's homepage

Figma wireframe showing landmark elements on blogthedata.com's homepage.

Although never finished, I think I've made great strides toward a more accessible website!