Inclusive Design – The Big Picture

Inclusive Design – The Big Picture

#knowbilitydesign

Eric Eggert, September 2020

Eric Eggert

Based in Essen, Germany

• German BIENE Award in 2010
• W3C/WAI (2013–2020)
• Knowbility (since 2016)

Today’s Schedule (in Central Time)

• 9:30am–10:15am: Part 1
• 10:15am–10:30am: Break
• 10:30am–11:15am: Part 2
• 11:15am–11:30am: Break
• 11:30am–12:15pm: Part 3
• 12:15pm–12:45pm: Break
• 12:45pm–1:30pm: Part 4

Introduction

What is Inclusive Design?

Jutta Treviranus

Jutta Treviranus is the Director of the Inclusive Design Research Centre (IDRC) and professor in the faculty of Design at OCAD University* in Toronto.

Jutta also heads the Inclusive Design Institute, a multi-university regional centre of expertise.

Bio at OCAD University

*: Ontario College of Art & Design University

Susan M. Goltsman (1949–2016)

Susan Goltsman, FASLA*, was an internationally recognized expert in programming and designing inclusive environments for children and families. She created and advocated tirelessly for environments that promote social equity and contribute to healthy human development.

Obituary at PLAE

*: Fellow of the American Society of Landscape Architects

Inclusive Design, a Definition

• Digital technology can improve societal inclusion
• A methodology that enables and draws on the full range of human diversity.
• Including and learning from people with a range of perspectives.
• Inclusive design doesn’t mean you’re designing one thing for all people.
• You’re designing a diversity of ways to participate so that everyone has a sense of belonging.

And just to make this clear:

This is “store-brand inclusive design”, not “name-brand inclusive design”.

Why do I care?

Satellite view of Eric’s home town

This is where I grew up, a small town in Germany. And I have talked about this in the interview you can read at the Knowbility blog. It was a rather isolated upbringing with only a few people in my age group.

So I like to call it…

Somewhere in the Forest, Germany

And there, one of my friends was a neighbor kid who also used wheelchair user. Who was required to go to a separate school because none of the schools were accessible. And of course none of the busses were, too.

As a kid, I already found that to be **unfair**.

I had Asthma until I was 12.

And while that excluded participation in many activities, it allowed me to go to a “regular” school.

This was not a matter of course at the time.

Allergen immunotherapy helped me eventually.

Why did we get treated differently?

• My condition did only require minor adjustments.

• I did not need an accessible building (but it would have helped).

• My parents are German, his are Greeks.

The world* was not designed for my friend’s needs.

• Inaccessible.
• No information available in Greek.
• Segregated Education.

*: Well, Germany in the 80’s & 90’s.

So, Inclusive Design.

Related Concepts

• Inclusive Design
• Universal Design
• Accessibility

Universal Design

Design an environment so that it might be accessed and used in the widest possible range of situations without the need for adaptation.

“One size – fits all.”

Universal Design

• Based on built environments & architecture.
• Describes the qualities of the final design.
• Great for physical objects.

An example for bad universal design

Source: Dean Bouchard on Flickr

Mike on Flickr

Mike on Flickr

Accessibility

Requirements that are technical and relate to the underlying code rather than to the visual appearance and requirements that relate to user interaction and visual design.

— Accessibility, Usability, and Inclusion (W3C/WAI)

Accessibility

• An attribute instead of a method.
• Focuses on accessibility standards.
• A foundation for building inclusive solutions.

Inclusive Design can focus on accessibility and have a universal design as an outcome.

Does the Average Person Exist?

Transcript of the section shown in the workshop:

This is the report that Daniels wrote after the main results had come out. And unlike this beast, which is huge, Daniels’ report is four pages long, including the introduction, because they were right. They tried to define what an average person was and then find them in the data and they were very generous. On average, they define someone as average, if they were within point three standard deviations of the mean in either direction. And in case of doubt, they rounded up to include more people as average. In any one measure, anything between 25 to 30% of people counted as average. But when they tried to find someone who was average on just 10 different measurements, it didn’t work. One, of the original 4063 men, 1055 were of approximately average stature. Of those 1055 men, 302 were also of approximately average chest circumference. Of them 143 we’re also have approximately average sleeve length on blah blah blah. And eventually we have, well after nine measurements there are two people left and of those unfortunately, zero we’re also of approximately average crotch length. Which is different to catch height that was earlier. Okay, so it concludes today’s reading. There it is. The one example Daniels put in their report and it’s all they needed because it proves their point perfectly.

Thanks Matt!

• On YouTube: Does The Average Person Exist?
• Twitter: @standupmaths

No User is the Same

Aspects of Human Diversity

1. Language
2. Culture
3. Gender
4. Race
5. Age
6. Ability & Disability
7. Other forms of human difference

One size – fits one.

Inclusive design doesn’t mean you’re designing one thing for all people.

— Susan Goltsman

You’re designing a diversity of ways to participate so that everyone has a sense of belonging.

— Susan Goltsman

Beware of your own biases!

@PavelASamsonov on Twitter:

Everyone: the racist, sexist, violent system has failed us Tech bros: idk, it works on my machine

It’s easy to generalize from one’s own experiences.

And invalidate other’s experiences.

Aspects of Human Diversity

1. Language
2. Culture
3. Gender
4. Race
5. Age
6. Ability & Disability
7. Other forms of human difference

Aspects of Human Diversity: Language

This title is /Arabic text/ in Arabic, with arrows underneath the writing that shows that the English text is read from left to right and the Arabic text is read from right to left

Source: Internationalization - W3C

Vertically written Chinese text

Source: Internationalization - W3C

• Illustration showing how the order of words can change from one language to another, here from English to Finnish
• Illustration showing how the order of words can change from one language to another, here from English to Hindi

Source: Internationalization - W3C

Language

Awareness for speakers of other languages helps to shape content.

• Do we need text for this?
• Can we support our content with illustrations, animations or videos?
• Can this be written simpler or more descriptive?
• Is there an appropriate symbol?

Aspects of Human Diversity: Culture

“Erasure is complete when they say your name and you’re no longer remembered.” – With examples of Native American names like Pontiac or Apache transformed into brand names.

@LucasBrownEyes on twitter

Cultural insensitivity is actively hurtful.

What does this symbol mean: ✓

Checkmark means correct in western countries, incorrect in Japan.

A green circle means correct in Japan.

Source: Internationalization - W3C

Colors in different cultures

thinklilac.blogspot.com

Colors in different cultures

six-degrees.com

[… R]ed is lucky for Chinese people. […] Thai people will be offended if you print their name in red — it’s the color that monks employ to write names on coffins, so to write someone’s name in red is to “wish them dead”.

— Bruce Lawson, Notes on Designing Websites for the Asian Market

Cultural Identity

• The identity or feeling of belonging to a group.
• Group of people sharing the same cultural identity or upbringing.
• Heavily impacted by a person’s cultural arena, the place where a person lives.
• Immigrants adjust to the culture of the country they immigrated to linearly over time.
• It is possible to have the ability to obtain competence within two cultures without losing one’s sense of identity or having to identity with one culture over the other.

Cultural Identity

Issues can arise when…

• …the majority culture is assumed by default.
• …designs created in one cultural environment get transplanted into a different environment.

Tweet that shows a form with the error message ”Enter a valid last name” when entering the last name “Wu”.

Source: Shirley Wu on Twitter

Talk by Stéphanie Walter

Aspects of Human Diversity: Gender

Gender is the range of characteristics pertaining to, and differentiating between, masculinity and femininity.

— Wikipedia

Depending on the context, these characteristics may include biological sex, sex-based social structures (i.e., gender roles), or gender identity.

— Wikipedia

Tatiana Mac

Tatiana Mac (she/they) is an independent American engineer and open source maintainer who created and is building Self-Defined, a modern dictionary about us; and Devs of Colour, a database that will prioritise finding undiscovered Black/brown talent through a thoughtful search algorithm.

As a consultant, she works directly with organisations to build clear and coherent products and design systems.

She believes the trifecta of accessibility, performance, and inclusion can work symbiotically to improve our social landscape digitally and physically. When ethically-minded, she thinks technologists can dismantle exclusionary systems in favour of community-focused, inclusive ones.

Adapted from tatianamac.com/about

Source: Tatiana Mac – System of Systems

Multiple Gender selectors, always with “Male” listed first

Positive Feedback Loop

Perpetuated Exclusion*

*: unintentional

Gender Pay Gap

Aspects of Human Diversity: Race

Protesters at a Black Lives Matter Protest

Photo by Nathan Dumlao on Unsplash

On the word “Race” in modern Germany

• Basically unused in day to day life.
• No biological basis for “races”. Sometimes people considered “one race” have more genetic variability than people of “different races”.

Und doch existieren „Menschenrassen“ tatsächlich. Nicht als biologische Fakten, sondern als – unbewusste – Denkstrukturen und Urteile in unseren Köpfen.

— Ulrich Kattman (Bundeszentrale für Politische Bildung)

And yet “human races” actually exist. Not as biological facts, but as – subconscious – thinking structures and judgements in our minds.

— Ulrich Kattman (Bundeszentrale für Politische Bildung)

Many in Germany use words like “extreme right-wing” or “xenophobic” instead of “racist” because it is seen more as an ideology.

That means that racist acts are often not acknowledged as being racist.

That’s a problem.

How does racism apply to inclusive design?

• Racism usually means a continuous, systematic discrimination.
• What can your product, your design, do to counteract that discrimination?
• Can you offer stipends or free tickets for members of groups that are targeted by racists?

Virus Icon

Two girls (faces obscured) sit on the sidewalk of a Taco Bell parking lot. Both have laptops on the lap. A notebook with pencil lies on the sidewalk in front of them. Two employees with face masks talk to them.

Instagram: ms_mamie89

[…] These 2 young girls were looking for a place with WiFi to do their school work so they sat near Taco Bell to connect […]. A lot of us don’t have to worry about having a proper WiFi connection or a quiet place to work from home. Every student from preschool through college should have free access to reliable WiFi especially now. What can we do as a community to pull together for students who need something as simple as WiFi in order to succeed? […]

Update: The girls were identified by their school district and given hotspots! I’m sure there are other children in need, I am hoping they all get the tools they need! If local businesses would like to donate their space to set up outdoor internet cafes, please let me know. I would love to help rally up supplies and man power!

Aspects of Human Diversity: Age

Ageism is discrimination because of your age

The stereotypes and infantilization of older and younger people by patronizing language affects older and younger people’s self-esteem and behaviors.

— Wikipedia

After repeatedly hearing a stereotype that older or younger people are useless, older and younger people may begin to feel like dependent, non-contributing members of society. They may start to perceive themselves […] in the same ways that others in society see them.

— Wikipedia

Studies have also specifically shown that when older and younger people hear these stereotypes about their supposed incompetence and uselessness, they perform worse on measures of competence and memory.

— Wikipedia

Common ageist assumptions:

• The person is too young to understand the big picture.
• The person is too old to handle technology.
• Millennials have it easy.
• Ageism is also inadvertently embedded in the ways that we generate statistics, for example through data collected based on large age categories (e.g., ‘60+’) foisting anyone over 60 into “the grey zone” which obscures differences. (Wikipedia)

Aspects of Human Diversity: Ability & Disability

Making sure we can interact with the web

You cannot talk about accessibility without talking about disabilities.

E.J. Mason on Twitter:

Love 2 b called “differently abled” because it suggests that I have some kind of paranatural ability beyond the ken of mortal man. And I do, but you can still just call me “disabled”. Promise.

Descriptions of visuals:

A man with three distinct bruises on his face, wearing dark sunglasses and holding a white cane, stands, listening, on a busy city sidewalk. A bicycle weaving in and out of traffic. A dog trotting past. Doors opening. The tick tick of a white cane. A dark haired woman walking with the cane brushes past him, and he slowly turns to follow her. She stops at an intersection and gets into the backseat of a black car, from which classical music is playing.

He turns into an alley, where he tosses his cane and takes a running leap onto a a trash barrel, and then up to a fire escape. He climbs up numerous sets of metal stairs and walkways. The car travels on the city streets below. Inside, the woman sits silently

He climbs a metal ladder and leaps onto a roof with a large, rooftop water tower, to take off on a parkour adventure - jumping, rolling, flipping in somersaults, across rooftops at various highs and lows.

He runs along a roof’s edge and then sails through the air to land, on his feet, on another roof over 10 feet away, where he continues to run.

He stops and looks over the roof edge at an alley, as the black car pulls to a stop below. The woman exits the back seat and walks to a door guarded by two men with automatic weapons. After a guard knocks on the door, she is escorted into the building.

The process of building a website

Talking & Planning

Graphic Design (of an image of a website)

HTML/CSS/JavaScript

CMS

Content

Iterations

(visually the words have been placed on a canvas and now it’s running out of space)

Performance

(visually at a 45 degree leaning on other text to emphasize the afterthought)

Hotfixes & Security

Data Protection

(On its head, to emphasize that it was thrown in there)

Quality Control

(is added)

Accessibility

(pushed to of the picture, accessibility often comes last)

Accessibility is a sign of good quality.

Designing inclusive software results in improved usability and customer satisfaction.

— Microsoft’s app developer guide

Accessibility must be a foundational value

Neil Patrick Harris with a stack of papers that he arranges neatly, saying “hopes and dreams” on the cover. Then throwing it away behind himself.

Accessible Web Development is Complicated

WebAIM Million Study

• 60% of the 1 million home pages had ARIA present.
• Home pages with ARIA present averaged 11.2 more detectable errors than pages without ARIA.
• Pages with a valid HTML5 doctype had significantly more page elements (average of 844 vs. 605) and errors (average of 61.9 vs. 53.3) than those with other doctypes.
• 2.1M layout tables were detected compared to only 114k data tables.

WebAIM Million

More Complex = Less Accessible

aming complexity often comes with even more complexity

Jodie Whittaker as Doctor Who, saying “I am too nice. This is what happens when you try to be nice.”

Screen Reader Differences

VoiceOver and Safari remove list element semantics when list-style: none is used.

— Scott O’Hara: “Fixing” Lists

List with visible bullets

List with invisible bullets

Web Developers

Three Doctors Who (9, 10, 13) saying ”What?”

This was a purposeful change due to rampant “list”-itis by web developers.

— James Craig, Apple, bugs.webkit.org

Thirteenth Doctor ”What? No, hang on a sec!”

What does it mean for me, as a web developer, that Safari is not reading lists, when they don’t look like a list?

— John Doe-veloper

Nothing.

A Time Line

• 2014: First Commit
• 2015: Additional Code
• …
• 2019: The Web Notices

Customers seem much happier in the 3 years since this change went in.

— James Craig, Apple, bugs.webkit.org

dowebsitesneedtolookexactlythesameineverybrowser.com

The same is true for screen readers:

They don’t all need to produce the same output.

Screen readers have extremely granular verbosity settings. In VoiceOver, you can chose between Medium, Low and High verbosity. Users can chose individually the level of verbosity they are comfortable with.

The same goes for punctuation. Some users might opt to hear most or all of the punctuation, some only to hear a couple.

You can even overwrite certain abbreviations or symbols. You can even make VoiceOver pronounce GIF as jiff, if you want to.

There is no control.

ARIA can help, but not in every situation.

Accessible Rich Internet Applications

Accessibility is not only Screen Readers

Most non-screen reader assistive technology does not work well with ARIA.

[Narrator] With Dragon Home you can search using your web browser even if your browser is not yet open. Search Google for movie listings in Chicago, Illinois. Click Search. Click “The Meg”. Start scrolling down. Stop scrolling. Click More showtimes. Click AMC River East 21 Click tomorrow. Click evening. Ready to get more done by simply speaking, the all new Dragon Home is listening.

High Contrast Mode

This screen shot shows a couple of links: Normal links, placeholder links without href, links that are faked using ARIA, even one without a button. On the right, there’s a paragraph of text with a styled ARIA link in it (Non-underlined dark blue text link in black text paragraph.)

Screen shot courtesy of Eric Bailey

This is the same page with High Contrast Mode enabled. Only real links are colored differently compared to the normal text. ARIA links have the same color as the text.

Screen shot courtesy of Eric Bailey

The same goes for buttons – when you use aria-disabled=true, the disabled button will not look inactive, like a button that has the disabled attribute set. This can confuse users.

Difference of Tool Knowledge

Users often don’t know what their computers can do for them.

Other users hack their assistive technology to work with inaccessible sites.

Some users write CSS and JavaScript to change websites to their needs.

User = Disability Type ⨉ Proficiency ⨉ Accessibility Support

(Users are everywhere in the 3D graph of these aspects.)

Test with Diverse Users

Give Users Agency

Allow use of assistive technology that suits a particular user’s needs.

Try not to prescribe how to use a component.

Use HTML to describe elements.

Don’t expect any proficiency from users.

Don’t break conventions!

Users get a lot more tools to use!

Reader Mode

Diverse views of Safari Reader on iPhone

Safari Reader on iPhone Settings

Reader Mode

Native Support:

• Safari (since 2010, can set to default since 2015)
• Firefox (2015)
• Edge (2015)
• Chrome (soon????)

Reader mode in Firefox.

It can read the content to you, which is important for users with cognitive disabilities.

Theme options.

More Website Settings

You can nowadays set different default settings for a website. Here I set to use reader mode when it is available, enable content blockers and never auto-play video on medium.com.

It’s also possible to get an overview, and change, the settings on a site basis.

Leveraging Preferences in the Operating System

The Operating System, here macOS, has a diverse set of settings, including “invert colors”, “reduce motion”, “use greyscale”, “increase contrast” and “reduce transparency”.

We can use those settings on the web:

prefers-reduced-motion Media Query

@media (prefers-reduced-motion: reduce) {
  * {
      transition: none !important;
      animation: none !important;
  }
}

Or, better, progressively enhance:

@media (prefers-reduced-motion: no-preference) {
  /* All animation code */
}

see “Defensive use of prefers-reduce-motion”, Patrick H. Lauke]

Prefers Reduced Motion Support Table

Source: Can I Use

On Windows … it’s complicated

Short note on prefers-reducedmotion and puzzled (Windows) users

Patrick H. Lauke @ TPG Blog

prefers-color-scheme Media Query

:root {
  --color: #333;
  --bgcolor: #eee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #eee;
    --bgcolor: #333;
  }
}

html {
  color: var(--color);
  background-color: var(--bgcolor);
}

We* also get a lot more tools to use!

*: Web Developers & Designers

Media Queries Level 5(?)

• inverted-colors
• prefers-reduced-transparency
• prefers-contrast (no-preference/high/low)
• forced-colors (none/active)

How to tackle Inclusive Design?

80% of Success is Showing Up

— Woody Allen

This also applies to inclusive design thinking.

• Keep an eye out for people who might be negatively affected by a design decision.
• Integrate minoritized groups into your
  • stories
  • personas
  • QA process
  • design/develop/project teams

Cards for Humanity

Cards for Humanity sample

Nothing about us, without us.

— Disability Rights Motto

As long as workplaces are not inclusive, their products won’t be truly inclusive.

Positive feedback loop between design, proactive research, feedback, reactive research and design

Tatiana Mac

Question design decision as a habit

You cannot solve Inclusive Design in code alone.

Brainstorm the feature. Brainstorm the implementation.

Conclusion

• Do not make assumptions about users and the tools they use
• Prepare your content and design for different circumstances
• Embrace the uncertainty

Thank You!

Eric Eggert

• Web: yatil.net
• E-Mail: mail@yatil.net
• Social: @yatil

Never be cruel, never be cowardly. And never ever eat pears! Remember – hate is always foolish… and love, is always wise. Always try, to be nice and never fail to be kind. […] Laugh hard. Run fast. Be kind.

— 12th Doctor