Accessibility is really important into ensuring that everyone has a positive experience on your website. UX Designers all over the world take this into account when creating website. Using interviews and AI can be great when you have lots of resources, but there are also a few very helpful tools the everyday user can take advantage of. Today, I'm going over how to run an audit using Lighthouse, WAVE, and Web.dev to give everyone an enjoyable experience on your website. If you would prefer to watch a detailed video on how to do this, I linked my YouTube video below, so check that out.
Web.dev
First I pulled up the website that I wanted to audit. I chose the website of a startup in Montana dedicated to making nonbinary backpacks called JamPacks. To get started paste the website link into web.dev under test my site. This will give you detailed feedback on Performance, Accessibility, Best Practices, and SEO (search engine optimization). JamPacks ranked really well in the last three, but struggled a lot with performance. It's really impressive that they have such high accessibility ratings, which is what major company's really want. In order to improve their performance web.dev gave a few suggestions. The most important one was that they should eliminate render-blocking JavaScript. By using this, the browser must download, parse, compile, and evaluate the script before it can do anything else to render the page. This would explain why the time to interact was so long.
WAVE
Once you have looked through web.dev, you can add WAVE, a chrome extension to your browser. This does a good job of looking at the site and finding specific instances where accessibility can be improved. Once I'm on the site and running the extension, I see the biggest issues under the errors tab. For JamPacks, it suggests adding a language tag to the HTML. A user with a vision impairment may need to use a screen reader and the language tag allows it to read the content.
Lighthouse
The last chrome extension to use is Lighthouse. Run this one just like the last to see a report on the sites Performance, Accessibility, Best Practices, and SEO, just like before. The results were very similar and gave a few extra suggestions. The fonts chosen by JamPacks were from their host, but did not include backup CSS fonts. This means when the webpage is loading, nothing is being displayed, but by choosing a simple CSS font something can be displayed before the webfont loads. This would greatly improve the performance rating.
As you can see, these tools are super easy and useful. Good luck with your accessibility and keep coding!
Top comments (0)