Universal Design: Improving accessibility outcomes through universal design.

A talk for EmberFest 2022 by Melanie Sumner

Introduction

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

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.

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.

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.

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.

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

Today's Agenda

There are four sections in this talk.

What is Universal Design?

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

Principles of Universal Design

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

Universal Design...in Tech!

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

Action Steps

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

History of Universal Design

Architecture

The Curb Cut Out

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

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

Education

Education: Classroom Design

Timeline of Classroom Design

Observing the patterns in classroom design

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.

Universal Design for Learning

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

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?

UDL in Education: Process

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

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

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.

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.

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

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.

Principles of Adaptable Fashion

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

Clothing

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

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

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.

Home Goods

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)

Principles of Universal Design

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.

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.

Simple and Intuitive Use

Perceptible Information

Tolerance for Error

Low Physical Effort

Appropriate Size for Use

What are these principles about?

Respect.

Dignity.

Choice.

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

Universal Design in Tech

Heuristics for interaction design

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

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!

Flexibility in Use: Example

Simple and Intuitive Use: Example

Perceptible Information

Tolerance for Error

Low Physical Effort

Appropriate Size for Use

03 Universal Design in Tech @a11yMel

Three Things We Have

UD Principles Heuristics Success Criteria

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.

Action Steps!

Seven things you can do now

Action Step #1

Information that provides help to users must be consistently placed.

Action Step #2

A keyboard focus indicator should be clearly visible and discernible.

Some Examples of Accessible Focus Indicators

Action Step #3

Provide multiple ways for a user to authenticate.

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.

Action Step #4

Improve target sizes.

Examples of improving target sizes

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

Action Step #5

Review redundant entry requirements.

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.

Action Step #6

Be proactive about a11y at work.

Example of how to be proactive

Share https://pleasefunda11y.com

Action Step #7

Use the automation we already have.

How to identify a11y automation

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

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.

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.

Thank you!

Reach out with any questions!