Inclusive Design – The Big Picture

Inclusive Design The Big Picture #AccessU2021 Eric Eggert, May 2021 1

Eric Eggert Knowbility’s Director of Accessibility Services Based in Essen, Germany • German BIENE Award in 2010 • Outline Consulting (since 2011) • W3C/WAI (2013–2020) • Knowbility (since 2016) 2

Content Warning This presentation covers: • Racial Inequality • Gender Discrimination • Ageism • Ableism 3

What is Inclusive Design? 4

Jutta Treviranus Jutta Treviranus is the Director of the Inclusive Design Research Centre (IDRC) and professor in the faculty of Design at OCAD University1 in Toronto. Jutta also heads the Inclusive Design Institute, a multi-university regional centre of expertise. Bio at OCAD University 1 Ontario College of Art & Design University 5 Pronouns: she/her

Susan M. Goltsman (1949–2016) Susan Goltsman, FASLA2, 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 2 Fellow of the American Society of Landscape Architects 6 Pronouns: she/her

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. 7

And just to make this clear: This is “store-brand inclusive design”, not “name-brand inclusive design”. 8

Why do I care? 9

Apple Maps 10 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 11 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. 12

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. 13

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 Greek. 14

3 The world was not designed for my friend’s needs. • Inaccessible. • No information available in Greek. • Segregated Education. 3 Well, in particular Germany in the 80’s & 90’s. 15

So, Inclusive Design. 16

Related Concepts Inclusive Design Universal Design Accessibility 17

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.” 18

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

Source: Dean Bouchard on Flickr 20

Source: Mike on Flickr, left image, right image 21

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) 22

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

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

Does the Average Person Exist? 25

Thanks Matt! • On YouTube: Does The Average Person Exist? • Twitter: @standupmaths 27

No User is the Same 28

One size – fits one. 29

Inclusive design doesn’t mean you’re designing one thing for all people. — Susan Goltsman 30

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

Beware of your own biases! 32

@PavelASamsonov 33

It’s easy to generalize from one’s own experiences. And invalidate other’s experiences 34

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

Language Aspects of Human Diversity 36

Source: Internationalization - W3C 37

Source: Internationalization - W3C 38

Source: Internationalization - W3C 39

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? 40

Culture Aspects of Human Diversity 41

@LucasBrownEyes on twitter 42

Cultural insensitivity is actively hurtful. 43

What does this symbol mean: ✓ 44 Checkmark means correct in western countries, incorrect in Japan.

Source: Internationalization - W3C 45

Source: thinklilac.blogspot.com 46

Source: six-degrees.com 47

[… 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 48

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. 49

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. 50

Source: Shirley Wu on Twitter 51

Source: Talk by Stéphanie Walter 52

Gender Aspects of Human Diversity 53

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

55

Tatiana Mac Tatiana Mac (they/hän/she) 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, they work directly with organisations to build clear and coherent products and design systems. They believe the trifecta of accessibility, performance, and inclusion can work symbiotically to improve our social landscape digitally and physically. When ethicallyminded, they think technologists can dismantle exclusionary systems in favour of community-focused, inclusive ones. Adapted from tatianamac.com/about 56

58

59

Perpetuated Exclusion * unintentional 60

Gender Pay Gap 61

Race Aspects of Human Diversity 62

Photos by Nathan Dumlao and Kareem Hayes on Unsplash 63

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”. 64

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) 65

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) 66

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. 67

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? 68

69

Instagram: ms_mamie89 70

[…] 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! 71

Age Aspects of Human Diversity 72

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 73

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 74

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 75

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) 76

Aspects of Human Diversity Ability & Disability 77

78

You cannot talk about accessibility without talking about disabilities. 79

‼ E.J. Mason on Twitter THEY PRONOUN 80

81

82 How websites are built

83

• Talking & Planning ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

84

• Graphic Design (of an image of a website) ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

85

• HTML/CSS/JavaScript ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

86

• CMS ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

87

• Content ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

88

• Iterations ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

89

• Performance ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

90

• Security ^ * Hotfixes ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

91

• Data protection ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

92

• Quality Control ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

93

• Accessibility ^ ^ …and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Accessibility is a sign of good quality. 94 And that despite that we all know that accessibility is a sign of a good process and caring for it can result in a process that produces better quality websites.

Designing inclusive software results in improved usability and customer satisfaction. — Microsoft’s app developer guide 95 Don’t take my word for it.

Accessibility must be a foundational value 96 But that also means accessibility needs to be a foundational value in the process and everyone needs to live it and embrace it.

97 [alt: 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 98

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 Here are some more detailed observations from the study. 99

More Complex Less Accessible 100

Taming complexity often comes with even more complexity 101 Many developers that get the task of implementing complex widgets add ARIA in an attempt to ensure accessibility. But that makes it even more complex.

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

4 ARIA can help, but not in every situation. 4 Accessible Rich Internet Applications 103

Accessibility is not only Screen Readers 104

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

Dragon How Dragon Naturally Speaking works with ARIA » Simply Accessible (2014) Photo by Pierre Bamin on Unsplash 106

Screen shot courtesy of Eric Bailey 107 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 108 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.

109 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 110

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

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

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

User Disability Type Proficiency Accessibility Support 114

Users are somewhere on this spectrum between type of disability, accessibility support of the tools they use and the proficiency that they have to actually use those tools.

Test with Diverse Users 116

Give Users Agency 117 they can decide the technology that works best for them

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

Try not to prescribe how to use a component. 119

Use HTML to describe elements. 120

Don’t expect any proficiency from users. 121

Don’t break conventions! 122

Users have many tools to use! 123

Reader Mode 124

125 This is reader mode in Safari. Clicking on the reader mode icon in the top left transforms the page (in the first screen shot) to an easy to read layout that focuses on the content of the page.

126 You can change fonts and colors to your liking.

Reader Mode Native Support: • Safari (since 2010, can set to default since 2015) • Firefox (2015) • Edge (2015) • Chrome (soon??????) 127

128 This is the reader mode in Firefox. It can read the content to you, which is important for users with cognitive disabilities. It also has theme options.

More Website Settings 129

130 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.

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

Leveraging Preferences in the Operating System 132

133 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 134

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

136

Or, better, progressively enhance: @media (prefers-reduced-motion: no-preference) { /* All animation code */ } siehe “Defensive use of prefers-reduce-motion” à la Patrick H. Lauke 137

Support Source: Can I Use Support across browsers is very good. 138

On Windows … it’s complicated 139

Short note on prefers-reducedmotion and puzzled (Windows) users Patrick H. Lauke @ TPG Blog 140

prefers-color-scheme Media Query 141

:root { —color: #333; —bgcolor: #eee; } @media (prefers-color-scheme: dark) { :root { —color: #eee; —bgcolor: #333; } } html { color: var(—color); background-color: var(—bgcolor); } 142

Developers & Designers also get many more tools to use! 143

Media Queries Level 5 • inverted-colors • prefers-reduced-transparency • prefers-contrast (no-preference/high/low) • forced-colors (none/active) 144

How to tackle Inclusive Design? 145

80% of Success is Showing Up — Woody Allen 146

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 147

Cards for Humanity 148

149

Nothing about us, without us. — Disability Rights Motto 150

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

Source: Tatiana Mac 152

Question design decision as a habit 153

You cannot solve Inclusive Design in code alone. 154

Brainstorm the feature. Brainstorm the implementation. 155

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

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 157