Inclusive Design – The Big Picture

A presentation at Knowbility Workshop Series by Eric Eggert

Inclusive Design – The Big Picture

Inclusive Design – The Big Picture

Eric Eggert

Eric Eggert

Today’s Schedule (in Central Time)

Today’s Schedule (in Central Time)

Introduction

Introduction

What is Inclusive Design?

What is Inclusive Design?

Jutta Treviranus

Jutta Treviranus

Susan M. Goltsman (1949–2016)

Susan M. Goltsman (1949–2016)

Inclusive Design, a Definition

Inclusive Design, a Definition

And just to make this clear:

And just to make this clear:

Why do I care?

Why do I care?

Satellite view of Eric’s home town

Satellite view of Eric’s home town

Somewhere in the Forest, Germany

Somewhere in the Forest, Germany

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

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

I had Asthma until I was 12.

I had Asthma until I was 12.

Why did we get treated differently?

Why did we get treated differently?

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

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

So, Inclusive Design.

So, Inclusive Design.

Related Concepts

Related Concepts

Universal Design

Universal Design

Universal Design

Universal Design

An example for bad universal design

An example for bad universal design

Accessibility

Accessibility

Accessibility

Accessibility

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

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

Does the Average Person Exist?

Does the Average Person Exist?

Transcript of the section shown in the workshop:

Thanks Matt!

Thanks Matt!

No User is the Same

No User is the Same

Aspects of Human Diversity

Aspects of Human Diversity

One size – fits one.

One size – fits one.

Beware of your own biases!

Beware of your own biases!

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

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

Aspects of Human Diversity

Aspects of Human Diversity

Aspects of Human Diversity: Language

Aspects of Human Diversity: Language

Language

Language

Aspects of Human Diversity: Culture

Aspects of Human Diversity: Culture

Cultural insensitivity is actively hurtful.

Cultural insensitivity is actively hurtful.

What does this symbol mean: ✓

What does this symbol mean: ✓

Colors in different cultures

Colors in different cultures

Colors in different cultures

Colors in different cultures

Cultural Identity

Cultural Identity

Cultural Identity

Cultural Identity

Aspects of Human Diversity: Gender

Aspects of Human Diversity: Gender

Tatiana Mac

Tatiana Mac

Perpetuated Exclusion*

Perpetuated Exclusion*

Gender Pay Gap

Gender Pay Gap

Aspects of Human Diversity: Race

Aspects of Human Diversity: Race

Protesters at a Black Lives Matter Protest

Protesters at a Black Lives Matter Protest

On the word “Race” in modern Germany

On the word “Race” in modern Germany

How does racism apply to inclusive design?

How does racism apply to inclusive design?

Aspects of Human Diversity: Age

Aspects of Human Diversity: Age

Ageism is discrimination because of your age

Ageism is discrimination because of your age

Common ageist assumptions:

Common ageist assumptions:

Aspects of Human Diversity: Ability & Disability

Aspects of Human Diversity: Ability & Disability

Making sure we can interact with the web

Making sure we can interact with the web

You cannot talk about accessibility without talking about disabilities.

You cannot talk about accessibility without talking about disabilities.

Descriptions of visuals:

The process of building a website

The process of building a website

Talking & Planning

Talking & Planning

Graphic Design (of an image of a website)

Graphic Design (of an image of a website)

HTML/CSS/JavaScript

HTML/CSS/JavaScript

CMS

CMS

Content

Content

Iterations

Iterations

Performance

Performance

Hotfixes & Security

Hotfixes & Security

Data Protection

Data Protection

Quality Control

Quality Control

Accessibility

Accessibility

Accessibility is a sign of good quality.

Accessibility is a sign of good quality.

Accessibility must be a foundational value

Accessibility must be a foundational value

Accessible Web Development is Complicated

Accessible Web Development is Complicated

WebAIM Million Study

WebAIM Million Study

More Complex = Less Accessible

More Complex = Less Accessible

aming complexity often comes with even more complexity

aming complexity often comes with even more complexity

Screen Reader Differences

Screen Reader Differences

Web Developers

Web Developers

Nothing.

Nothing.

A Time Line

A Time Line

The same is true for screen readers:

The same is true for screen readers:

There is no control.

There is no control.

ARIA can help, but not in every situation.

ARIA can help, but not in every situation.

Accessible Rich Internet Applications

Accessible Rich Internet Applications

Accessibility is not only Screen Readers

Accessibility is not only Screen Readers

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

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

High Contrast Mode

High Contrast Mode

Difference of Tool Knowledge

Difference of Tool Knowledge

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

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

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

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

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

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

User = Disability Type ⨉ Proficiency ⨉ Accessibility Support

User = Disability Type ⨉ Proficiency ⨉ Accessibility Support

Test with Diverse Users

Test with Diverse Users

Give Users Agency

Give Users Agency

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

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

Try not to prescribe how to use a component.

Try not to prescribe how to use a component.

Use HTML to describe elements.

Use HTML to describe elements.

Don’t expect any proficiency from users.

Don’t expect any proficiency from users.

Don’t break conventions!

Don’t break conventions!

Users get a lot more tools to use!

Users get a lot more tools to use!

Reader Mode

Reader Mode

Reader Mode

Reader Mode

Reader mode in Firefox.

Reader mode in Firefox.

More Website Settings

More Website Settings

Leveraging Preferences in the Operating System

Leveraging Preferences in the Operating System

prefers-reduced-motion Media Query

prefers-reduced-motion Media Query

Or, better, progressively enhance:

Or, better, progressively enhance:

Prefers Reduced Motion Support Table

Prefers Reduced Motion Support Table

On Windows … it’s complicated

On Windows … it’s complicated

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

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

prefers-color-scheme Media Query

prefers-color-scheme Media Query

We* also get a lot more tools to use!

We* also get a lot more tools to use!

Media Queries Level 5(?)

Media Queries Level 5(?)

How to tackle Inclusive Design?

How to tackle Inclusive Design?

80% of Success is Showing Up

80% of Success is Showing Up

This also applies to inclusive design thinking.

This also applies to inclusive design thinking.

Nothing about us, without us.

Nothing about us, without us.

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

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

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

Question design decision as a habit

Question design decision as a habit

You cannot solve Inclusive Design in code alone.

You cannot solve Inclusive Design in code alone.

Brainstorm the feature. Brainstorm the implementation.

Brainstorm the feature. Brainstorm the implementation.

Conclusion

Conclusion

Thank You!

Thank You!

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

Buzz and feedback

Here’s what was said about this presentation on Twitter.