Inclusive Design — Designing for Diversity from the Start

In this tutorial, you will learn about Inclusive Design. We cover key concepts, practical examples, and best practices to help you master this topic.

Inclusive design is a methodology that considers the full range of human diversity including ability, language, culture, gender, and age to create products that work for as many people as possible without special adaptation.

What You'll Learn

You will learn the principles of inclusive design, how it differs from Accessibility alone, how Microsoft's inclusive design framework works, and how to apply inclusive design to your projects.

Why It Matters

Accessibility focuses on people with disabilities. Inclusive design goes further to consider all forms of human diversity. An inclusive approach naturally produces accessible outcomes while also serving more users.

Real-World Use

Doda Browser's inclusive design Process considers users with disabilities, users in rural areas with slow internet, users who speak English as a second language, and users on older devices. This produces a browser that works well for everyone.

flowchart TD
  A[Inclusive Design] --> B[Recognize Exclusion]
  A --> C[Learn from Diversity]
  A --> D[Solve for One, Extend to Many]
  B --> E[Design choices exclude people]
  C --> F[Understand user diversity]
  D --> G[Curb cut effect]
  G --> H[Voice control benefits everyone]
  G --> I[Captions benefit non-native speakers]

Microsoft's Inclusive Design Framework

Microsoft's inclusive design principles provide a practical framework:

Recognize Exclusion

Design decisions can and do exclude people. Recognizing this is the first step. Exclusion happens when designers assume all users are like themselves.

Learn from Diversity

Human diversity is an asset, not a challenge. Include people with disabilities in your research and design process. They have expertise in adaptation that you lack.

Solve for One, Extend to Many

Designing for one extreme user often creates solutions that benefit everyone. A design that works for a blind user also works for a user driving a car. A design for a user with one arm also works for a user holding a coffee.

Inclusive Design vs. Accessibility

Inclusive Design in Practice

Consider Multiple Dimensions of Diversity

Users differ in ability, age, economic situation, education, geography, language, and culture. An inclusive design process considers these dimensions from the start.

<!-- Inclusive form design -->
<form>
  <label for="name">Full name</label>
  <input type="text" id="name" name="name" autocomplete="name">

  <label for="email">Email address</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <label for="phone">Phone number (optional)</label>
  <input type="tel" id="phone" name="phone" autocomplete="tel">

  <fieldset>
    <legend>Preferred contact method</legend>
    <label><input type="radio" name="contact" value="email"> Email</label>
    <label><input type="radio" name="contact" value="phone"> Phone</label>
  </fieldset>
</form>

Expected behavior: Screen readers announce each label and field. Autocomplete attributes help users fill forms quickly. Radio buttons have a clear group label. The phone field is marked optional to reduce anxiety.

Inclusive Language

Use language that respects all users. Avoid ableist terms like blind to or deaf to. Use inclusive terms like team meeting not guys.

Inclusive Design Process

1. Discover — Research diverse users including people with disabilities
2. Define — Identify exclusion points in the current experience
3. Develop — Create solutions that work for the edge cases
4. Deliver — Test with diverse users and iterate

// Check form for inclusive design patterns
function checkInclusiveForm(formElement) {
  const checks = {
    hasLabels: !!formElement.querySelectorAll('label').length,
    hasFieldsets: !!formElement.querySelectorAll('fieldset').length,
    hasAutocomplete: !!formElement.querySelectorAll('[autocomplete]').length,
    hasErrorMessages: !!formElement.querySelectorAll('[role="alert"]').length
  };
  return checks;
}

const form = document.querySelector('form');
console.log(checkInclusiveForm(form));

Expected output:

{
  hasLabels: true,
  hasFieldsets: true,
  hasAutocomplete: true,
  hasErrorMessages: false
}

Common Mistakes

1. Designing Only for the Average User

There is no average user. Designing for averages excludes everyone who deviates from that imaginary norm.

2. Treating Inclusive Design as a Checklist

Inclusive design is a mindset, not a checklist. No list can cover the infinite diversity of human experience.

3. Not Including Diverse Users in Research

You cannot design for people you do not understand. Include people with disabilities in your research and usability testing.

4. Assuming Compliance Equals Inclusion

Meeting WCAG AA is a minimum. Inclusive design goes beyond compliance to create great experiences for everyone.

5. Ignoring Cultural Differences

Color meanings, reading direction, and icon interpretations vary across cultures. Research your global audience.

6. Forgetting Economic Diversity

Not everyone has the latest device or fast internet. Design for low-bandwidth and older device scenarios.

7. Designing in a Bubble

Inclusive design requires diverse perspectives in the room. Hire diverse teams and include diverse users in your process.

Practice Questions

1. What are Microsoft's three principles of inclusive design?

Recognize exclusion, learn from diversity, and solve for one, extend to many.

2. How does inclusive design differ from accessibility?

Accessibility focuses on people with disabilities. Inclusive design considers all dimensions of human diversity including ability, age, culture, and language.

3. What does solve for one, extend to many mean?

Designing for a specific edge case often creates solutions that benefit everyone. Voice control designed for motor disabilities now powers virtual assistants for all users.

4. Why is designing for the average user a mistake?

There is no average user. Designing for averages creates products that fit no one perfectly.

5. Challenge: Audit a product you use daily. Identify three ways it could be more inclusive beyond accessibility.

FAQ

Mini Project

Choose a common task like booking a flight or ordering food delivery. Map the user journey and identify at least five points where the experience could exclude someone with a disability, different language, or different economic situation.

What's Next

Learn about Universal Design principles and how they relate to accessibility. Then explore a11y Standards including WCAG, ARIA, and Section 508.