Universal Design: Improving accessibility outcomes through universal design.

A presentation at EmberFest in September 2022 in Paris, France by Melanie Sumner

Slide 1

Slide 1

Universal Design: Improving accessibility outcomes through universal design.

A talk for EmberFest 2022 by Melanie Sumner

Slide 2

Slide 2

Introduction

Melanie Sumner, Senior Software Engineer at HashiCorp, Design Systems Team On social media as @a11yMel

Slide 3

Slide 3

HashiCorp

I want to thank HashiCorp for supporting Ember by sponsoring my travel to this conference. Now if you were like me, you are thinking “ok the graphics are cool but what does HashiCorp actually do? So, Super quick TL;DR time.

Slide 4

Slide 4

What HashiCorp Does

HashiCorp products fall into four categories: Infrastructure: Automate provisioning, compliance, and management of cloud infrastructure using a common workflow. Packer (machine imaging), Terraform (Infrastructure as code) Security: Adopt a modern security posture across all your infrastructure to protect customer data and critical systems. Vault (identity-based security), Boundary (secure remote access) Networking: Securely connect applications running in any environment. Consul (multi-cloud service networking) Applications: Automate provisioning, compliance, and management of cloud infrastructure using a common workflow. Nomad (workload orchestration), Waypoint (app deployment workflows), Vagrant (environment workflows) Finally, we’re working to bring all of these things together in the HashiCorp Cloud Platform, and that’s a work in progress.

Slide 5

Slide 5

HashiCorp Cloud Platform

And we’re working to unify these products into a single platform under the HashiCorp Cloud Platform. Our initial targets are packer, consul, vault and terraform, but we plan to provide a unified platform for all of our products.

Slide 6

Slide 6

HashiCorp is Open Source

And of course, you can see that a lot of HashiCorp products have roots in open source by visiting their GitHub org page.

Slide 7

Slide 7

a11y

You’ll hear references to A11y today and just in case this is your first time, the word is “accessibility” is often shortened to a-eleven-y because there are 11 letters between the A and Y in the word Accessibility. @a11yMel

Slide 8

Slide 8

Today's Agenda

There are four sections in this talk.

Slide 9

Slide 9

What is Universal Design?

First, we’ll talk through a brief(ish) history of Universal Design.

Slide 10

Slide 10

Principles of Universal Design

Next, we’ll look at the principles of Universal Design and how they relate to accessibility

Slide 11

Slide 11

Universal Design...in Tech!

Then I’ll look at some possibilities for Universal Design in Tech, and what that might look like.

Slide 12

Slide 12

Action Steps

And finally, I’ll give you seven ideas for things you can do now, because actionable lists are always useful!

Slide 13

Slide 13

History of Universal Design

Slide 14

Slide 14

Architecture

Slide 15

Slide 15

The Curb Cut Out

Slide 16

Slide 16

Architects Got It Correct

“The architect does not start with the presumption that people with disabilities are abnormal, are peculiar and different, and that, in order to make buildings accessible to them, they should be packaged together and then, with a set of special-for-the-disabled accessibility standards, have their requirements presented in top-down mode as add-ons to unspecified normal provision.” – Selwyn Goldsmith, 1963

Slide 17

Slide 17

First usage of "universal design"

“Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” – Ronald Mace, 1973 @a11yMel

Slide 18

Slide 18

Education

Slide 19

Slide 19

Education: Classroom Design

Slide 20

Slide 20

Timeline of Classroom Design

Slide 21

Slide 21

Observing the patterns in classroom design

Slide 22

Slide 22

Classroom design can influence students

2012 STUDY Classroom design features can enhance or set back a student’s academic progress by up to 25 percent during the course of a year.

Slide 23

Slide 23

Universal Design for Learning

Along these transitions for the layout of the classroom, Universal Design was adapted for the learning curriculum itself.

Slide 24

Slide 24

Education: UDL

In the 80’s, educators started to realize that they could use some of the concepts that had been developed by architects over the last 20 years, and provide improved experiences for all different kinds of learners in the classroom. Universal Design in Learning focuses on the areas of action, engagement, and representation- that is, ensuring each different learner persona is provided for.

Sound familiar?

Slide 25

Slide 25

UDL in Education: Process

1.Identify Desired Results 2.Determine Acceptable Evidence 3.Plan Experience

Slide 26

Slide 26

Legislature

While countries across the globe are still making progress on defining digital accessibility rights, there are a surprising number of countries that already have

Slide 27

Slide 27

100+ countries have laws directly related to recognizing the rights and responsibilities of people with disabilities.

Many of these countries also have implemented or are implementing regulations related to building design.

Fewer countries have legislation related to digital accessibility but the number continues to rise.

Slide 28

Slide 28

Timeline

1963 Architect introduces the “cut curb” design.

1973 Architect introduces legislation to mandate accessibility access.

1984 Educators develop universal design for learning.

1990’s Legislature addresses disability rights with ADA, UN Standards, and more.

Slide 29

Slide 29

Making Progress

We’ve seen some concrete examples of Universal Design in action, but other industries are still making progress. Let’s look at industries that are creating adaptive design (but not necessarily universal design).

Slide 30

Slide 30

Fashion

Unit more recently, there were only a few companies making adaptive clothing, many were more concerned with functionality, and they failed to consider the overall aesthetics. It was widely, and incorrectly, accepted that you could have functional clothing or you could have beautiful, stylish clothing, but not both.

You’ll often find that velcro closures, magnetic buttons, side openings, step-in options, easy access points and sensory-friendly materials are used in these garments.

This is an image of traditional japanese garment that has been adapted for users in wheelchairs by making the sleeves removable. In this way, the wearer can participate in ceremonies while not getting their sleeves caught in the wheels on the way.

I bet it would also work out pretty great if you were a person who frequently got really hot and just wanted to wear something stylish and sleeveless.

Slide 31

Slide 31

Principles of Adaptable Fashion

The principles of adaptable fashion, as developed by fashion consultant Stephanie Thomas in 2004.

Slide 32

Slide 32

Clothing

Her company, cur-eight-able, helps design adaptable clothes for users with disabilities.

Slide 33

Slide 33

"Unhidden" Clothing

These clothes look pretty bog standard, but small details like pop buttons or zippers at the ankles make them easier for some folks to use.

Slide 34

Slide 34

Face Masks

Rebirth Garments is a shop that sells face masks that are useful for when you need to be able to lip read, or wish to have different ways to fasten your face mask.

Slide 35

Slide 35

Home Goods

Slide 36

Slide 36

Home Goods that are adaptable but you might not think it to look at them

Oxo pop top canisters Tilting bathroom mirror for users of all heights (https://www.potterybarn.com/shop/new/furniture+accessible-home/primarycategoryname-m-department-ff0010181f-1) Adjustable height desks Flexible chairs (Target) - what if we accommodated children who can’t sit still instead of punishing them? Weighted blankets (https://www.goodhousekeeping.com/home-products/blanket-reviews/a24734005/best-weighted-blankets/) Alexa and similar devices (stories: https://www.amazon.com/b/ref=ods_afe_hop_msty?node=21161213011)

Slide 37

Slide 37

Principles of Universal Design

Slide 38

Slide 38

1. Equitable Use

The design is useful and marketable to people with diverse abilities. For example, a counter space or desk surface may be raised or lowered to accommodate users of varying height, or an individual who uses a wheelchair.

Slide 39

Slide 39

2. Flexibility in Use

The design accommodates a wide range of individual preferences and abilities. For example, a captioned video will allow people to choose to listen or to read in order to understand content. This not only provides access to individuals with hearing impairments but also accommodates those who would rather not use sound or who comprehend better through reading.

Slide 40

Slide 40

Simple and Intuitive Use

Slide 41

Slide 41

Perceptible Information

Slide 42

Slide 42

Tolerance for Error

Slide 43

Slide 43

Low Physical Effort

Slide 44

Slide 44

Appropriate Size for Use

Slide 45

Slide 45

What are these principles about?

Slide 46

Slide 46

Respect.

Slide 47

Slide 47

Dignity.

Slide 48

Slide 48

Choice.

Slide 49

Slide 49

“Overcome the social conditioning to do things one way, when a different way includes others.” – Hirabayashi Kei

Slide 50

Slide 50

Universal Design in Tech

Slide 51

Slide 51

Heuristics for interaction design

They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines.

Slide 52

Slide 52

Equitable Use: Example

So we have the Universal Design principle of equitable use And we have the Design Heuristic of Match between the system and the real world And there are WCAG Success Criteria that relate to these concepts as well!

Slide 53

Slide 53

Flexibility in Use: Example

Slide 54

Slide 54

Simple and Intuitive Use: Example

Slide 55

Slide 55

Perceptible Information

Slide 56

Slide 56

Tolerance for Error

Slide 57

Slide 57

Low Physical Effort

Slide 58

Slide 58

Appropriate Size for Use

03 Universal Design in Tech @a11yMel

Slide 59

Slide 59

Three Things We Have

UD Principles Heuristics Success Criteria

Slide 60

Slide 60

A New Timeline?

1963 Architect introduces the “cut curb” design. 1973 Architect introduces legislation to mandate accessibility access. 1984 Educators develop universal design for learning. 1990’s Legislature addresses disability rights with ADA, UN Standards, and more. Today Technologists innovate for the modern web.

Slide 61

Slide 61

Action Steps!

Seven things you can do now

Slide 62

Slide 62

Action Step #1

Information that provides help to users must be consistently placed.

Slide 63

Slide 63

Action Step #2

A keyboard focus indicator should be clearly visible and discernible.

Slide 64

Slide 64

Some Examples of Accessible Focus Indicators

Slide 65

Slide 65

Action Step #3

Provide multiple ways for a user to authenticate.

Slide 66

Slide 66

Examples of multiple authentication methods

➢ Do not prohibit copy/paste or password managers ➢ “Identify all the images of cats” ➢ Login links instead of username/password entry ➢ Options! Let the user pick what method best suits them from a few different (secure!) options.

Slide 67

Slide 67

Action Step #4

Improve target sizes.

Slide 68

Slide 68

Examples of improving target sizes

love 44x44. but smaller sizes can pass too if they have spacing.

Slide 69

Slide 69

Action Step #5

Review redundant entry requirements.

Slide 70

Slide 70

Examples of avoiding redundant requirements

➢ Allow the user to change the ID, but defaults to the previously entered one. ➢ Allow the user to confirm that the billing address and delivery address are the same address. ➢ Pre-fill the search input with the previously entered search term in the same process.

Slide 71

Slide 71

Action Step #6

Be proactive about a11y at work.

Slide 72

Slide 72

Example of how to be proactive

Share https://pleasefunda11y.com

Slide 73

Slide 73

Action Step #7

Use the automation we already have.

Slide 74

Slide 74

How to identify a11y automation

Visit https://a11y-automation.dev to see the different automation tools available

Slide 75

Slide 75

Good for business. Great for users.

I think universal design is good for business because not only does it increases our potential customer reach, it can increase our active use for existing customers. So it’s good for business.

but it’s great for users. And that’s what we’re after. That’s why we’re here. To do what it takes to build experiences that include everyone.

Slide 76

Slide 76

A final reminder

And of course you’ve heard me say this one before, but I’ll say it again. You do not require permission to create accessible code. It is a facet of your craft. It is a marker of your knowledge and expertise.

Slide 77

Slide 77

Thank you!

Reach out with any questions!