Inclusive Design – The Big Picture
A presentation at AccessU Virtual Conference by Eric Eggert
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
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.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Jutta Treviranus
-
Susan M. Goltsman
-
Accessibility, Usability, and Inclusion (W3C/WAI)
-
Does The Average Person Exist?
-
Does The Average Person Exist?
-
https://twitter.com/standupmaths
-
Jutta Treviranus
-
Jutta Treviranus
-
Susan Goltsman
-
@standupmaths
-
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.
