Inclusive Design – The Big Picture
A presentation at Knowbility Workshop Series by Eric Eggert
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.
*: 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.
*: 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
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
- 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
- Language
- Culture
- Gender
- Race
- Age
- Ability & Disability
- 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
- Language
- Culture
- Gender
- Race
- Age
- Ability & Disability
- 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.
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
Colors in different cultures
[… 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
Aspects of Human Diversity: Gender
Gender is the range of characteristics pertaining to, and differentiating between, masculinity and femininity.
Depending on the context, these characteristics may include biological sex, sex-based social structures (i.e., gender roles), or gender identity.
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
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.
And yet “human races” actually exist. Not as biological facts, but as – subconscious – thinking structures and judgements in our minds.
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.
[…] 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.
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.
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.
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.
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.
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.
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
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
On Windows … it’s complicated
Short note on prefers-reducedmotion and puzzled (Windows) users
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 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
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
Accessibility is only one component of an overall Inclusive Design approach. Learn how to connect the dots between different disciplines of Inclusive Design, including accessibility. Define requirements and safeguards to ensure inclusion for all. Web Accessibility Expert and Knowbility Tech Team Lead Eric Eggert explains the big picture on Thursday, September 3, 2020, from 9:30 AM to 1:30 PM (CT).
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Jutta Treviranus
-
Susan Goltsman
-
Does The Average Person Exist?
-
@PavelASamsonov
-
Internationalization - W3C
-
@LucasBrownEyes on twitter
-
Colors and cultures image
-
Colors and cultures PDF
-
Bruce Lawson, Notes on Designing Websites for the Asian Market
-
Shirley Wu on Twitter
-
Talk by Stéphanie Walter
-
Gender (Wikipedia)
-
tatianamac.com/about
-
Ulrich Kattman (Bundeszentrale für Politische Bildung)
-
Instagram: ms_mamie89
-
Ageism (Wikipedia)
-
E.J. Mason on Twitter
-
WebAIM Million
-
Scott O’Hara: “Fixing” Lists
-
bugs.webkit.org
-
dowebsitesneedtolookexactlythesameineverybrowser.com
-
Working with High Contrast Mode – Eric Bailey: #ID24 2018
-
Reader Mode in Chrome (soon????)
-
“Defensive use of prefers-reduce-motion”,Patrick H. Lauke
-
Patrick H. Lauke @ TPG Blog
-
Cards for Humanity
-
Tatiana Mac: Socially Inclusive Design Systems
-
yatil.net
Buzz and feedback
Here’s what was said about this presentation on social media.
