Skip to content
Back to Quality Assurance

Inclusive Design

Design for the full range of human diversity — ability, language, age, device, and context — from the start.

Why

Inclusive design is the recognition that there is no "average user" — every user has a different combination of ability, language, device, network, and context. Designing for the average (a 30-year-old on a desktop with broadband) excludes everyone who is not the average: the 60-year-old with presbyopia who needs larger text, the non-native speaker who needs plain language, the user on a 3-year-old Android with a slow CPU, the user on a train with flaky wifi. Inclusive design is not about adding a "accessibility mode" at the end; it is about designing one experience that works for the full range, which makes the product better for everyone — the plain language that helps the non-native speaker also helps the native speaker skimming, the large touch targets that help the motor-impaired also help the phone user on a bumpy bus. The curb-cut effect: designing for the edge case improves the mainstream.

When

From the very start of the design process. Inclusive design is a mindset, not a phase — it informs every decision about layout, language, color, interaction, and content.

How

1. Design for the full range of users, not the average
   - Ability: blind, low-vision, motor-impaired, cognitive, deaf
   - Language: non-native speakers, low-literacy, different reading levels
   - Age: older users (presbyopia, slower processing), children (shorter attention)
   - Device: desktop, mobile, tablet, screen reader, keyboard-only
   - Context: bright sunlight, slow network, one-handed use, public environment

2. Use plain language
   - Short sentences, common words, active voice, no jargon
   - Reading level: aim for grade 8 (Hemingway app, readable.com)
   - Define necessary technical terms on first use
   - Provide summaries for long content

3. Design flexible layouts
   - Responsive: works from 320px (small phone) to 1920px (large desktop)
   - Reflow: content reflows to a single column at 320px (WCAG 1.4.10)
   - Zoom: usable at 200% zoom (WCAG 1.4.4), reflows at 400% (WCAG 1.4.10)
   - Touch targets: at least 44x44px (WCAG 2.5.5) for motor accuracy

4. Provide multiple ways to perceive information
   - Text + icon for labels (not just text or just icon)
   - Text + color for status (not just color — color blindness)
   - Text + audio for video (captions), audio + text for audio (transcript)
   - Error: text + icon + color, not just a red border

5. Test with diverse users
   - Recruit users across the range: different ages, abilities, languages, devices
   - Observe them using the product in their real context (not a lab)
   - Their feedback reveals the barriers that the "average user" design created

Example

// Plain language: before and after
// Before (grade 14, jargon, passive voice):
// "In order to facilitate the procurement of items, users are required to
//  authenticate themselves prior to the initiation of the checkout process."
// After (grade 6, active voice, common words):
// "Sign in to buy items."

// Multiple ways to perceive status
// Bad: status indicated by color alone
<div className={status === "error" ? "red" : "green"}>{message}</div>

// Good: color + icon + text
<div className={status === "error" ? "error" : "success"}>
  <Icon name={status === "error" ? "alert" : "check"} />
  <span>{status === "error" ? "Error: " : "Success: "}{message}</span>
</div>

// Touch targets: at least 44x44px
// Bad: 20x20px close button (hard to tap on mobile, impossible with motor impairment)
<button className="close" style={{ width: 20, height: 20 }}>×</button>

// Good: 44x44px minimum
<button className="close" style={{ width: 44, height: 44 }} aria-label="Close">×</button>

// Responsive + reflow: works at 320px
// CSS: content reflows to a single column, no horizontal scroll
@media (max-width: 320px) {
  .grid { display: block; }
  .sidebar { display: none; } /* or move to bottom */
}

// Captions and transcripts
<video controls>
  <source src="intro.mp4" type="video/mp4" />
  <track kind="captions" src="intro.vtt" srclang="en" label="English" />
</video>
<!-- Plus a transcript below for screen reader users and skimmers -->
<details>
  <summary>Video transcript</summary>
  <p>Welcome to our product. In this video, we'll cover...</p>
</details>

Common Problems

  • ⚠Designing for the desktop and "making it responsive" by stacking columns on mobile — the mobile experience is a cramped, hard-to-use version of the desktop, not a design that considers the mobile context (one hand, touch, small screen).
  • ⚠Using jargon and complex sentences because the audience is "professionals" — the professional non-native speaker and the professional skimming on a phone both need plain language, and plain language does not mean dumbing down.
  • ⚠Indicating status with color alone (red error, green success) — the 8% of men with color blindness see both as the same brown, and the status is invisible to them.
  • ⚠Adding captions and transcripts "if we have budget" at the end — the deaf user cannot access the video without captions, and this is not a nice-to-have but a baseline requirement.

Best Practices

  • ✓Design mobile-first and enhance for larger screens — this forces the essential content to fit the smallest screen, and the larger screens get a better experience, not the other way around.
  • ✓Use plain language at a grade-8 reading level — this helps non-native speakers, low-literacy users, and everyone skimming on a phone, without dumbing down the content.
  • ✓Provide information in multiple modalities (text + icon + color, captions + audio, transcript + video) — no single modality works for everyone, and the combination ensures everyone can perceive the information.
  • ✓Recruit diverse users (different ages, abilities, languages, devices) for testing — their feedback reveals the barriers that designing for the average created, and the curb-cut improvements benefit everyone.