Five tips to make your website more accessible

A few months back, I wrote an article about what inclusive design is, and why it is essential to design products for all.

Today, I’m gonna share a few tips so that you can make your website more accessible and inclusive to all. Basically, these are the low-hanging fruit that can instantly improve your website, giving you a starting point for making your sites more inclusive.

So here is how you can quickly improve the quality of your website and make it more inclusive for all.
‍

Tip 1 — Perform a Lighthouse Audit

Perform an accessibility audit using Google Lighthouse. Basically, this is a tool for improving the performance of your website, it performs several inspections that are really helpful. You can run it in via Chrome’s DevTools, from the command line, and from Web.dev site.

It is easy to do, you provide a URL, it runs an audit against the page and then provides you with a report of how well the page performed.

‍

Tip 2 — Run the HTML_Sniffer Bookmarklet

The HTML_Sniffer is a simple bookmarklet will analyse a webpage’s HTML source code and detect violations which you can then address. A cool thing about the bookmarklet is that you can instantly test a page against how it conforms to the three levels of WCAG 2.1 and the U.S. “Section 508” legislation.

But beware that it can provide false-negatives and false-positives so don’t take it as a single source of truth.

‍

Tip 3 — Check your Colour Contrast

Ensuring that all your website elements (text, images, buttons, and so on) have enough contrast so that they are legible is often overlooked. Using a colour contrast checker, you can see how readable elements are when placed next to each other.

Here are a few tools that will help you check colour contrast:

Contrast is a simple Mac App.

Color Tool by a11y.

Stark Plugin for Sketch, XD, Figma.

Accessible Color Generator by Erik Kennedy

‍

Tip 4 — Tab It

This is the simplest of all the tips and one that is often overlooked. No software or app is needed for it. Just your keyboard.

Keyboard accessibility is vital for web accessibility. Many people with impairments rely on a keyboard or assistive technologies to use a website. You should be able to use the tab key to navigate to and activate every interactive element on your website. This allows you to check if the user flow is correct for people who use a keyboard or other assistive technology.

Three questions to answer as you do this:

1. Is the navigation order correct when you press the tab key?
2. Can you see which element is currently in focus?
3. Can you achieve my goal using only the keyboard to navigate the site?

If you answer yes to those questions, then give yourself a pat on the back 👏.

Otherwise, you’ve got a bit of work to improve accessibility on your site…

But luckily, it is easy to make sure that your website and content can be navigated using a keyboard. Read this guide by the a11y project to get started.

Tip 5 — Screen Reader

For this tip, you will need to install a screenreader. I use ChromeVox but they are plenty available to use so try taking a look at this list. Once you’ve got it installed, try to do the following:

1. Navigate your website with the screenreader.
2. Accomplish your users' goals using a screen reader on your website.

Are you able to navigate the site and achieve the goal of your users? If you answered yes, then give yourself another pat on the back. Otherwise, you’ve got a bit of work to improve this. Luckily, the guide above should help.

‍

Bonus Tip

All the tips above only show you how to identify areas for improvement.

My last bit of advice is to implement those improvements and make sure to test your website with a wide range of people, try to include people with and without impairments in your user testing.

This is the best way to make your websites more accessible and inclusive to all.

‍

Now, let us make the web more inclusive.

The goal of this article is to start making the web more inclusive and share tips that I use every day with my clients...

Sharing this article is something that will benefit the web and it is a good thing to do.

So if you’re like me and believe that we should make the web more accessible and inclusive to all, share these tips on LinkedIn, Twitter, and everywhere else.

‍