Skip to main content

Background

The 7 Principles of Universal Design were developed in 1997 by a working group of architects, product designers, engineers, and environmental design researchers, led by the late Ronald Mace at North Carolina State University (NCSU). The purpose of the Principles is to guide the design of environments, products, and communications.

Source: Centre for Excellence in Universal Design


Quick Chain - Remember All 7

  • Equitable - same for everyone
  • Flexible - works multiple ways
  • Simple & Intuitive - no instruction manual needed
  • Perceptible Info - you can sense it
  • Tolerance for Error - forgives mistakes
  • Low Effort - doesn't wear you out
  • Size & Shape - your body fits

They flow in a logical order - from who can use it -> how it's used -> whether the physical space accommodates you.


Principle 1: Equitable Use

Definition: The design is useful and marketable to people with diverse abilities.

One-line handle: "Does this work the same way for everyone - or does it leave some people out?"

❌ Separate entrance
City Hall
🏛️
Main entrance
Everyone else ->
🚪
Side ramp
Wheelchair users ->
Two entrances. One message: you don't belong at the front.
✅ Single integrated entrance
City Hall
🟢
One entrance
Steps + ramp, same door
🚶 walking  ♿ rolling  🧑‍🍼 strolling
One entrance. Same experience. Everyone belongs.

The core idea: Don't design one version for "normal" users and a separate, lesser version for everyone else. When possible, provide identical access. When that's not possible, provide an equivalent experience - but never a stigmatizing one.

Real-world examples:

  • Automatic doors - same entrance for everyone, no separate side door for wheelchair users
  • Websites that work with both a mouse and a keyboard
  • ATMs with both visual screens and audio output

Sub-principles:

  • 1a. Provide the same means of use for all users: identical whenever possible; equivalent when not.
  • 1b. Avoid segregating or stigmatizing any users.
  • 1c. Provisions for privacy, security, and safety should be equally available to all users.
  • 1d. Make the design appealing to all users.

1a - Same Means of Use for All Users

Definition: Provide the same means of use for all users: identical whenever possible; equivalent when not.

What it means: The gold standard is identical - one entrance, one interface, one experience for everyone. When that's truly not possible, equivalent is acceptable - a different method that delivers the same result with the same dignity. What's never acceptable is a separate, lesser experience that signals to some users that they're an afterthought.

The mental image: A building with a grand front entrance and a separate ramp around the back by the loading dock. Wheelchair users get in - technically. But they're sent to the service entrance while everyone else walks through the front door. That's not equivalent. That's segregation with a ramp attached. Now picture a single entrance with both stairs and a ramp side by side - everyone uses the same door. That's 1a.

Real-world examples:

  • A single entrance with both stairs and an integrated ramp - not a separate accessible entrance
  • A website where keyboard navigation reaches every feature that mouse navigation does - identical access
  • ATMs that provide audio output for blind users delivering the same information as the screen - equivalent access
  • A single checkout line that accommodates everyone rather than a separate "accessible" lane

One-line handle: "Is this the same experience for everyone - or are some people being quietly sent around the back?"


1b - Avoid Segregating or Stigmatizing Any Users

Definition: Avoid segregating or stigmatizing any users.

What it means: Even when a design technically provides access, the way it provides that access can still send a message. Separate entrances, special lines, "accessible version" buttons, having to ask for help while everyone else just walks through - these signal that some users don't fully belong. Good design doesn't make anyone feel singled out, pitied, or like a burden. Everyone uses the same thing, the same way, without drawing attention to themselves.

The mental image: A website with a button in the corner that says "Click here for the accessible version." That button is a stigma wrapped in good intentions. It says: the real website isn't for you. You get the other one. Now build one website that works for everyone from the start - no button needed, no separate experience, no announcement that you needed something different. That's 1b.

❌ Separate accessible version
Home About Contact
♿ Switch to accessible version
Welcome to our site. This is the regular version for most users...
Signals: the real site isn't for you.
✅ One site, built for everyone
Home About Contact
WCAG 2.1 AA
Works with keyboard, screen reader, and mouse - no switch needed.
No button. No announcement. Just works.

Real-world examples:

  • A single accessible website - not a separate "accessible mode" toggle
  • A restroom designed for everyone rather than a separate "handicapped restroom" down the hall
  • Captioning on all videos by default - not a hidden option users have to hunt for and enable
  • A classroom where assistive technology is integrated naturally rather than set up separately at the back of the room

One-line handle: "Does using this draw unwanted attention to someone's disability - or does everyone just use it the same way?"


1c - Privacy, Security, and Safety Equally Available to All

Definition: Provisions for privacy, security, and safety should be equally available to all users.

What it means: Accessibility accommodations should never come at the cost of privacy, security, or safety. If the only way a person with a disability can access something requires them to ask for help, expose personal information publicly, or use a less secure method - that's a 1c failure. Every user deserves the same level of protection regardless of how they access something.

The mental image: An ATM that requires blind users to ask a bank employee for assistance to complete their transaction. The blind user now has to hand over their PIN, their card, and their financial information to a stranger - while a sighted user completes the same transaction privately and independently. Same bank, completely different level of privacy. ATMs with audio output and a headphone jack fix this - full privacy, full independence. That's 1c done right.

Real-world examples:

  • ATMs with headphone jacks so blind users can hear their account information privately
  • Accessible voting machines that let voters with disabilities cast a private, independent ballot
  • Secure login processes that work with screen readers - not requiring a workaround that bypasses two-factor authentication
  • Emergency exit routes that are equally safe for wheelchair users - not just technically compliant but genuinely safe under real conditions

One-line handle: "Does the accessible version protect users just as much as the standard version - or does it ask them to give something up?"


1d - Make the Design Appealing to All Users

Definition: Make the design appealing to all users.

What it means: Accessible design doesn't have to look utilitarian, clinical, or like an afterthought. It should be just as well-crafted, just as aesthetically considered, and just as pleasant to use as any other design. When accessible features are bolted on at the end they tend to look like it. When they're built in from the start they just look like good design. The goal is that nobody feels like they're using the "disability version" of something.

The mental image: The original curb cut. When first added to sidewalks, they were often just rough concrete notches - functional but ugly, clearly retrofitted. Modern curb cuts are integrated seamlessly into the sidewalk - same material, same finish, no visible seam. You'd barely notice them if you weren't looking. That's what 1d looks like. Accessibility built in so well it just looks like the design.

Real-world examples:

  • OXO Good Grips kitchen tools - designed for people with arthritis, but so well-designed that everyone wants them
  • Closed captions styled cleanly into video players - not an ugly white box slapped on top
  • Automatic doors that are sleek and integrated - not a metal box with a faded blue wheelchair sticker
  • Accessible websites that are visually polished - not stripped-down text pages that technically work but look abandoned

One-line handle: "Does the accessible experience look and feel like it was designed with care - or like it was added out of obligation?"


The 1d Flow - Complete

  • 1a - Provide identical access when possible, equivalent when not
  • 1b - Never make anyone feel singled out or stigmatized
  • 1c - Never ask someone to trade privacy, security, or safety for access
  • 1d - Make it look and feel as good as everything else

Access -> dignity -> rights -> execution. Equitable use isn't just about getting people through the door - it's about making sure the whole experience is worthy of them.


Principle 2: Flexibility in Use

Definition: The design accommodates a wide range of individual preferences and abilities.

One-line handle: "Can people use this their own way - left hand, right hand, fast, slow?"

❌ One method only
🖱️
Mouse only
⌨️
Keyboard
👆
Touch
🎤
Voice
Keyboard, touch, and voice users are locked out.
✅ Multiple methods
🖱️
Mouse
⌨️
Keyboard
👆
Touch
🎤
Voice
Every method reaches the same destination.

The core idea: People have different preferences, habits, and abilities. Good design doesn't lock you into one method. It gives you options - how you hold it, how fast you go, which hand you use.

Real-world examples:

  • Scissors designed for right- or left-handed use
  • ATMs that let you choose your language and text size
  • Software with keyboard shortcuts and mouse navigation
  • Escalators with adjustable speeds

Sub-principles:

  • 2a. Provide choice in methods of use.
  • 2b. Accommodate right- or left-handed access and use.
  • 2c. Facilitate the user's accuracy and precision.
  • 2d. Provide adaptability to the user's pace.

2a - Provide Choice in Methods of Use

Definition: Provide choice in methods of use.

What it means: Don't lock people into one way of doing something. Different people have different abilities, preferences, and situations. One person uses a mouse, another uses a keyboard, another uses voice control. Good design lets all of them get to the same place their own way. The task is the destination - the method should be open.

The mental image: An elevator with only a touchscreen panel. No physical buttons. Someone with a visual impairment can't use a touchscreen they can't see. Someone with tremors can't reliably hit a target on a smooth glass surface. Now add physical buttons with Braille labels alongside the touchscreen. Same floor, multiple methods. That's 2a.

Real-world examples:

  • Websites navigable by mouse, keyboard, touch, and voice - any method gets you there
  • ATMs that offer both touchscreen and physical keypad input
  • Doors that open by handle, push plate, or automatic sensor
  • Software that lets you access the same function through a menu, a toolbar button, or a keyboard shortcut

One-line handle: "How many different ways can someone accomplish this - and are those ways genuinely equivalent?"


2b - Accommodate Right- or Left-Handed Access and Use

Definition: Accommodate right- or left-handed access and use.

What it means: About 10% of the population is left-handed. Design that assumes everyone uses their right hand locks those people into an awkward, less accurate, sometimes painful experience. This sub-principle is specifically about handedness - but it's really about not assuming which hand, which side, or which direction a user will naturally default to.

The mental image: A pair of standard scissors in a left-handed person's hand. The blades are designed to work with right-hand pressure - use them left-handed and the blades splay apart instead of cutting cleanly. The scissors aren't broken. They just weren't designed for that person. Left-handed scissors exist - same tool, opposite orientation, problem solved. That's 2b.

❌ Right-hand only design
✂️
Right hand
Cuts cleanly
✂️
Left hand
Blades splay
10% of users - left-handed - get a worse experience.
✅ Either hand works
✂️
Right hand
Cuts cleanly
✂️
Left hand
Cuts cleanly
Designed for both. Same result regardless of hand.

Real-world examples:

  • Scissors available in both right- and left-handed versions
  • Smartphones that let you switch the keyboard layout or move the navigation bar to either side
  • Computer mice designed to work comfortably in either hand - or ambidextrous designs
  • Can openers and other tools designed so either hand can operate them effectively

One-line handle: "Does this work just as well whether you lead with your left hand or your right?"


2c - Facilitate the User's Accuracy and Precision

Definition: Facilitate the user's accuracy and precision.

What it means: Not everyone has the same level of fine motor control, steady hands, or precision. Good design doesn't demand it. It makes accurate interaction easier by giving users bigger targets, more forgiving input zones, and tools that compensate for natural variation in movement. The design does some of the work so the user doesn't have to be perfect.

The mental image: A touchscreen keyboard on a phone with tiny keys packed close together. Someone with larger fingers, tremors, or reduced dexterity is going to mistype constantly - not because they're careless, but because the design demands more precision than their hands can reliably deliver. Now give them a larger keyboard option, autocorrect, or word prediction. Same task, more forgiving design. That's 2c.

Real-world examples:

  • Large button options on touchscreen interfaces - bigger target, easier to hit accurately
  • Autocorrect and word prediction on keyboards - compensates for imprecise input
  • Snap-to-grid in design software - small imprecisions in mouse movement get corrected automatically
  • Styluses with palm rejection so accidental contact doesn't register as input

One-line handle: "Does the design compensate for natural variations in hand steadiness and precision?"


2d - Provide Adaptability to the User's Pace

Definition: Provide adaptability to the user's pace.

What it means: People move through tasks at different speeds - because of disability, age, unfamiliarity, cognitive load, or simply personal preference. Good design doesn't punish slow users or rush them toward errors. It lets people set their own pace without timing out, locking up, or losing their work.

The mental image: A government website with a session timeout that kicks you out after 10 minutes of inactivity. Someone with a cognitive disability or low digital literacy is carefully reading each question, taking their time to get it right. The session expires. Everything they entered is gone. They have to start over. The design didn't accommodate their pace - it penalized it.

❌ Rigid session timeout
User carefully reading each question...
Taking time to get it right...
Session expired. Start over.
Design penalized the user for going at their own pace.
✅ Flexible pace
User carefully reading each question...
Session expiring - need more time?
Extended. User continues at their pace.
Warning given. Time extended. No work lost.

Real-world examples:

  • Session timeout warnings that give you the option to extend - not just cut you off
  • Video players with adjustable playback speed - fast for some, slow for others
  • Self-checkout kiosks that don't time out aggressively between items
  • Online tests with extended time settings for users who need them

One-line handle: "Does the design let people move at their own speed without losing their work or getting locked out?"


The 2d Flow - Complete

  • 2a - Give users real choices in how they interact
  • 2b - Don't assume which hand they use
  • 2c - Make accurate interaction possible without demanding perfect precision
  • 2d - Let people move at their own pace

Method -> hand -> precision -> speed. Every dimension of individual variation, accounted for.


Principle 3: Simple and Intuitive Use

Definition: Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level.

One-line handle: "Can anyone figure this out without reading the manual?"

❌ Unnecessary complexity
PWR
SRC
IN
OUT
AV
1
2
3
4
5
6
7
8
9
0
REC
SAP
CC
FAV
LIST
PIP
SWA
FREEZE
ZOOM
50 buttons. 6 used daily.
Everything present. Nothing clear.
✅ Eliminate complexity
OK
Only what you need.
Instantly understandable. No manual needed.

The core idea: Good design doesn't require expertise, training, or high concentration. It speaks to anyone - regardless of background, language, or how tired they are. The layout makes sense, the feedback is clear, and you never feel lost.

Real-world examples:

  • A coffee machine with clear symbols anyone can read
  • Emergency exit signs that use a running figure, not just the word "EXIT"
  • Progress bars that show where you are in a multi-step form
  • Elevator buttons numbered logically with floors labeled clearly

Sub-principles:

  • 3a. Eliminate unnecessary complexity.
  • 3b. Be consistent with user expectations and intuition.
  • 3c. Accommodate a wide range of literacy and language skills.
  • 3d. Arrange information consistent with its importance.
  • 3e. Provide effective prompting and feedback during and after task completion.

3a - Eliminate Unnecessary Complexity

Definition: Eliminate unnecessary complexity.

What it means: Every step, option, label, or feature that doesn't need to be there is a potential point of confusion. Complexity isn't a sign of sophistication - it's a design problem. Strip it down to what's actually necessary. If someone has to think harder than the task requires, something in the design is in the way.

The mental image: A TV remote with 50 buttons. Most people use six of them. The other 44 exist to confuse you, get pressed by accident, and make the thing harder to hand to someone who's never used it before. Now picture a remote with only the buttons you actually need. Same function, fraction of the cognitive load. That's 3a.

Real-world examples:

  • A sign-up form that only asks for what's actually needed - not every possible piece of information upfront
  • A microwave with one dial and a start button instead of 20 preset options nobody uses
  • A website menu with five clear categories instead of twelve overlapping ones
  • Checkout flows that strip out everything that isn't completing the purchase

One-line handle: "Is everything here because it needs to be - or because nobody removed it?"


3b - Be Consistent With User Expectations and Intuition

Definition: Be consistent with user expectations and intuition.

What it means: People come to any design with existing mental models - patterns they've learned from everything they've used before. Good design works with those patterns, not against them. When something behaves the way you expect it to, you don't have to think. When it doesn't, you stop, get confused, and make mistakes. Consistency is what makes something feel intuitive.

The mental image: You rent a car and get in. You've never driven this exact model before - but you know where the steering wheel is, where the gas pedal is, where the turn signal stalk is. Nobody told you. You just knew because every car follows the same conventions. Now imagine if one manufacturer decided to put the brake on the left side of the steering column. Technically possible. Catastrophically bad design. That's what happens when you break user expectations.

Real-world examples:

  • The back button in a browser - users expect it everywhere, on every site
  • Blue underlined text means a link - has meant that for 30 years, don't change it
  • A shopping cart icon in the top right of an e-commerce site - that's where people look
  • Ctrl+C to copy, Ctrl+V to paste - break that and watch people lose their minds

One-line handle: "Does this behave the way someone would expect it to before they've read a single instruction?"


3c - Accommodate a Wide Range of Literacy and Language Skills

Definition: Accommodate a wide range of literacy and language skills.

What it means: Not everyone reads at the same level. Not everyone reads in the language your design is written in. Not everyone reads at all. Good design doesn't assume a specific literacy level or language background - it communicates in ways that work across that full range. Simpler words, clear icons, plain language, multiple languages where needed.

The mental image: An emergency exit sign that only says "EXIT" in English. Everyone who doesn't read English - tourists, recent immigrants, young children, people with certain cognitive disabilities - gets nothing useful from it. Now replace it with the universally recognized running figure pointing toward a door. No words needed. No language barrier. That's 3c done right.

❌ Text only
EXIT
English readers only
SALIDA
Spanish readers only
Non-readers, tourists, children - need to know which language first.
✅ Universal icon
🚪🏃
No words needed
One icon. Every language. Every literacy level. Instantly understood.

Real-world examples:

  • Universal icons and symbols that communicate without words - power button, play, pause, volume
  • Plain language on government forms and medical documents - written at a reading level most adults can follow
  • Multilingual signage in airports, hospitals, and transit systems
  • Voice interfaces that don't require reading at all

One-line handle: "Does this work for someone who struggles with reading, or reads in a different language?"


3d - Arrange Information Consistent With Its Importance

Definition: Arrange information consistent with its importance.

What it means: The most important information should be the most prominent - front and center, impossible to miss. Secondary information comes next. Fine print and edge cases come last. When layout doesn't match importance, people miss what matters and get lost in what doesn't. The hierarchy of the design should match the hierarchy of the information.

The mental image: A prescription medication label. The drug name and dosage - the two things that matter most - should be the biggest, boldest text on the label. Not buried under the manufacturer's address, a barcode, and three paragraphs of legal text. When a pharmacist redesigned a label with critical info first and largest, medication errors dropped. The information didn't change. The arrangement did.

Real-world examples:

  • News websites with the headline large and the byline small - importance drives size
  • A form where required fields are clearly marked and optional ones are visually secondary
  • Emergency alerts that lead with the danger, not the agency issuing it
  • Navigation menus where the most-used items appear first, not alphabetically

One-line handle: "Does the layout tell you what matters most before you even start reading?"


3e - Provide Effective Prompting and Feedback During and After Task Completion

Definition: Provide effective prompting and feedback during and after task completion.

What it means: Users need to know two things at all times: what to do next, and whether what they just did worked. Prompting guides them through the task. Feedback confirms the result. Without both, people get stuck mid-task wondering if they did it right, or finish without knowing if it actually went through.

The mental image: You submit a form online and the page just... reloads. Did it work? Did it fail? Is it processing? You have no idea. You submit again - now you've got a duplicate order. That's a 3e failure. Now picture a clear success message: "Your order has been placed. Confirmation sent to your email." One sentence. Task complete. No ambiguity. That's 3e done right.

❌ No feedback
You clicked Submit... did it work?
Page reloaded. Nothing changed?
User has no idea if their action worked. They submit again. Duplicate order.
✅ Clear feedback
Submitting your order...
Order placed! Confirmation sent to your email.
User knows exactly what happened and what comes next.

Real-world examples:

  • A progress bar on a multi-step form showing where you are and how many steps remain
  • A green checkmark and confirmation message after successfully submitting a form
  • Error messages that tell you exactly what went wrong and how to fix it - not just "invalid input"
  • A loading spinner so users know something is happening and don't click twice

One-line handle: "Does the design tell you what to do next - and confirm when you've done it right?"


The 3e Flow - Complete

  • 3a - Remove everything that doesn't need to be there
  • 3b - Make it behave the way users already expect it to
  • 3c - Make it work across literacy and language differences
  • 3d - Put the most important information front and center
  • 3e - Tell users what to do next and confirm when it worked

Principle 4: Perceptible Information

Definition: The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities.

One-line handle: "Can you get the information you need - even if you can't see, hear, or the environment is working against you?"

❌ Single mode only
🔔
Audio only
No strobe
No vibration
Deaf user in the building has no idea the alarm is going off.
✅ Multiple modes
🚨
Audio
Strobe
Vibration
Same emergency. Three channels. Everyone gets the message.

The core idea: Don't rely on a single channel to deliver critical information. If it's visual only, a blind user misses it. If it's audio only, a deaf user misses it. If it's low contrast in bright sunlight, everyone misses it. The answer is redundancy - deliver the same essential information through multiple modes so no one gets left out.

The mental image: A fire alarm. Old ones were just a bell - audio only. A deaf person in the building has no idea it's going off. Modern systems add strobe lights. Some add vibrating pillow pads in hotel rooms. Same alarm, same emergency - but now the information gets through regardless of whether you can hear. That's perceptible information done right.

Real-world examples:

  • Transit systems with both visual displays and audio announcements
  • Traffic lights with sounds or vibrating buttons for pedestrians who are blind
  • Websites where error messages aren't communicated by color alone
  • Captions on videos

Sub-principles:

  • 4a. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information.
  • 4b. Provide adequate contrast between essential information and its surroundings.
  • 4c. Maximize "legibility" of essential information.
  • 4d. Differentiate elements in ways that can be described (i.e., make it easy to give instructions or directions).
  • 4e. Provide compatibility with a variety of techniques or devices used by people with sensory limitations.

Note: Principle 4 is the only one with five sub-principles. That signals how much ground perceptible information actually covers.


4a - Use Multiple Modes for Essential Information

Definition: Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information.

What it means: Don't put all your eggs in one basket. If critical information only comes through one channel - visual, audio, or touch - you've already excluded someone. Redundancy across modes isn't overkill, it's the whole point. The same information, delivered multiple ways, so it gets through no matter what.

The mental image: A microwave with only a beep when it's done. You're deaf - you just stand there waiting, not knowing your food has been ready for five minutes. Now add a light that flashes when the cycle ends. Same information, second mode, problem solved. The beep and the light together are 4a in action.

Real-world examples:

  • Airport departure boards that show flight info visually and play audio announcements
  • Traffic lights that combine color (visual) with a clicking sound or vibrating button (audio/tactile)
  • Warning labels that use both an icon and text - not just one or the other
  • Closed captions on video - the audio information delivered in a visual mode

One-line handle: "Is the critical information available in more than one way - so losing one channel doesn't mean losing everything?"


4b - Provide Adequate Contrast

Definition: Provide adequate contrast between essential information and its surroundings.

What it means: Information is only perceptible if it stands out from its background. Low contrast - gray text on a white background, a quiet announcement in a noisy room, a small sign on a cluttered wall - makes information technically present but practically invisible. Adequate contrast means the signal is strong enough to be detected regardless of conditions.

The mental image: Light gray text on a white background. Someone with low vision, or even someone reading in bright sunlight, simply cannot distinguish the letters from the background. Now make it dark gray or black on white - suddenly it's readable by almost everyone in almost any lighting condition. Nothing about the words changed. Only the contrast did.

❌ Low contrast
Important Notice
Gray on white - ratio: ~1.6:1
Submit Now
Light blue on blue - ratio: ~2.1:1
WCAG minimum 4.5:1. Both fail. Low vision users can't read either.
✅ High contrast
Important Notice
White on dark navy - ratio: ~15:1
Submit Now
White on dark blue - ratio: ~9:1
Both exceed WCAG AA and AAA. Readable in any condition.

Real-world examples:

  • WCAG requires a minimum contrast ratio of 4.5:1 for normal text on websites
  • Yellow caution signs against dark backgrounds - high contrast by design
  • Braille raised above a flat surface - tactile contrast so fingers can detect it
  • Audio announcements in transit stations turned up above ambient noise level

One-line handle: "Does the information stand out clearly enough from everything around it?"


4c - Maximize Legibility

Definition: Maximize "legibility" of essential information.

What it means: Contrast (4b) gets you noticed. Legibility gets you understood. Once someone can detect that information is there, they need to be able to read it, interpret it, and act on it. Font size, typeface, spacing, icon clarity, symbol simplicity - all of it affects whether information is actually legible to the full range of users.

The mental image: A street sign in a clean, bold sans-serif font at a readable size - versus the same information in a decorative script font at half the size. Both are visible. Only one is legible. Put that second sign in front of someone with low vision, dyslexia, or limited English literacy and it's effectively useless.

❌ Hard to read
Decorative script, 9px, tight spacing:
Emergency Exit Procedures and Building Evacuation Guidelines
All caps, low contrast:
PLEASE PROCEED TO THE NEAREST AVAILABLE EXIT IMMEDIATELY
Visible - barely. Readable under stress? No.
✅ Legible
Bold sans-serif, adequate size, clear spacing:
Emergency Exit ->
Short, plain language, high contrast:
Use nearest exit now.
Read instantly. Under any conditions. By anyone.

Real-world examples:

  • Large print options on menus, ballots, and medical forms
  • Sans-serif fonts on signage and interfaces - easier to read at a distance or at small sizes
  • Icons that are simple and universally recognizable - a trash can for delete, a floppy disk for save
  • Adequate spacing between lines and letters so text doesn't blur together

One-line handle: "Can people actually read and understand it - not just see that something is there?"


4d - Differentiate Elements in Ways That Can Be Described

Definition: Differentiate elements in ways that can be described (i.e., make it easy to give instructions or directions).

What it means: If the only way to distinguish between elements is by appearance - color, shape, position - then someone who can't see them, or someone trying to explain them to another person, is stuck. Good design gives elements differences that can be put into words. Named, labeled, described out loud. If you can't say it, you can't navigate it.

The mental image: A control panel with six identical buttons differentiated only by color. A colorblind user can't tell them apart. Try to give someone instructions over the phone: "press the red one" - useless if they can't see the colors. Label them 1 through 6, or give them names - "press the power button" - and suddenly anyone can follow directions regardless of what they can or can't see.

Real-world examples:

  • Elevator buttons labeled with floor numbers, not just arranged by position
  • Form fields with text labels, not just placeholder text that disappears when you start typing
  • Chapters and sections with named headings - not just visual formatting differences
  • Transit maps where lines are named and numbered, not distinguished by color alone

One-line handle: "Can every element be identified and communicated in words - not just visually?"


4e - Compatibility With Assistive Devices

Definition: Provide compatibility with a variety of techniques or devices used by people with sensory limitations.

What it means: Even if your design does everything else right - multiple modes, good contrast, legible, describable - it still fails if it doesn't work with the tools people actually use to access information. Screen readers, hearing loops, refreshable Braille displays, magnification software - these are how a significant portion of users interact with the world. If your design blocks or ignores them, you've shut those people out at the last step.

The mental image: A beautifully designed website - great contrast, clear fonts, labeled everything. But the developer built the navigation out of images with no alt text, and the buttons are custom-coded elements that a screen reader can't detect. A blind user's screen reader hits it and reads nothing useful. The design looks accessible. It isn't. Compatibility with the actual tools people use is what makes the difference.

❌ Blocks screen reader
Website content
->
Screen reader
Image has no alt text. Button has no label. Nav built with divs, not semantic HTML.
Screen reader announces: "Image. Unlabeled button. Div. Div. Div."
Looks accessible. Isn't. Blind user gets nothing useful.
✅ Screen reader compatible
Website content
->
Screen reader
Alt text on images. ARIA labels on buttons. Semantic HTML throughout.
Screen reader announces: "Navigation. Home link. About link. Submit button."
Coded right. Screen reader gets full context. Blind user navigates independently.

Real-world examples:

  • Websites coded with proper semantic HTML so screen readers can interpret headings, buttons, and links correctly
  • Hearing loop systems in theaters and public spaces - transmit audio directly to hearing aids
  • ATMs with headphone jacks so users who are blind can receive audio output privately
  • PDFs tagged properly so refreshable Braille displays can read them in order

One-line handle: "Does this work with the tools people actually use to access information?"


The 4e Flow - Complete

  • 4a - Deliver essential information through multiple modes
  • 4b - Make sure the signal has enough contrast to be detected
  • 4c - Make sure it's legible enough to be understood
  • 4d - Make sure elements can be described in words
  • 4e - Make sure it works with assistive devices

Broadest to most specific: how you deliver information -> how detectable it is -> how readable it is -> how describable it is -> whether the tools people depend on can actually access it.


Principle 5: Tolerance for Error

Definition: The design minimizes hazards and the adverse consequences of accidental or unintended actions.

One-line handle: "What happens when someone makes a mistake? Does the design protect them?"

❌ Hazardous layout
Save
Delete
⚠️ Same size. Same style. Side by side.
One misclick destroys your work. The layout made it easy to get wrong.
✅ Safe layout
Save
Cancel
🗑 Delete permanently
Dangerous action separated, labeled clearly, placed away.
Hard to trigger by accident. Easy to find when you actually need it.
**The core idea:** People will make mistakes. Good design anticipates that and limits the damage. It warns before something bad happens, prevents irreversible mistakes, and doesn't punish you for being human.

Real-world examples:

  • Undo/redo in every piece of software
  • A confirmation dialog before permanently deleting a file
  • Guard rails on staircases and walkways
  • A car that won't start if it's in gear - built-in fail-safe

Sub-principles:

  • 5a. Arrange elements to minimize hazards and errors: most used elements, most accessible; hazardous elements eliminated, isolated, or shielded.
  • 5b. Provide warnings of hazards and errors.
  • 5c. Provide fail safe features.
  • 5d. Discourage unconscious action in tasks that require vigilance.

Notice the sequence: prevent the error first (5a), then warn about it (5b), then catch it if it happens anyway (5c), then keep people alert when the stakes are high (5d). Prevention all the way to vigilance.


5a - Arrange Elements to Minimize Hazards and Errors

Definition: Arrange elements to minimize hazards and errors: most used elements, most accessible; hazardous elements eliminated, isolated, or shielded.

What it means: This is about layout and placement. Put the things people use most where they're easiest to reach. Put the things that could cause harm out of the way - or remove them entirely. The goal is to make the right action easy and the dangerous action hard.

The mental image: A chainsaw. The power trigger requires you to grip the handle fully to activate it - you can't accidentally brush it and start the blade. Now think about the opposite: a Delete button placed right next to the Save button, same size, same color, no separation. That's a 5a failure - a hazardous action placed right where an error is easy to make.

Real-world examples:

  • Software that separates "Save" from "Delete" with space, color, or confirmation steps
  • Kitchen stove knobs positioned so you can't accidentally brush them on
  • Dangerous machinery with emergency stops within easy reach but power switches behind a cover
  • ATM keypads that place Cancel and Enter at opposite ends so you don't accidentally cancel a transaction

One-line handle: "Is the layout designed to make mistakes unlikely before they even happen?"


5b - Provide Warnings of Hazards and Errors

Definition: Provide warnings of hazards and errors.

What it means: When a hazard or mistake is possible, tell the user before it happens - or the moment it's detected. Don't let them find out after the damage is done. The warning should be clear, timely, and impossible to miss.

The mental image: You're driving and your gas tank hits empty. The warning light comes on - you still have a few miles to find a station. That's 5b done right. No warning light? You stop dead on the highway with no notice. Same situation, completely different outcome. The warning is the design feature.

❌ No warning
Tank running low... no signal
Tank nearly empty... still nothing
Car stops dead on the highway.
No warning. No chance to act. Maximum consequence.
✅ Warning given in time
Low fuel warning light comes on
Driver finds a station with miles to spare
No breakdown. No problem.
Warning early enough to act. That's the whole design.

Real-world examples:

  • A "your password is about to expire" notification before you get locked out
  • Browser warnings when you're about to leave a page with unsaved changes
  • Wet floor signs placed before you reach the hazard, not after
  • A medication bottle with a bright warning label about interactions or dosage limits

One-line handle: "Does the design tell you something is wrong before it becomes a problem?"


5c - Provide Fail Safe Features

Definition: Provide fail safe features.

What it means: Even after a warning (5b), mistakes still happen. A fail safe is the last line of defense - built into the design to catch the error after it occurs and prevent the worst outcome. It doesn't stop the mistake, but it stops the damage.

The mental image: You accidentally delete an entire folder of files. Without a fail safe, they're gone. With a Recycle Bin or Trash folder, they're sitting there waiting for you to restore them. The mistake happened - the fail safe absorbed it.

❌ No fail safe
🗑️
Deleted = Gone forever
📄 project-final.docx - ❌ unrecoverable
📄 photos-2024/ - ❌ unrecoverable
Mistake happened. No recovery. Work is gone.
✅ Fail safe in place
🗑️
Deleted = Recoverable
📄 project-final.docx - ♻️ restore?
📄 photos-2024/ - ♻️ restore?
Mistake happened. Fail safe absorbed it. Everything recoverable.

Real-world examples:

  • Recycle Bin / Trash on every operating system - nothing is truly deleted until you empty it
  • Auto-save in Google Docs - even if your browser crashes, your work is there
  • Circuit breakers that trip before electrical systems get damaged or cause fires
  • Seatbelts and airbags - the accident happened, the fail safe limits the harm

One-line handle: "If the mistake already happened, does the design limit the damage?"


5d - Discourage Unconscious Action in Tasks That Require Vigilance

Definition: Discourage unconscious action in tasks that require vigilance.

What it means: Some tasks are high-stakes enough that autopilot is dangerous. This sub-principle is about designing in a moment of pause - forcing the user to be conscious and deliberate before something irreversible happens. It's not about making things harder. It's about making sure your brain is actually engaged when it needs to be.

The mental image: You're at an ATM. You take your cash, turn to leave, and forget your card. Older ATMs let that happen all the time. Modern ATMs make you take your card first - the cash doesn't come out until the card is removed. That forced sequence breaks the unconscious habit and prevents a mistake that's easy to make on autopilot.

❌ Old ATM - cash first
1.  Insert card
2.  Enter PIN, select amount
3.  💵 Cash dispensed
4.  Grab cash, walk away...
❌  Card left in machine
Autopilot takes over at step 4. Card forgotten every time.
✅ Modern ATM - card first
1.  Insert card
2.  Enter PIN, select amount
3.  💳 Card ejected - take it now
4.  💵 Cash dispensed
✅  Card always retrieved
Forced sequence breaks autopilot. Card retrieved every time.

Real-world examples:

  • ATMs that eject your card before dispensing cash - interrupts the "grab and go" reflex
  • "Type DELETE to confirm" prompts before permanently removing data - forces a conscious action
  • Two-factor authentication - requires a deliberate second step before access is granted
  • Safety covers over emergency stop buttons - you have to lift the cover first, breaking unconscious action

One-line handle: "Does the design force you to be deliberate when the stakes are too high for autopilot?"


The 5d Flow - Complete

  • 5a - Prevent the error through smart arrangement
  • 5b - Warn the user when a hazard or error is near
  • 5c - Catch the damage after the mistake happens
  • 5d - Break autopilot when the task demands full attention

Principle 6: Low Physical Effort

Definition: The design can be used efficiently and comfortably and with a minimum of fatigue.

One-line handle: "Can you use this without straining, forcing, or wearing yourself out?"

❌ High operating force
🔵
Round knob
1. Grip firmly around knob
2. Twist wrist fully
3. Push or pull
Three actions. Requires grip strength. Arthritis, wet hands, full arms - all fail.
✅ Low operating force
🚪
Lever handle
1. Press down with finger, fist, or elbow
2. Push or pull
Two actions. Minimal force. Works with any hand or no hands.
**The core idea:** Good design doesn't require uncomfortable positions, awkward movements, or sustained force. It works with your body, not against it - and leaves you with energy for the rest of your day.

Real-world examples:

  • Lever door handles instead of round knobs (one finger can open them)
  • Touch-activated faucets - no gripping or twisting
  • Voice control and one-switch access on devices
  • Office chairs and desks that allow a neutral body position

Sub-principles:

  • 6a. Allow user to maintain a neutral body position.
  • 6b. Use reasonable operating forces.
  • 6c. Minimize repetitive actions.
  • 6d. Minimize sustained physical effort.

6a - Neutral Body Position

Definition: Allow user to maintain a neutral body position.

What it means: Neutral means your body is at rest - spine straight, shoulders relaxed, wrists flat, head level. The moment you have to crane your neck, twist your wrist, lean forward, or reach up, you've left neutral. Good design keeps you there.

The mental image: An ATM screen mounted so high that a standing person has to tilt their head back to read it. Or a keyboard tray so low that your wrists bend upward to type. Neither person is doing anything strenuous - but hold that position for 20 minutes and you'll feel it. That's a 6a failure.

❌ Forced awkward posture
Screen too high - neck tilted back
Keyboard too low - wrists bent up
Chair fixed height - back hunched
20 minutes in that position and fatigue sets in. A full day causes injury.
✅ Neutral body position
Screen at eye level - neck relaxed
Keyboard at elbow height - wrists flat
Adjustable chair - back supported
Body at rest. Sustainable for hours. Energy saved for the work itself.

Real-world examples:

  • Adjustable monitor stands so the screen sits at eye level
  • Angled book holders and document stands so you're not hunching over a flat desk
  • Steering wheels and car seats that adjust to the driver's body
  • Kiosks and check-in screens tilted toward the user instead of facing straight up

6b - Reasonable Operating Forces

Definition: Use reasonable operating forces.

What it means: The amount of physical force required to operate something should be within reach of most people - including those with limited strength, arthritis, or reduced grip. If you have to push, pull, squeeze, or twist hard to make something work, that's a 6b failure.

The mental image: A heavy fire door with no automatic opener. Technically anyone can open it - but if you're in a wheelchair, have limited upper body strength, or are carrying something, that door is a real barrier. The force required is unreasonable for a significant portion of users.

Real-world examples:

  • Automatic or push-button door openers that eliminate the need to pull or push heavy doors
  • Light touch keyboards and touchscreens that respond to minimal pressure
  • Electric can openers vs. manual ones - same result, fraction of the force
  • Faucet handles that turn with minimal resistance vs. ones that require a firm grip and significant torque

6c - Minimize Repetitive Actions

Definition: Minimize repetitive actions.

What it means: If using something correctly requires you to do the same motion over and over, that's a design problem - not a user problem. Repetitive motion builds up fatigue fast, and for people with conditions like carpal tunnel, arthritis, or muscle fatigue disorders, it can cause real pain.

The mental image: Clicking through 15 separate screens to complete one task online - the same click, same motion, over and over. Or a manual stapler that requires you to press down hard every single time for a 50-page document. The repetition is the barrier, not any single action.

❌ Repetitive clicking
x15 Click through menus to reach one function
x50 Manual stapler - press hard every time
Carpal tunnel, arthritis, muscle fatigue - all worsened by repetition
The repetition is the barrier. Not any single action.
✅ Reduced repetition
Ctrl+S - Save instantly, anywhere
Electric stapler - one motion, done
Auto-fill - same info, typed once
Same result. Fraction of the effort. Fatigue eliminated.

Real-world examples:

  • Keyboard shortcuts that replace repeated mouse clicks
  • Electric staplers - one motion, done
  • Form fields that auto-fill so you're not retyping the same information repeatedly
  • Voice commands that replace repeated tapping or scrolling on a phone

6d - Minimize Sustained Physical Effort

Definition: Minimize sustained physical effort.

What it means: Holding something, pressing something, or maintaining a position for an extended period is its own kind of physical demand - separate from force (6b) or repetition (6c). Even a light grip becomes painful if you have to hold it long enough. Good design doesn't ask you to sustain effort just to keep using it.

The mental image: A heavy door with no kickstand or automatic hold-open - you have to keep holding it while someone else passes through. Or a power tool with a trigger you have to squeeze continuously to keep it running. The moment you let go, it stops. That continuous squeeze is the barrier.

❌ Must hold continuously
Hold door open while others pass through
Squeeze trigger continuously to keep tool running
Hold button down to keep mic listening
Even light grip becomes painful over time
Sustained effort is its own kind of fatigue - separate from force or repetition.
✅ Toggle - no holding required
Door kickstand holds it open - hands free
Toggle switch stays on - no grip needed
🎤 Listening Voice stays on without holding
One action to start. Done. No sustained effort.
Press once. It stays. Energy saved for everything else.

Real-world examples:

  • Door kickstands and automatic hold-open mechanisms - no one has to stand there holding the door
  • Toggle switches that stay on without you holding them - vs. hold-to-activate buttons
  • Touch-and-hold vs. toggle controls - a toggle stays on without continuous effort
  • Voice activation that stays listening without you holding a button down

The 6d Flow - Complete

  • 6a - Is your body positioned comfortably?
  • 6b - Is the force required reasonable?
  • 6c - Are repetitive actions minimized?
  • 6d - Is sustained effort eliminated?

Position -> force -> repetition -> duration. Every dimension of physical fatigue, covered.


Principle 7: Size and Space for Approach and Use

Definition: Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user's body size, posture, or mobility.

One-line handle: "Does the physical space work for every body?"

❌ Screen too high - seated user blocked
Screen mounted at standing height
💳 Account
Info
🧑
Can see ✓
🧑‍🦽
Blocked ✗
Wheelchair user can't see the screen. Same machine, unequal access.
✅ Screen angled - all users can see
Screen angled and lowered
💳 Account
Info
🧑
Can see ✓
🧑‍🦽
Can see ✓
Both users have a clear sightline. Same information. Same independence.
**The core idea:** This is the most physical and spatial of all seven principles. Every other principle is mostly about how something is designed to be understood or used - this one is purely about the body in space. Approach (can you get close?), reach (can you get to it?), manipulation (can your hand work it?), use (can you actually do the thing?).

The mental image: Picture a wheelchair user at an ATM mounted too high, or a short person reaching for a kiosk button. The principle is asking: Can every body get to it, reach it, and use it?


7a - Line of Sight

Definition: Provide a clear line of sight to important elements for any seated or standing user.

What it means: Visibility for any body position. Standing, seated, wheelchair, short, tall - everyone should be able to see what matters without craning, standing on something, or being blocked.

The mental image: You're at a concert. The tall person in front blocks everything - that's a 7a failure. A stadium with tiered seating where every row is slightly elevated so even the shortest person in the back has a clear sightline - that's 7a done right.

Real-world examples:

  • ATM screens visible from a seated position
  • Check-out counters with angled or lowered screens so wheelchair users can see the total
  • Museum displays at multiple heights so kids and wheelchair users aren't staring at the bottom of a frame
  • Signage visible whether you're walking or rolling

7b - Comfortable Reach

Definition: Make reach to all components comfortable for any seated or standing user.

What it means: If you can see it (7a) but can't reach it, you're still stuck. 7b picks up right where 7a left off.

The mental image: A light switch mounted at 6 feet. A seated person can see it just fine - but they can't reach it. Lower it to a height that works whether you're standing or in a wheelchair, and you've fixed it.

❌ Top shelf unreachable
Top shelf❌ can't reach
Mid shelfreachable
Low shelfreachable
Products on the top shelf require asking for help. That's the barrier.
✅ All shelves in reach zone
Upper shelfall users ✓
Mid shelfall users ✓
Low shelfall users ✓
Everything within reach zone for seated and standing users.

Real-world examples:

  • Light switches, thermostats, and elevator buttons at a reachable height from a wheelchair
  • Grocery store shelves - the top shelf is a 7b failure for most seated users
  • ATM keypads positioned so you don't have to lean or stretch
  • Drive-through windows low enough that you're not handing your card up to someone

7c - Hand and Grip Size

Definition: Accommodate variations in hand and grip size.

What it means: You can see it (7a), you can reach it (7b) - now can your hand actually work it?

The mental image: A tiny pen at a hotel check-in desk. If you have large hands or limited grip strength, that thing is nearly impossible to control. A door handle so narrow and smooth that anyone with arthritis, wet hands, or reduced grip can't turn it - that's a 7c failure.

❌ One grip size - many fail
Tiny hotel pen - large hands can't control it
Round knob - arthritis, wet hands fail
Tiny touch targets - tremors miss every time
Designed for one hand size. Everyone else compensates or fails.
✅ Accommodates all grip sizes
Ergonomic pen - works for any hand size
Lever handle - fist, finger, elbow all work
Large touch targets - precision not required
Any hand size, any grip strength - same result.

Real-world examples:

  • Lever door handles vs. round knobs - levers work for a fist, an elbow, a full hand, any grip
  • Tools and devices with ergonomic grips sized for different hands
  • Touchscreens with large enough targets that fat-finger errors are minimized
  • Scissors designed for different hand sizes (connects back to Principle 2 - Flexibility)

7d - Space for Assistive Devices or Personal Assistance

Definition: Provide adequate space for the use of assistive devices or personal assistance.

What it means: The last piece of the sequence. You can see it (7a), reach it (7b), grip it (7c) - but is there actually enough physical space for you and whatever you need with you? A wheelchair, a walker, a guide dog, a personal assistant - all of these need room.

The mental image: A bathroom that technically has a grab bar but the toilet is so close to the wall that a wheelchair can't pull up alongside it. Or a store aisle so narrow that a power wheelchair can't navigate it. The feature exists - the space doesn't.

❌ No space for wheelchair
Grab bar present - but toilet 4" from wall
Wheelchair can't pull alongside
Store aisle too narrow to turn around
The feature exists. The space doesn't. Still inaccessible.
✅ Adequate space for all
Wide stall - full turning radius for wheelchair
Space beside bed to pull wheelchair alongside
Wide aisles - power chair can turn around
Room for the person and everything they need with them.

Real-world examples:

  • Wide restroom stalls with turning radius for wheelchairs
  • Enough floor space beside a bed or examination table to pull a wheelchair alongside
  • Aisles wide enough for a power wheelchair to turn around
  • Check-in counters with open space beneath them so a wheelchair user can pull close

The 7d Flow - Complete

  • 7a - Can you see it?
  • 7b - Can you reach it?
  • 7c - Can your hand work it?
  • 7d - Is there space for you and everything you need?

That sequence is the full physical experience of approaching and using something. Walk through it any time you're evaluating a design.