What Does an Inclusive Website Design Looks Like and How to Create It?
Navigating the web is essential to everyday life, but too often web design isn’t inclusive of everyone who depends on it. For instance, one billion people have some form of disability, yet only one percent of the million most popular websites meet the most widely-used accessibility standards.
It’s not only disability that can be an exclusionary factor. Beyond that, web designers are also having to move toward a model of inclusive web design that makes an effort to consider users from different backgrounds, considering factors like age, race, and gender.
Let’s look into what inclusive web design practices look like, how you can get started, and consider how they benefit everyone.
What is inclusive web design?
Inclusive design builds on the work that’s been done to make web design more accessible. You want your services to consider users from a range of abilities, ages, backgrounds, races, genders, and so on.
Truly user-centered design has to consider such factors, otherwise, you may end up with older users puzzled by terms like “scroll down” or “navigation bar”, people facing augmented reality systems that don’t recognize their skin tone, or LGBT+ users answering questions about their household’s needs that don’t account for families like theirs.
Inclusive and accessible design doesn’t just apply to your website. You should be using this lens to review your whole marketing and omnichannel customer experience across digital advertising, web and social media, inbound call centers, lifecycle emails – everything.
You’re not off the hook with your printed matter either. From your carefully designed brochures to your press releases, you need to consider all of your customer needs, not only those of the majority.
If a user interacts with it, think about how it interacts with different customers. Consider this scope as an opportunity, not a challenge. Once you know what to look for, you might find exciting ways to improve your service all over the place. For now, though, let’s start with some easy wins.
Where can you start?
There are plenty of tools out there to get you started with accessible and inclusive web design. If you run a WordPress site, for example, there are plugins for accessibility. One of many WordPress myths is that it’s unresponsive and outdated. In reality, however, because it’s an open-source platform, you’ll find the community can be more agile than big companies.
An inclusive, SEO-friendly website design embraces best practices. The World Wide Web Consortium (W3C) keeps a list of accessibility guidelines you should try to follow. Additionally, Google came up with its own guidelines and made them standard across its products.
All standard UX tools and processes can be used or amended to make your designs more inclusive. For a start, take your usual user journey maps and “plug in” users of different backgrounds. Try different abilities, ages, ethnicities, genders, etc., and see if you notice anything.
User research is a powerful tool too. Invite users of different backgrounds to fill out surveys via email, contact form, or even a free online conference call where you can talk to them directly. The key question is whether your mental image of your audience is as reflective as you think it is.
For example, Pinterest found their augmented reality try-on feature hadn’t adequately considered a full range of skin tones, but they were able to identify that and improve the technology for their users.
Use these processes to constantly test and improve your site. Never stop gathering feedback from a diverse range of users. Try to have and encourage a mindset where you’re designing with your audience rather than for them.
Best practices
Once you’ve read this article and had a look at some of the resources we’ll discuss, sit down with your website and see which of these best practices it does or doesn’t follow.
Use your findings to inform a collaborative effort between your design and development teams. The best thing is these lessons can be referred to over and again when trying to create adverts, build mobile apps, or write lifecycle marketing and product emails.
Remember, inclusive design should be implemented “from pixel to bit”.
Visuals
Firstly, look at the way your site uses color and contrast. Before there was as much of an emphasis on inclusive web design as there is now, low-contrast text (e.g. gray on white) was very trendy.
Unfortunately, this excludes visually-impaired users from your site and services. This isn’t just about disability either. Many older users will struggle with low-contrast text. You might lose users of any age just because they don’t have their glasses to hand.
The World Wide Web Consortium (W3C) recommends a 4.5:1 contrast ratio between your text and the background.
The color and layout of text can also affect users with dyslexia. Make sure your body text is in a clear font, your paragraphs are 40-80 characters wide, and your line-height is at least 1.5 times the font size. Avoid fully-justified text as the irregular spacing between words can affect dyslexic readers.
Avoid using color to display essential information too. Charts and infographics are especially bad for this, making important information inaccessible to colorblind users. Also, make sure your site’s layout and navigation don’t rely on color. Instead, use patterns to differentiate between items.
Screen readers and structured markup
You’ll know all about designing for various devices. Your site has to be responsive across countless screen sizes. Even the best VoIP app has to be a “universal” one that works across different techs.
Web designers must account for screen-readers as well. This ensures the user experience is as smooth for visually-impaired users as for everyone else. It plays into your SEO too. Just as sitemap organization is important for Google’s web crawlers, structured HTML markup makes your site’s content more legible to search engines.
What do I mean by that? Go on your site and start pressing the tab key on your keyboard. Do you see different elements being highlighted? That’s called a focus state. It’s the primary way visually-impaired users will navigate the site.
If you don’t see a focus state, you need to implement one. They come as standard in every web browser, but, as with the low-contrast type, lots of web designers opt to turn these off for aesthetic reasons.
Focus states can be customized to your brand and the W3C recommends a 3:1 contrast ratio. They should be clearly visible to someone with 20/20 vision even from a few feet away.
As you tab through the pages of your site, you should see the focus state highlight every interactive element. Someone using a screen reader will have the reader announce the text on that element and that’s how they’ll navigate, which means you shouldn’t be putting crucial text in images either.
When you do use images on your site, insert alt-text so screen readers can describe them. This also makes your site’s content more legible to search engines, allowing them to show it to relevant audiences.
Copy
An accessible and easy design will make no difference to a user if your copywriting doesn’t include them. If anything, it could make that moment of alienation even more jarring, taking them right out of the otherwise seamless experience.
See how Lemonade uses careful language during their onboarding process to avoid making assumptions about the user’s gender, sexual orientation, or household?
Using clear language will make your copy more inclusive of non-native speakers or people with difficulty reading. It’ll also make your site easier to use in general, so it’s another example of inclusive design making things better for everyone.
Why do you think Silicon Valley tech companies go for an io domain name registration if they’re not based near the Indian Ocean? It’s not just because it’s trendy. That “eye-oh” sound is more memorable than most other domains. That attention to working memory and cognitive load is a key aspect of inclusive copywriting.
Consider highlighting or bolding keywords and phrases in your copy. Make information as simple as possible. Don’t use unnecessary jargon or burden the user with information and questions if you don’t have to. This applies to your site’s visuals as much as text.
Keep them informed too. This helps to avoid frustration, especially for those who struggle with concentration and focus. If a user is trying to get through to your customer service line, an ACD phone system allowing them to direct their calls will keep them in the loop on where their call is every step of the way.
Keeping an eye on accessible and inclusive design in your copywriting might mean the difference between a user converting or not. It also makes your site better for all users in all situations.
Useful resources
- The W3C has a huge list of resources on its site. You can find their Web Accessibility Initiative guidelines here. Note that accessibility standards are updated regularly.
- If you’re looking to check your color contrast, the WebAIM Color Contrast Checker makes this quick and easy. No need for you and the team to remember all those ratio numbers!
- Kat Holmes writes about inclusive design at mismatch.design too.
- You can see how Google makes inclusive design the standard at material.io.
Keep improving
The scope for inclusive web design is huge, but you don’t have to take it on all at once. The important thing is to keep an open mind and try to consider a diverse range of users in your UX and design practices.
If you embrace learning opportunities where you find them and never stop looking for ways to improve, you’ll be helping to lead an industry-wide shift toward making the web better for everyone.
Bio:
Jessica Day – Senior Director, Marketing Strategy, Dialpad
Jessica Day is the Senior Director for Marketing Strategy at Dialpad, a modern business communications platform with private branch exchange (PBX) that takes every kind of conversation to the next level—turning conversations into opportunities. Jessica is an expert in collaborating with multifunctional teams to execute and optimize marketing efforts, for both company and client campaigns. Here is her LinkedIn.
Leave a Reply