Inclusive design cards

Design with empathy

Invisible diversity

Not all types of diversity are visible. For example:

• depression
• autism spectrum
• colour blindness

People may have more than one difference of ability. Someone could have both low mobility and low vision.

Every person is unique—design flexible services.

Respectful interactions

• Often the greatest limitation of a person’s ability is the attitudes of other people
• If you feel pity, instead try to understand the person’s experience through respectful conversation
• Terms like handicapped, impaired, crazy, mentally ill, midget, disorder and disease range from insulting to uncomfortable
• The most respectful label to call someone by is their name
• Don’t say “hearing impaired person,” do say “person with hearing impairment”
• Don’t make assumptions about someone’s limitations or abilities, do ask if you can help and how you can help
• Don’t assume people can’t hear or understand you, do raise your voice or speak slowly if you are asked
• Don’t gossip, whisper, point, stare or take photos; do treat each person with respect and professionalism

Gaining insight

Videos to help you gain a deeper understanding:

Inclusion, belonging and the disability revolution: Jennie Fenton

Why design should include everyone: Sinéad Burke

Able privilege: Alan Larson and an able-bodied privilege checklist

What is the social model of disability?

Accommodations

Many accommodations are required by law under the Ontario Human Rights Code and/or the Accessibility for Ontarians with Disabilities Act. Become biased towards trying to accommodate immediately.

Don’t doubt a person’s need for accommodations. If it is an extreme hardship or cost to provide, explain the challenge and ask if there is another way you can accommodate them.

Emotional reactions

You may interact with people who feel angry, sad, anxious, frustrated or other emotions. You may meet people who have challenges understanding facial expressions, body language, jargon, sarcasm and jokes.

Don’t make assumptions about behaviour. Remain calm and ask for clarification. Explain what you heard and how it made you feel.

Design inclusive physical experiences

In person

• converse at eye level
• ask permission to give assistance
• offer note taking or writing services if needed
• allow clients to book appointments instead of waiting in line
• provide accessible parking spots
• provide places to sit and rest
• clear pathways and mark them physically and visually
• ensure doors are easy to figure out (push or pull?) and open
• test the space for physical access

Choose spaces with

• elevators and ramps
• wide doors and passageways
• doors that are easy to open
• low counters, shelves, sinks, toilets
• high tables, desks, toilets
• lights that don’t flicker
• even and level floors

Online

• interfaces that can be tabbed through (test using a keyboard)
• check that you can always clearly see the current focus while using the tab key
• check that there are no interface elements that you can tab into, but not tab out of
• use proper heading structure
• add anchor links that skip long lists of links
• remove time limits or allow users to extend them
• create large buttons that don’t require precision to press
• avoid or provide alternatives to drag and drop, touch or hover activated interfaces

You’ll help people with

• arms full (carrying parcels, baby, etc.)
• gloves on hands (doctor, gardener, etc.)
• eating food while they’re working
• weight and height variances
• broken bones or other injuries
• recovering from surgery
• nerve damage or degeneration
• muscle coordination and strength loss
• joint pain and reduced mobility
• full or partial paralysis
• missing limbs

Design inclusive audio experiences

In person

• make eye contact and speak clearly
• speak to the person, not their interpreter
• use visual cues (i.e. wave to signal you are speaking if someone isn’t looking at you)
• designate a quiet room and offer it as needed
• don’t create background noise (music, announcements, etc.)
• offer an interpreter if someone can’t understand a person with an accent, mustache or covered face
• remove surgical masks, when speaking
• avoid chewing gum and eating hard candies
• repeat information as often as you are requested
• consider rephrasing or using a different word if you have to repeat something more than twice
• offer content in both written and audio format

Choose spaces with

• separate, small rooms (open concept, large rooms make hearing difficult)
• sound absorption
• no external noise sources nearby (airport, highway, train tracks, etc.)
• audio alerting systems (alarms, public announcement systems, etc.) that also use visual notifications
• no high pitched noises above 20 Kilohertz

Online

• caption and transcribe videos
• provide sign language videos
• write clearly, at an elementary school level
• illustrate complex concepts, if possible
• don’t automatically play videos or audio
• pair audio alerts with a visual alert
• include volume controls for audio that are easy to find and operate using a keyboard
• don’t create experiences that require users to hear (always provide at least one alternative)

You’ll help people

• with audio turned off
• with no speakers available
• in a noisy environment
• wearing earplugs, headphones or ear protection
• with full or partial hearing loss
• whose second language is English

Design inclusive visual experiences

In person

• offer large print and braille formats
• provide bright lighting to help with reading
• don’t pet, feed or distract service dogs
• identify yourself when you enter a room
• ask before guiding someone
• don’t grab the person—touch the back of their hand and they will take your elbow
• tell them about steps or obstructions as you approach them
• give directions that don’t rely on sight—for example, to your left or right and indicate the distance

Online

• don’t rely on vision (for example, identify content by colour or position on the page)
• use text colours that contrast strongly with the background
• don't use select elements (drop-down lists)

Give users control:

• let users choose to play sounds or videos
• don’t open new windows, tabs or content on top of an existing page
• test if the site is usable zoomed in 200%

Use HTML elements to create structure:

• follow HTML standards (for example, don't use divs that look like buttons
• use descending heading order (h1, h2, h3, h4)
• ensure links make sense if read in isolation from the context
• add a label to all form elements
• use CSS for decorative images and img tags for informative images
• describe images in captions (>140 characters) or alt text (<140 characters)
• identify the page language and changes with the lang attribute
• use a unique title on every page
• ensure IDs are unique within the page
• check that content order is logical without CSS (test with a Chrome or Firefox extension or a screen reader like NVDA or voiceover)

You’ll help people with

• high glare on screen
• low lighting
• blindness
• low vision
• partial vision (one eye, partial field of vision, dark or light spots blocking vision, blurring)
• colour blindness
• light sensitivity
• dyslexia

Design inclusive thought experiences

In person

• identify what users need to know or bring with them in advance
• repeat information as often as you are requested
• consider rephrasing or using a different word if you have to repeat something more than twice
• don’t rush people who need more time
• offer note taking or writing services if needed

Online

Navigation:

• use clear labels for navigation and forms
• limit navigation and other choices to seven at a time
• provide two different ways to navigate a site
• don’t break the function of the browser back button
• use consistent layout and wording on every page
• identify correct and incorrect text input and selections

Content:

• use plain language (avoid or explain complex terms)
• group content in sections with clear headings
• use less than 80 characters per line of text
• use left or right alignment, not full-justified text
• highlight important information
• use graphics to improve understanding

Vestibular concerns:

• don’t use high contrast stripes in your design
• don’t use parallax scroll effects or automated scrolling
• don’t place moving images beneath static text
• don’t use flashing, blinking or flickering elements

You’ll help people with

• stress or exhaustion
• attention deficit or hyperactivity
• dementia
• brain injury or stroke
• intellectual difficulties
• language and learning difficulties
• dyslexia
• autism spectrum
• seizures caused by flashing lights (photo epileptic)
• nausea or dizziness triggered by inner ear (vestibular) disorders