How to create inclusive content that welcomes a wider audience

Learn how to approach three key aspects of creating inclusive content: accessible web design, inclusive writing, and diverse imagery.

Inclusive content is a commitment to equity. It means providing a safer experience for more people. It's not a badge of honor you earn with a single initiative or intention — it's an ongoing and intentional effort.

And like all ongoing efforts, there will be challenges, mistakes, and shortcomings. Case in point: We couldn’t possibly cover every aspect of inclusive writing and design in a single article. Instead, in this post, we’ll focus on crucial elements of inclusive content on the web.

Accessible web design

A core part of inclusive writing is accessibility. Everything on your site — from navigation to text and everything in between — should be accessible to as many people as possible.  

Your inclusive writing efforts won’t be nearly as impactful if your site design prevents people from reading it, so let’s start with text. 

  • Make sure screen readers can interact with every page on your site. People with vision impairments and learning disabilities often depend on screen readers to make written content consumable. Test your site with tools like Assitiv Labs, NV Access for PCs, or VoiceOver for Macs.
  • Don’t skip adding alt text on your images. Screen readers rely on alt text to describe visual content.
  • Adding captions to videos is important, too — not only for Deaf and hard of hearing visitors, but also for anyone who experiences sensory overload. Tools like Kapwing make adding captions easy. 
  • Keyboard navigation is another assistive technology to keep in mind as you build your site. Ensuring that your site is navigable by keyboard — manually or via voice commands — allows anyone with limited mobility, tremors, vision impairments, and more to navigate your site without relying on a mouse. The best way to test keyboard navigation is to try it yourself — here’s how to do it on a Mac and in Windows
  • Excessive motion in design elements can be distracting or even harmful for people with vestibular disorders, epilepsy, photosensitivity, and ADHD. If you use animations, include motion warnings and provide an option to disable moving elements. 

Avoid using color as the only way to convey information — like keeping the text on a link blue but then removing the underline — as not everyone will see colors in the same way.

Accessibility at Webflow

Learn about our commitment to web accessibility and how you can build more accessible online experiences.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Learn more

Inclusive writing

Now that you’re aware of the presentation of text, it’s time to focus on the way you write it. 

Language is always evolving, which means inclusive writing will continuously change along with it. But much of what impacts how inclusive (or exclusionary) your writing is depends on three main factors: language, references, and formatting. 

Inclusive language

There’s so much more to inclusive language than getting pronouns right. Though that’s incredibly important, too, truly inclusive writing fosters a sense of belonging and greatly reduces the chances you’ll cause harm to someone interacting with your content. How you phrase things, the references you include, and even the colloquialisms you use have more influence than you might think. 

As you produce content, keep these guidelines in mind:

Avoid gendered language

Words and phrases like “ladies and gentlemen,” “mankind,” and “businesswoman” are unnecessarily gendered and exclusionary. Swap these words with neutral alternatives like “folks,” “human beings,” and “business person.” 

Don’t use terms that rely on negative connotations

It’s easy to stumble into phrases that seem innocuous but actually originate from harmful historical events and beliefs. For example, “blacklist/whitelist” relies on discriminatory metaphors about race, “blindspot” refers to vision-related disabilities, and the term “womxn” was originally coined to purposefully exclude trans women.

Think twice before using idioms and ability-specific calls to action

Similarly to the above, many idioms are hurtful and exclusionary. For instance, “that’s crazy” references mental and psychiatric disabilities. Common call to actions (CTAs) like “see this” or “listen in” exclude people with associated disabilities. 

Usually, the easiest way to be more inclusive is to be specific. Say “block/permit” instead of “blacklist/whitelist.” Describe a situation as “unheard of” instead of “crazy.” Invite people to “explore” your services instead of “see” them.

Check out our own inclusive writing guidelines for an always-evolving list of more terms to avoid, why, and their alternatives.

Diverse references

No one likes to be on the outside of an inside joke, and the same goes for references that leave people guessing or feeling excluded. 

Think beyond western norms. When you rely heavily on references from a single culture, it can not only exclude people, but also cause confusion. Take “Turkey Race,” for example. If you grew up in the US, those words likely conjure pictures of 5ks that happen around Thanksgiving. But what if I told you that in Puerto Rico, a Turkey Race (carrera del pavo) is the tradition of people running a race to win a literal (frozen) turkey? Same words, two different events. And Thanksgiving and related turkey traditions won’t really resonate with people outside of North America. 

Be sure to diversify your examples, too. Only using names like “John Smith” and “Jane Doe” in your examples is the writing equivalent of those souvenir name keychains that never have diverse names. Why not Sade, Asim, Fatima, or Tâm? If you’re not sure which gender those names apply to, even better — examples should not rely on gender either.

Accessible writing and formatting

Inclusive writing also means formatting your content in a way that makes it accessible to as many people as possible. 

Skimmable articles can be a game changer for people with dyslexia, ADHD, or learning disabilities. In fact, it’s not only good for search engine optimization (SEO), but a highly recommended reading comprehension technique. You can make your content easier to skim with formatting such as block quotes, clear headers, and bulleted lists to break up large chunks of text. 

Keep in mind that some typefaces are more accessible than others due to a variety of factors such as letter spacing, alignment, font size, and letter similarity. San serif and slab serif fonts generally balance these factors better than more complex or ornate typefaces. Check our typography accessibility lesson for more guidance. PS: Ease up on the Comic Sans jokes — it’s one of the more readable fonts for those with Dyslexia.

Diverse imagery

When people see themselves represented in images, it not only makes them feel seen, but also empowers them to feel capable. Representation has the power to say: People like you are already doing this — they belong here and so do you. 

Lack of diverse imagery sends the opposite message. One science, technology, engineering, and mathematics (STEM) educator explained that the lack of diverse representation in STEM course materials causes students to believe that they do not belong in the field. 

Make your content inclusive by featuring photos of people from different cultures and backgrounds. Think beyond traditional family units and seek out photos with people of all abilities, presentations, and sizes.

Here are a few resources for diverse stock photos:

Keep in mind that inclusivity means helping people feel like they belong anywhere they want to be, not just where someone else envisions them. Make sure you diversify not only the people you feature, but also the situations, jobs, and activities they’re involved in. 

Inclusive content efforts are never finished

As we produce content for the web, we consistently come back to the principles in this article — and we encourage you to do the same.

And remember, inclusive content isn’t about making everyone fall in love with what you do — it’s about giving them an equal opportunity to decide if they want to. 

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

Define your own content structure, and design with real data.

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

Set up lightning-fast managed hosting in just a few clicks.

More about Hosting