Making your website a welcoming space: A guide to inclusive web design.


10 Minutes

Creating a space for all through design, content, and user experience. 

Inclusive web design goes beyond just ticking accessibility checkboxes. It’s about creating online spaces where everyone feels comfortable, respected, and valued. It means considering not only those with disabilities, but also users of different ages, cultural backgrounds, gender identities, and cognitive abilities. By creating spaces that do their best to work for everyone, you’ll be creating places that welcome all. The point of inclusive web design is to try to remove, as much as possible, bias and assumptions from your site so no one feels excluded.

In this article, we’ll explore why inclusivity is important and ways you can make some changes so every visitor feels seen, heard, and welcome in your online spaces.

Why inclusive design matters.

Having a DEI page to point to isn’t enough. You want to make sure you’re using an inclusivity lens throughout your site for your users so they feel like they belong in your digital spaces. By seeing a reflection of themselves in your imagery, language, and functionality, they can feel confident that they’re in the right place. 

Having a website with inclusive design also signals to the people working within your organization and those in your industry know that you believe in it too.

What it means to be inclusive. 

NLC’s resources hub is curated to help support participants of the 50 – 30 Challenge.

So what does it mean to be inclusive when you’re building or updating your site? By leading with inclusive design, you’re signalling to those who visit your site that you’re an organization that’s forward-thinking, has an awareness beyond a singular perspective, and is open and welcoming to a wide variety of audiences. 

Good inclusive design: 

Respects diversity

It’s important to recognize and value differences, such as cultures, genders, sexual orientations, ethnicities, religions, ages, and socioeconomic backgrounds.

Avoids bias and stereotypes

Unconscious biases can creep into website design and content, perpetuating stereotypes and reinforcing inherent biases. By using inclusive design and being mindful of these biases and stereotypes, you can combat assumptions and offer different perspectives that your users may not have thought of.

Expands reach and engagement

Understanding and designing for diverse needs and preferences can attract a wider audience and increase your engagement. 

Builds trust and brand loyalty

By focusing on inclusivity, you can build trust and foster stronger relationships with your users, boosting positive brand awareness and creating a deeper connection with those already loyal to your brand. 

Creating an inclusive digital experience. 

Creating an inclusive digital experience can be tricky. Where do you start? How deep do you go? The best thing, after you’ve done your research of course, is to think of it as “progress, not perfection.” You’re working towards creating a more inclusive website. It doesn’t have to be perfect and finished overnight. If you keep this idea of perfection in your mind, you may never launch because there’s always something more to be done.

Unlike accessibility, there isn’t really a clear tool or site checker to give you a pass/fail on whether you’ve created a diverse and equitable experience. All you can do is continue to learn and unlearn, and be continuously reviewing to ensure your site is as inclusive as it can be. When you learn more, adjust and evolve your site to reflect as much.  

Content and language

One way to create an inclusive digital experience for your users is through your content and language you use on your website. This can include how you explain things to your audience, the language you’re using, or having an awareness of the lens(es) your audience is experiencing your website through. 

COTO’s website’s language is set at a grade 5/6 level to be more inclusive to its public audiences.

Some ways to increase inclusivity of your website’s content: 

  • Avoid jargon and slang: Use clear and simple language that is easily understood by a global audience.
  • Inclusive language: Be mindful of the language you’re using and try to be welcoming, respectful, and considerate of all people, regardless of their gender, ethnicity, disability, age, sexual orientation, or any other characteristic. Try to avoid language that could inadvertently exclude or alienate people. 
  • Etymology of language and terms: Recognize the evolution of traditions and language used in the everyday and try to avoid language with charged connotations. 
  • Consider cultural nuances: Be aware of cultural differences in communication styles, humour, and symbolism. Avoid idioms or expressions that may not translate well if you can.
  • Awareness of language evolution: Consider how language changes and evolves over time and phrases that should be or shouldn’t be used. Take, for example, the ableist use of words such as “blindspots” or “tone deaf.”
  • Offer multilingual support: Consider offering content in multiple languages to be able to support a wider audience experiencing your site.
  • Style guides: Provide your team with a style guide to support them in creating more inclusive content. This can include providing a glossary of terms to embrace and avoid to make sure everyone’s on the same page, certain phrases to avoid. For example, the government of BC has built a writing guide for people creating content for Indigenous Peoples that respects the cultural integrity and recognizes Indigenous rights. 

Design and user experience

Another way to signal greater inclusivity for your website is through visual design and UX elements. 

CIP showcases their association’s diversity initiatives through dedicated pages that highlight their ongoing EDI work along with sharing supporting resources.

Some ways to boost your site’s inclusivity is through: 

  • Flexible layouts: Design layouts that adapt well to different screen sizes and devices, accommodating users with varying technological access.
  • Customizable user interfaces: Consider offering options for users to customize their experience, such as font sizes, colour contrasts or schemes, or language preferences.
  • Follow accessibility best practices: There are many ways to ensure accessibility on your website. Read our blog posts to learn more about what accessibility compliance is and ways you can make your site more accessible for your users.
  • User-generated content moderation: Establish clear guidelines for user-generated content and moderate it effectively to prevent harassment or discrimination.
  • Consider cultural colour associations: Be mindful of how colours are perceived in different cultures, especially if you’re working in or supporting those spaces.
  • Avoid cultural appropriation: Be respectful of different cultures and avoid appropriating cultural elements without proper understanding and attribution.
  • Positive reinforcement: Recognize your users’ actions throughout your site. Things like when people fill out a form, creating an acknowledgement that info has been received and is actively in process helps reduce user confusion and frustration.
  • Diverse representation in images and videos: Use images and videos that represent a wide range of ethnicities, genders, ages, body types, and abilities (even if not strictly related to accessibility).

Research and testing

Once your site’s elements and content are set up in a way that follows best practices for inclusivity, take it a step further by engaging in research and testing. 

This includes:

  • Conducting user research with diverse participants: Include people from different backgrounds and with different abilities in your user research to gather diverse perspectives.
  • A/B testing with diverse audiences: Test different design and content options with diverse audiences to see what resonates best.
  • Looking for feedback from diverse communities: Actively seek feedback from different communities to identify potential areas for improvement and use it for further updates.

All three of these practices will help you, your organization, and your site become more accessible and inclusive. 

Revisit and evolve

Once you’ve made it this far and done all of the above to the best of your abilities, it doesn’t mean you’re done. Language, policies, and the world are always evolving and we have to keep up through learning and exploration. Make sure you’re keeping up-to-date and adjust your content accordingly. Progress, not perfection means always pushing and working to be better.

Some helpful resources and tools.

While they may not be all-encompassing, here are a few recommended resources and toolkits to help you get started on your journey. 

  1. Microsoft Inclusive Design: this toolkit teaches you about inclusive design principles and features tools and activities. 
  2. CCDI Toolkits: These toolkits were created by the Canadian Centre for Diversity and Inclusion in both English and French to help you create a diversity, equity, and inclusion strategy for your organization. 
  1. A Progressive’s Style Guide by Hanna Thomas (SumOfUs.org) & Anna Hirsch (ActivistEditor.com): This guide outlines language and terms that are and aren’t to be used when you’re writing about certain topics.
  2. The Sage Diversity, Equity, and Inclusion (DEI) Guidelines for Authors: Another great guide of best practices for more inclusive writing.
  3. WCAG accessibility guidelines are great to try to make your site as accessible as possible.
  4. Automattic Design Inclusive Design Checklist: A great guide to how you can bring inclusivity into your team, your processes, and your design.
  5. Affirming and Inclusive Language: Learn how to create a more affirming environment that respects gender identities by using inclusive language.

Getting outside help.

None of us knows everything about everything and pretending you do keeps you, your organization, and your website from growing and evolving. Inclusivity isn’t any different. There will be gaps you aren’t even aware of. By getting outside help from experts with different perspectives, you can help take your website to an even more elevated level of inclusivity. 

Getting help from others outside of your company can include:

  • Gap analysis: Consultants can help assess your current site, policies and/or practices to see if there is anything missing that could be added. They can also give you feedback on how to make your current content even better by adding, editing, or removing.
  • Policy development & review: Bring your team together to create or revise policies to ensure inclusivity. This can be moderated by an outside expert.
  • Inclusivity awareness training: Workshops and programs can create engaging training for staff at all levels. These can be designed and delivered by outside staff or designed for you to deliver to your staff if you feel confident in your ability to do so. More often than not, it’s easier to hire outside experts for this.
  • Consultation & guidance: Consultants can provide on-going expert advice and support throughout your organizations’ process of learning about and implementing inclusivity onto your website. 
  • Marketing & communications support: Bringing in marketing support can help your organization promote your inclusivity initiatives. 
CGLCC is helping companies across Canada to become more inclusive through their Rainbow Registered Program.

Remember the importance of inclusion.

When it comes to your website design and organization, it’s always good to keep inclusivity in mind. You need to consider the intersectionality of different ages, cultural backgrounds, gender identities, disabilities, and other cognitive abilities. It’s not just something to check off your list but a social responsibility. Creating a digital experience where people feel welcome means they’ll enjoy the space, continue to return to your site, and invite others to experience it as well.