May 3, 2020
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.
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.
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.
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:
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:
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.
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.
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.
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.
If you liked this story then you might like my monthly design newsletter where I share stories just like this one.
Once a month, I send out an ad-free design newsletter where I share the latest articles, videos, resources, and tools that help you stay in the know and grow as a designer or digital creator.Click here to sign up.
If you enjoyed this article then you may want to read my other articles.
Once a month, I send out an ad-free newsletter where I share the latest articles, videos, resources, and tools that help you stay in the know and grow as a designer or digital creator.