---
canonical: "https://www.jsolly.com/blog/How-Ive-made-blogthedata-more-accessible/"
title: "Improving Web Accessibility With Figma Wireframes"
description: "Improve website accessibility by adding alt text, increasing contrast, implementing semantic HTML, using Figma wireframes, adding landmark elements, and more!"
author: "John Solly"
published: "2022-08-10T05:03:02.336Z"
updated: "2024-11-06T13:37:19.147Z"
---

<a id="improving-web-accessibility-with-figma-wireframes"></a>

# Improving Web Accessibility With Figma Wireframes

![A black circle with the text 'Accessibility' showing an eye, hand, ear, and brain representing different facets of a11y.](https://d1d7p8ufhgz4ld.cloudfront.net/media/post_metaimgs/a11ylogo_highres.webp)

https://staff.washington.edu/tft/a11ylogo/images/a11ylogo\_highres.png

The journey began when I ran my [first Google Lighthouse test](https://www.jsolly.com/blog/google-lighthouse-audit/) 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](https://www.jsolly.com/blog/google-lighthouse-perfect-score/), but I would hardly call my site accessible at that point.

I recently read through [WCAG 2.1.](https://www.w3.org/TR/WCAG21/) Okay, I didn't read it cover-to-cover but combined with a few Youtube videos and [several additional automated tools recommended by W3](https://www.w3.org/WAI/ER/tools/), I found more ways to increase accessibility.

The primary issue with my site was that I was not correctly implementing [semantic HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics). 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](https://www.figma.com/file/lHjKaJtWliOr6wLOetKDtJ/BlogtheData-Home?node-id=0%3A1), I added [landmark elements](https://github.com/jsolly/awesome-django-blog/commit/ac5eeccc2da2eb1d060240ef5f613715e6d5eb3c), ensured my [headings followed a sequential order,](https://github.com/jsolly/awesome-django-blog/commit/07f25bc6ba2605eaba0fa51655780ef41e7e7b40) and added a few nice-to-haves like a [skip link](https://github.com/jsolly/awesome-django-blog/commit/a0d76729840a2f3331eb4aee8522cc61969ecae6) 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.](https://d1d7p8ufhgz4ld.cloudfront.net/media/post_imgs/image_jwvYXCX.png)

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

August 10, 2022 in [Web Dev](https://www.jsolly.com/blog/category/web-dev/)

Updated November 6, 2024