9 Methods to Design Inclusive Content material


The writer’s views are fully his or her personal (excluding the unlikely occasion of hypnosis) and should not all the time mirror the views of Moz.

Illustrations of human faces on purple and pink background.

Inclusivity is a vital consideration for each enterprise proprietor and content material creator, and must be on the coronary heart of your ongoing design efforts — not one thing you take a look at after an internet site or piece of content material goes dwell.

Earlier than we get to particular tips about creating this inclusive content material, let’s go over key definitions and ideas.

What’s inclusivity?

Inclusivity is about recognizing variety. It ensures everybody can take part to the best doable extent. Different names for inclusivity embrace common design and design for all.

Inclusivity addresses a variety of points, together with:

  • Accessibility for folks with disabilities

  • Entry to and high quality of web connectivity, laptop {hardware}, and laptop software program

  • Laptop literacy and expertise

  • Financial circumstances

  • Schooling

  • Geographic location

  • Tradition

  • Age (older and youthful folks)

  • Language

Understanding Usability, Accessibility, and Inclusivity

Purple icons on pink background: left, pointer finger clicking on something for usability; middle, wheelchair symbol for accessibility; right, globe symbol for inclusivity


In keeping with the World Large Net Consortium (W3C), a global requirements group that publishes pointers and suggestions for net applied sciences, “Usability is about designing merchandise to be efficient, environment friendly, and satisfying.”

Usability components measure the performance of a product or design and the design interface’s ease of use. They assess how straightforward it’s for customers to study the essential duties of the interface, how rapidly customers can carry out duties on the interface, and whether or not customers can keep in mind find out how to carry out these duties after time away from the interface. Usability components additionally take into account whether or not the design satisfies customers, and if there are errors within the interface, how extreme these errors are, and the convenience of recovering from these errors.

Take into consideration Google’s search web page design. When it first launched, it obtained appreciable backlash. This was an period when web customers wished their very own “house pages” or “net portals,” every presenting their favourite information and hyperlinks when the browser launched. However what did these portals all have in widespread? A search field. The truth that this easy (some nonetheless say ugly) design finally turned the homepage for billions of web customers speaks to the worth of simplicity and the way it permits inclusivity.


Designing with accessibility in thoughts means extra folks will have the ability to use a product, no matter their talents.

In keeping with W3C, “Accessibility addresses discriminatory features associated to equal person expertise for folks with disabilities. Net accessibility implies that folks with disabilities can equally understand, perceive, navigate, and work together with web sites and instruments.”

In different phrases, all customers, no matter skill or circumstance, ought to have the ability to:

  • Understand all interface or doc components.

  • Function the controls simply and intuitively.

  • Perceive the content material.

  • Use totally different assistive applied sciences, units, browsers, and working techniques to work together with the content material.

For instance, utilizing high-contrast colours in an app doesn’t simply assist individuals who have low imaginative and prescient or shade blindness, it additionally helps individuals who use their units in shiny daylight. Equally, whereas enhancements to usability, like utilizing easy language and intuitive design, could enable folks with cognitive disabilities to make use of a services or products extra productively, they’re additionally useful for individuals who could also be busy or distracted, who’re studying the language, and even folks with slower web entry, as a result of easy and intuitive websites could also be sooner to load.

Further useful resource: Accessibility Rules, W3C


Inclusivity means representing individuals who have, till now, been underrepresented. Inclusivity points have an effect on folks from particular populations inside a group, in addition to communities which have been denied the chance to take part absolutely in financial, social, or civic life.

Inclusive content material ought to all the time acknowledge variety within the practical wants and talents of people. To make your content material inclusive, consider peoples’ various talents, guaranteeing your content material may be accessed in a wide range of methods.

Inclusive content material must also embody variety in private wants and experiences. We should always all problem ourselves to do higher at together with totally different communities, identities, races, ethnicities, backgrounds, talents, cultures, and beliefs. We should take steps to keep away from “othering” folks. By guaranteeing that everybody feels welcome in our digital areas, we will extra precisely characterize the world we dwell in.

Further useful resource: What’s Inclusivity?, Variety for Social Influence

Why inclusivity is essential

Historical past has taught us in regards to the struggles for fairness and inclusion globally. Wars have been fought over human rights and the rights of enslaved peoples. Ladies have protested for suffrage. Folks of shade have lengthy fought for civil rights, and lately the Black Lives Matter motion has highlighted systemic inequalities and the necessity for social justice. The Homosexual Revolution has sought to realize equal rights for homosexual, lesbian, bisexual, and transgender folks. Indigenous folks have struggled to realize equality and obtain significant reconciliation for the abuse and mistreatment suffered by the hands of governments. And the Incapacity Rights Motion has labored to alter attitudes, promote integration, and be certain that all folks, no matter skill, have equal entry to transportation, housing, training, and employment alternatives.

Whereas academic techniques do educate us about these points, they usually current them as discrete occasions which have little actual connection to the “dominant” society. Consequently, most individuals should not comfy talking or writing about them. We merely would not have the vocabulary.

By making empathy a vital a part of inclusion, enterprise homeowners and content material creators can enhance their viewers communications, construct belief, and develop networks. Assembly the practical wants of all customers creates a greater repute and improved word-of-mouth in additional communities.

9 methods to design inclusive content material

Purple icons in white boxes on pink background representing the following nine tips.

Inclusive design ought to all the time meet the wants of as many customers as doable. Use the next inclusive digital content material suggestions when creating web sites, cellular apps, e-mail, and paperwork.

1. Assess factors of bias in your content material and design practices.

Does your content material default to the pronoun “he,” or does it make equal use of “she” and “they”? Evaluation your textual content content material, inventory images, and illustrations. Take a look at each digital and printed supplies geared toward inner and exterior audiences. Do they function largely white, male, straight, non-disabled folks? In that case, it’s time to modify up the terminology and create a brand new aesthetic – one with extra variety.

Further sources:

Assets for Eliminating Bias in Design, UX Sales space

The Bias Blind Spot and Unconscious Bias in Design, Interplay Design Basis

2. Use clear, easy, and considerate language.

Evaluation phrases by means of the lens of inclusivity. Establish and take away all cases of othering and ableism. This boils all the way down to respect. Keep away from collective phrases and labels, akin to “females” or “the blind,” that group people right into a class that promotes objectification. At all times keep in mind a person’s incapacity, gender, race, ethnicity, nationality, or heritage is only a single aspect of their distinctive and sophisticated id.


A incapacity is one thing that an individual has. It isn’t who they are. Use “individual with [a disability]” or “one who has [a disability].” Put the individual on the forefront. For instance, say “an individual who’s blind,” not “a blind individual.”

Many individuals with disabilities favor people-first language. Nevertheless, there are additionally folks with disabilities preferring identity-first language, and you will need to respect this choice and provides each individual the self-determination to decide on. By no means right somebody who refers to themselves utilizing identity-first language. For instance, don’t right or change the reference when somebody calls themselves a “blind individual” versus “an individual who’s blind.”

Keep away from any language that means pity or hopelessness, or that disempowers folks with disabilities, akin to “suffers” or “sufferer.” Keep away from phrases like “courageous” or “brave,” as these phrases can belittle or trivialize folks with disabilities.


The male-dominated cultures of North America and Europe have created a biased vocabulary that must be adjusted for inclusion. It’s common, for instance, to discuss with teams of individuals as “guys,” even when the group contains each women and men. Grownup ladies are sometimes “women,” however grownup males are not often “boys.” Then there are the outdated phrases and phrases which have develop into problematic, akin to “manpower,” “man-hours,” “man the controls,” or “man up.” Substitute these phrases with “workforce,” “hours,” “take the controls,” or “step up.”

What must you do should you’re unsure find out how to handle somebody? Use the gender-neutral pronouns they/them/their when assembly somebody for the primary time. Right here’s an inclusive approach to introduce your self, “I discuss with myself as (she/her), what pronouns do you favor?” or “My pronouns are (they/them), what pronouns do you employ?”

Race and ethnicity

Identical to the vocabulary of gender, phrases related to race, ethnicity, nationality, and heritage have been debated over vigorously lately. A central a part of inclusion is adopting phrases which might be sincere and respectful and being illiberal of phrases which might be disrespectful. Historic bias has permeated our tradition, and consequently, problematic terminology as soon as used to explain people who find themselves not white has been utilized to many alternative areas of life, together with expertise (whitelist/blacklist, grasp/slave units). At all times handle folks’s ethnicity, nationality, or heritage respectfully and with out irony, racism, or satire.

Further sources:

Numerous Talents and Boundaries, W3C

Inclusive Language Pointers, APA

Gender Equality and Inclusivity, CSHA

3. Use responsive design that enables zoom and orientation modifications.

Responsive design permits net content material layouts to show nicely on many kind components, utilizing “breakpoints” to outline totally different widths. Generally app makers lock orientation or flip off the zoom skill. These are fundamental instruments that all of us want every now and then. As a substitute of disabling them, design apps to accommodate them.

Listed below are a number of responsive design and accessibility pointers:

  • Use hyperlink textual content that describes the hyperlink vacation spot.

  • Write significant and descriptive alt textual content.

  • Use semantic HTML – tags that clearly describe the aim of web page components, akin to <header>, <article>, <apart>, or <footer>.

  • As a substitute of mounted or absolute font sizes, use relative items for font sizes, akin to share items, viewport width, or viewport top.

  • Label all buttons and fields.

Utilizing responsive design and accessibility pointers makes it simpler for search engines like google to crawl and interpret web sites. For instance, websites with clear, descriptive headings – the identical sorts of headings that additionally make navigation and comprehension simpler for folks for disabilities – are higher optimized for search engines like google to do their work.

Due to this, Google rewards accessibility when rating web sites. In reality, their Webmaster Pointers – which lay out the most effective practices that assist Google to search out, index, and rank your web site – learn very very similar to accessibility pointers, and sometimes correlate instantly with the W3C’s Net Content material Accessibility Pointers (WCAG).

Through the use of accessible design, you’re concurrently bettering the on-page expertise, making your content material extra accessible to customers with disabilities, and facilitating the work of search engine bots who’re busy crawling, indexing your web site, and assessing hyperlink fairness between pages – all of which assist increase your website positioning rating.

Further sources:

Responsive Design, Mozilla

Design a Massive Scale Responsive Web site, UX Sales space

An Introduction to Accessibility and website positioning, Moz

4. Benefit from free sources.

Use freely accessible Microsoft, Apple, and Android accessibility attributes and accessibility check apps when creating paperwork, net content material, or apps.

Testing is an integral a part of creating accessible and inclusive digital content material. Thankfully, tech firms have created a spread of instruments and sources to assist guarantee your paperwork, web sites, and apps may be accessed simply by all customers. For instance, Microsoft Workplace functions – Phrase, PowerPoint, or Excel – have the Verify Accessibility function, which resides within the Evaluation menu. From there, you’ll be able to select the ‘Verify Accessibility’ button and comply with the directions to take away accessibility issues, rechecking as you go till all points have been addressed.

An example of the check accessibility function in PowerPoint.

Further sources:

Design for Inclusivity, Microsoft Design

Accessibility for Builders, Apple

Growing for Accessibility, Google

9 Finest WordPress Accessibility Plugins for 2022, HubSpot

5. Construction paperwork utilizing headings.

Use easy, hierarchical headings to prepare paperwork, net pages, or emails. This enables all customers and their expertise to interpret the principle concepts of the content material and discover the knowledge they’re on the lookout for. Graphics must be secondary and will by no means comprise vital info. Present equal options for any picture that incorporates textual content.

Additionally remember to embrace a hyperlink to the net model of any HTML message proper on prime, in case of e-mail shopper points with structure or graphics. In case you’re utilizing HTML messages, then comply with fundamental, semantic HTML greatest practices. E-mail is the one expertise the place tables for structure continues to be acceptable, however even there, CSS is now most popular.

Consider your content material with out graphics or with the graphics turned off. It will guarantee your content material may be accessed on low-fi units, over unhealthy connections, or by means of a display reader.

Further sources:

Net Accessibility – Headings, Yale College

Web page Construction – Content material Construction, W3C

6. Present textual content options for non-text components, akin to photographs and types.

Purple mountain icon in white box on pink background next to an example alt text tag for the same image.

Use easy, descriptive language as alt textual content for photographs. If the picture serves a particular perform, the alt textual content ought to clarify what that perform is and describe the contents of the picture. The purpose is to make sure that everybody has entry to the identical details about the picture.

If the picture incorporates a chart or graph, the alt textual content ought to embrace the info. In case you’re utilizing a inventive photograph or a photograph as an illustration, the alt textual content ought to describe the weather of the picture intimately.

If the doc or content material contains photographs that aren’t essential, are used for structure, or don’t serve a particular perform, use null alt textual content (alt=“”). It will preserve them hidden from assistive applied sciences.

Labels for kind fields and choices are additionally areas the place inclusion and accessibility must be addressed. Each discipline and button ought to have a label, written in plain language. If button labels have icons or photographs, the alt textual content ought to describe the perform of the button, relatively than its look.

When creating contact types, label all fields visibly. Embrace formatting hints to cut back errors. In case you use a placeholder, be certain that it stays seen.

Further sources:

The Ins and Outs of Picture Accessibility Requirements, AudioEye

Different Textual content, Accessible Social

7. Benefit from freely accessible accessibility checkers.

A screenshot of the AudioEye accessibility dashboard.

Verify your content material frequently to maintain it inclusive and accessible. Each time you make modifications to your web site, you run a threat of constructing content material inaccessible to folks with disabilities. For this reason ongoing monitoring is essential. 

AudioEye, a digital accessibility platform, provides Lively Monitoring to assist web site homeowners preserve their content material accessible and inclusive. It checks for accessibility points each time a web site customer hundreds a brand new web page, and additionally exams for brand spanking new accessibility points, gathering info throughout all customers and pages, after which routinely fixes nearly all of widespread errors. The platform shows all accessibility points discovered and glued in an Situation Reporting dashboard (pictured above), together with particulars on how these points have an effect on customers with disabilities and find out how to repair unresolved points that require handbook intervention. You can begin by attempting AudioEye’s Accessibility Checker.

Further sources:

Net Accessibility Analysis Instruments Checklist, W3C

Testing and Checking Content material, Accessible Social

8. Verify your shade scheme.

The eyedropper color selection icon in purple and white on a pink background.

Assess the colour scheme for distinction and distinction. White textual content on a black background is excessive distinction, whereas white textual content on a pale blue background is low distinction. Many individuals with visible disabilities depend on excessive shade distinction to view digital content material. And since visible acuity and the power to differentiate colours additionally fade with age, excessive shade distinction ensures older customers can entry your content material.

Frequent shade selections, akin to buttons coloured purple and inexperienced, could make content material inaccessible to folks with shade blindness, which impacts 13 million People and 350 million folks worldwide.

Further sources:

What’s Colour Distinction and Why Does it Matter For Web site Accessibility?, AudioEye

Deuteranopia – Crimson-Inexperienced Colour Blindness, Colblindor

Colour Distinction Checker, AudioEye

9. Make social media posts accessible.

Social media is used to convey messages or concepts rapidly, often in only a line or two of textual content, utilizing a single picture or a brief video. To satisfy accessibility necessities for social media, be certain that all photographs and video clips are described intimately. Embrace voiceovers, narration, and track lyrics within the description. Don’t overlook to incorporate the emotion the topic could also be attempting to evoke. This additionally helps low-bandwidth customers take part in social media. Please see an instance under.

Screenshot of a Knowbility instagram post on how to make the internet more accessible.

Assess the solid of your movies. Do they function largely white males? Search for methods to function a broad cross-section of society, together with totally different genders, folks of various ethnicities, and other people with disabilities.

Emojis make social media posts enjoyable, however they’ll additionally pose issues for individuals who can’t see them. As a result of display readers use phrases to explain the emoji, a collection of smiley faces and hearts added in the course of an Instagram caption turns into “grinning face, smiling face with smiling eyes, smiling face with heart-eyes, purple coronary heart, purple coronary heart, purple coronary heart.” Restrict your emojis to 2 or three, and put them on the finish of your textual content, so that they don’t get in the best way of the knowledge within the submit.

Hashtags are a vital a part of social media posts: highlighting key phrases and phrases with # makes it straightforward for customers to search out posts. Making hashtags accessible is easy: capitalize the primary letter of every phrase within the hashtag (often known as CamelCase). That helps display readers separate the phrases appropriately (#SuperBowl, not #SuperbOwl) and to say them as phrases, relatively than as separate letters.

Further sources:

Make Your Social Media Content material Extra Accessible, Western Oregon College

6 Methods to Make Your Social Media Posts Extra Accessible, Flagship Social

Hashtags, Accessible Social

Checklist of Emojis, Emojipedia

Designing inclusive content material is an ongoing effort.

As you begin making use of these greatest practices, do not forget that constructing accessible, inclusive, and usable content material takes dedication and steady enchancment. Ask your web site guests and clients for suggestions regularly. Decide the correct instruments to make your efforts extra sustainable and efficient.


Please enter your comment!
Please enter your name here