---
layout: presentation
title: Accessibility --Week 4, Monday--
description: Accessibility
class: middle, center, inverse
---
background-image: url(img/inclusive-design/people.png)
# Accessibility
CSE 340, {{site.quarter}}
.left-column40[
Thanks to [Tracy Tran](https://www.microsoft.com/en-us/research/people/tracyt/) for much of the text and imagery in this slide deck!]
---
name: normal
layout: true
class:
---
[//]: # (Outline Slide)
# Today's goals
- Understand why: disability and accessibility
- Understand how: 3 principles of Inclusive Design
- Understand who: people who use assistive technology
- Apply it: designing accessible mobile interfaces
---

---
.left-column[
## Disability
a context dependent .red[mismatched interaction]
]
.left-column40[
## 1980

.font-medium[**Disability as a personal attribute**
"restriction or lack of ability ... within the range considered normal for a human being" (medical model)
]
]
.left-column40[
## Today

.font-medium[**Disability as context-dependent**
"the interaction between features of a person's body and features of the society in which they live" (social model)
]
]
---
# Disability is a spectrum
.left-column50[
Accessible design is good design]
.right-column40[
| | Permanent | Temporary | Situational
| --- | --- | --- | --- |
| Touch |  |  |  |
| See |  |  |  |
| Hear |  |  |  |
| Speak |  |  |  |
]
---
# Worldwide Stats
1Billion (~15%) of population
- 110M-190M have significant difficulties in functioning
- Rates of disability are increasing
- Aging population
- Situational Impairment
- Accessible technology benefits ~25% of users
- ATs are not available for many people
.footnote[“The Market for Accessible Technology. “ Forrester Research, 2003.]
---
# Accessibility
.row[
.column[**Disability** is a mismatched interaction between someone and their context]
.column[**Accessibility** is a broad term for tools that help people navigate mismatched interactions and provides options for people of all ability]
.column[**Inclusive design** is a framework that helps us design more accessible products]
]
.row[

]
---
.left-column60[
## Accessibility is not a given
Originated in the disability rights movement
History of protest
Collaboration with Black Panther movement
]
.right-column40[]
---
# Legal Basis for Accessibility
Rehab Act (1976)
- Equal access to government services
Americans with Disabilities Act (1990)
- Equal access to all goods/services
UN Convention on Rights of PWD (2006)
- 147 countries ratified convention
---
# Human Rights Basis for Accessibility
.right-column50[
.row[
 .centerv[Education]]
.row[
 .centerv[Employment]]
.row[
 .centerv[Pandemic everything!]]
]
.left-column50[
.row[
 .centerv[Shop From Home]]
.row[
 .centerv[Blind People Read
7x as Many Books]]
]
---
# Example: Banking
.left-column40[

]
.right-column60[
![:youtube Banking failure, b-R5r_aKmKo]
]
---
# Example: Banking
.left-column40[

]
.right-column60[
![:youtube Banking failure, b-R5r_aKmKo]
]
---
# Practical Basis for Accessibility
.column[
.centerh[

]
In 1808, Pellegrino Turri built the first typewriter, so that his blind lover, could write letters more legibly.
]
.column[
.centerh[

]
In 1972, Vint Cerf programmed the first email protocols because electronic messaging was the only seamless way to communicate with his deaf wife while he was at work.
]
.column[
.centerh[

]
In 1937, Joseph Friedman created the first bendy straw to help his young daughter drink from a cup on a counter that was too high for her.
]
---
background-image: url(img/inclusive-design/people.png)
.column[
# How do we do inclusive design?
]
---
# Failure to Include Excludes
.row[
.left-column50[] .left-column50[Motion tracking technology that only works for users of a certain race because initial training set excluded other skin tones
] ]
.row[
.left-column50[]
.left-column50[The standard crash test dummy is a 50th percentile male. Female drivers are 47% more likely to be injured in a car crash.
]]
.row[
.left-column50[]
.left-column50[Being left handed in a right handed world: scissors, lecture hall fold out desks….]
]
---
# Intuition alone fails
.left-column[
]
.right-column[
The user is not like you
Build empathy. Learning how people adapt to the world around them means spending time understanding their experience from their perspective.
]
---
![:youtube Video assigned before class, 94swlF55tVc?t=45]
---
.left-column50[
## Solve for one, then extend
Designing for the most extreme case results in designs that benefit many people
]
.right-column50[
]
---
# Principles of inclusive design
.column[
.centerh[

Recognize exclusion
]
]
.column[
.centerh[

Learn from diversity
]]
.column[
.centerh[

Solve for one,
extend to many
]
]
---
background-image: url(img/inclusive-design/people.png)
.column[
# How do we implement inclusive design?
]
---
# Inclusive Design Context
.left-column50[
.row[##  .centerv[User side]]
- User may use *assistive technology*
- User may *customize* their machine
- But you can't know this at design time
]
.right-column50[
]
---
.left-column40[
# Assistive technology
How people with disabilities *may*
navigate computing
(and the world)
Not a *medical* device
]
.right-column60[
.left-column[
]
.right-column90[
.font-medium[Screen Readers]
.font-mediumsmall[Narrator, VoiceOver, JAWS, Window Eyes, NVDA, TalkBack]
.font-medium[Screen adjustment]
.font-mediumsmall[ZoomText, Magnifier, Zoom, High Contrast
]
.font-medium[Speech input]
.font-mediumsmall[Dragon Naturally Speaking, Dictation, Speech Recognition]
.font-medium[Keyboarding]
.font-mediumsmall[Sticky Keys, Mouse Keys, Filter Keys, Keyboard Shortcuts]
.font-medium[Many more]
.font-mediumsmall[Joysticks, scrollbars, the Xbox Adaptive Controller]
]
]
---
.left-column[

## Screen
reader Demo
]
.right-column[
Three core interaction patterns:
- Swipe to navigate linearly
- Touch to navigate spatially
- The first “hit” of an interface element will focus, double tap to select/activate that interface element
]
---
.left-column[

## You try it
]
.right-column[
1. Get out your phone (or run an emulator, but a phone is better)
2. Open up a Google home page with search bar.
3. Turn on respective screen reader
- iOS: Settings > General > Accessibility > VoiceOver > On
- Android: Settings > Accessibility > TalkBack > On
With your eyes closed* and without using voice search (e.g. Siri), find the answer to this question:
What is a group of parrots called?
.font-small[*Building empathy for visual impairments requires much more than closing your eyes. See principle 2 of inclusive design. ]
]
???
I want to stress that this is only the beginning of building empathy. To really practice inclusive design, you must also interact with, observe, and learn from those you are designing for.
Example: inclusive design sprint where we brought in SMEs
---
# Important Principles
???
If interfaces are not created using inclusive design, screen readers will not read the correct thing. The challenge with interacting with mobile interfaces using a screen reader can be summed up as: interfaces are inherently 2D spatial. Screen readers present information in a temporary linear audio stream that the user must remember.
We’re going to go over a few key things to keep in mind when designing and programming mobile interfaces. These are just the tip of the iceberg.
---
# Inclusive Design Context
.left-column50[
.row[##  .centerv[User side]]
- User may use *assistive technology*
- User may *customize* their machine
- But you can't know this at design time
]
.right-column50[
.row[##  .centerv[App side]]
- Use *best practices* in inclusive design
- Play nice with *accessibility APIs*
- *Test* with diverse users
]
---
# Building for screen readers