Skip to content
Snippets Groups Projects
Commit cb971f87 authored by Jennifer Mankoff's avatar Jennifer Mankoff
Browse files

Updated slides for 4/20

parent 5614e2dd
No related branches found
No related tags found
6 merge requests!12Accessibility website jen summer work,!9Q access 24 sp,!8Q access 24 sp,!5Latest update from Spring 2023,!4Latest update after pmp class,!3Updated content for week 3 and week 4 (week 4 still needs work)
Hide whitespace changes
Inline Side-by-side
Showing
with 308 additions and 0 deletions
slides/wk01/inclusive-design.html → slides/alt-text/media.html
+ 308
− 0
View file @ cb971f87
--- ---
layout: presentation layout: presentation
title: Accessibility --Week 4, Monday-- title: Accessible Media
description: Accessibility description: Alt Text and Video Description
class: middle, center, inverse class: middle, center, inverse
--- ---
background-image: url(img/inclusive-design/people.png) background-image: url(img/inclusive-design/people.png)
# Accessibility # Accessible Media: <BR>
# ALT Text and
# Video Description
CSE 340, {{site.quarter}} {{site.classnum}}, {{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 name: normal
layout: true layout: true
...@@ -20,300 +20,45 @@ class: ...@@ -20,300 +20,45 @@ class:
--- ---
[//]: # (Outline Slide) [//]: # (Outline Slide)
# Today's goals # Today's goals
- Understand why: disability and accessibility - Go over ALT text rules
- Understand how: 3 principles of Inclusive Design - Describe a video (in-class exercise)
- Understand who: people who use assistive technology - Discuss captioning
- Apply it: designing accessible mobile interfaces
---
![:img What is disability? Text is surrounded by diverse people,100%, width](img/inclusive-design/what-is-disability.png)
---
.left-column[
## Disability
a context dependent .red[mismatched interaction]
]
.left-column40[
## &nbsp; &nbsp; &nbsp; 1980
![:img picture of a person,60%, width](img/inclusive-design/1980.png)
.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[
## &nbsp; &nbsp; &nbsp; Today
![:img picture of a network of people,60%, width](img/inclusive-design/today.png)
.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 | ![:img A person with one arm ,40%, width](img/inclusive-design/onearm.png) | ![:img A person with an arm injury ,40%, width](img/inclusive-design/arminjury.png) | ![:img A person holdin a baby ,40%, width](img/inclusive-design/newparent.png) |
| See | ![:img A Blind person ,40%, width](img/inclusive-design/blind.png) | ![:img A elderly person with cataracts ,40%, width](img/inclusive-design/cataract.png) | ![:img A dsitracted driver ,40%, width](img/inclusive-design/driver.png) |
| Hear | ![:img A Deaf person ,40%, width](img/inclusive-design/deaf.png) | ![:img A person with an ear infection ,40%, width](img/inclusive-design/ear.png) | ![:img A bartender in a noise environment ,40%, width](img/inclusive-design/bartender.png) |
| Speak | ![:img A non-verbal person ,40%, width](img/inclusive-design/nonverbal.png) | ![:img A person with laryngitis ,40%, width](img/inclusive-design/laryngitis.png) | ![:img A person with a heavy accent ,40%, width](img/inclusive-design/accent.png) |
]
---
# 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[
![:img line of animated iconic representations of people,100%, width](img/inclusive-design/longpeople.png)
]
---
.left-column60[
## Accessibility is not a given
Originated in the disability rights movement
History of protest
Collaboration with Black Panther movement
]
.right-column40[![:img A picture of protestors ,100%, width](img/inclusive-design/rights-narrow.png)]
---
# 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[
![:img online education by shashank singh from the Noun Project,20%, width](img/inclusive-design/education.png) &nbsp;&nbsp;&nbsp; .centerv[Education]]
.row[
![:img employment by Tee Yang from the Noun Project,20%, width](img/inclusive-design/employment.png) &nbsp;&nbsp;&nbsp; .centerv[Employment]]
.row[
![:img zoom icon,20%, width](img/inclusive-design/ZoomIcon.jpg) &nbsp;&nbsp;&nbsp; .centerv[Pandemic everything!]]
]
.left-column50[
.row[
![:img shopping cart by LINDA WATI from the Noun Project
,20%, width](img/inclusive-design/shop.png) &nbsp;&nbsp;&nbsp; .centerv[Shop From Home]]
.row[
![:img audiobook by mikicon from the Noun Project,20%, width](img/inclusive-design/audiobook.png) &nbsp;&nbsp;&nbsp; .centerv[Blind People Read <BR>7x as Many Books]]
]
---
# Example: Banking
.left-column40[
![:img Picture of Wells Fargo mobile app. The audio of this page is the video at right,100%, width](img/inclusive-design/banking0.png)
]
.right-column60[
<BR>
![:youtube Banking failure, b-R5r_aKmKo]
]
---
# Example: Banking
.left-column40[
![:img Same picture highlighting the hamburger menu (which has the alt text "hamburger menu") and an image (which has no alt tex and just plays an unintelligible name). The audio of this page is the video at right,100%, width](img/inclusive-design/banking.png)
]
.right-column60[
<BR>
![:youtube Banking failure, b-R5r_aKmKo]
]
---
# Practical Basis for Accessibility
.column[
.centerh[
![:img A typewriter,40%, width](img/inclusive-design/typewriter.png)
]
In 1808, Pellegrino Turri built the first typewriter, so that his blind lover, could write letters more legibly. ​
]
.column[
.centerh[
![:img email,40%, width](img/inclusive-design/email.png)
]
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[
![:img A straw,40%, width](img/inclusive-design/straw.png)
]
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[![:img A picture of faces from many races ,90%, width](img/inclusive-design/manyraces.png)] .left-column50[Motion tracking technology that only works for users of a certain race because initial training set excluded other skin tones<BR>] ]
.row[
.left-column50[![:img A picture of crash test dummies ,90%, width](img/inclusive-design/crashtest.png)]
.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.<BR> ]]
.row[
.left-column50[![:img A picture of scissors ,90%, width](img/inclusive-design/scissors.png)]
.left-column50[Being left handed in a right handed world: scissors, lecture hall fold out desks….]
]
--- ---
# Intuition alone fails # ALT text for an image
.left-column[ .left-column[
![:img focus group by Anatolii Babii from the Noun Project ,100%, width](img/inclusive-design/focusgroup.png)] ![:img Lezlie looks at us full front with curls down one size of her head and her long sleeve rolled up just on that side of a cowl neck wild abstract print shirt. Her smiling cheeks greet us., 100%, width](img/media/award.jpeg)
.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.
] ]
.right-column[
--- "Lezlie looks at us full front with curls down one size of her head and her long sleeve rolled up just on that side of a cowl neck wild abstract print shirt. Her smiling cheeks greet us."
![: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[
![:img one arm relates to arm injury and parent holding child; hard of hearing relates to noisy environment and teaching reading ,100%, width](img/inclusive-design/one2many.png)]
--- ---
# Principles of inclusive design .left-column[
![:img Lezlie looks at us full front with curls down one size of her head and her long sleeve rolled up just on that side of a cowl neck wild abstract print shirt. Her smiling cheeks greet us., 100%, width](img/media/award.jpeg)
<BR>
.column[
.centerh[
![:img A venn diagram,50%, width](img/inclusive-design/exclusion.png)
Recognize exclusion
]
] ]
.right-column[
The Society for Disability Studies is pleased to announce that Dr. Lezlie Frye has won the Irving K. Zola Award for Emerging Scholars in Disability Studies for her paper:
.column[ Cripping the “Crack Baby” Epidemic: A Feminist Genealogy.
.centerh[
![:img A globe,50%, width](img/inclusive-design/diversity.png)
Learn from diversity
]]
.column[
.centerh[
![:img A crowed,50%, width](img/inclusive-design/many.png)
Solve for one, <BR>extend to many Dr. Frye is an Assistant Professor of Gender Studies and Disability Studies at the University of Utah in the Division of Gender Studies.
]
] ]
--- ---
background-image: url(img/inclusive-design/people.png) # Mode shift: ALT text in dynamic systems
.column[ - Compare and contrast
# How do we implement inclusive design? - Accessible ALT text (for "pictures")
] - Accessible, dynamic systems (apps/web pages) and their images
- Accessible video
---
# Inclusive Design Context
.left-column50[
.row[## ![:img A picture of people with temporary and permanent disabilities,20%, width](img/inclusive-design/people2.png) .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[ # Typical (on-phone) screen reader interaction
# Assistive technology
How people with disabilities *may* <BR> navigate computing <BR> (and the world)
Not a *medical* device
]
.right-column60[
.left-column[
![:img A picture of a speaker; magnifier; microphone; computer; and game control ,85%, width](img/inclusive-design/at.png)]
.right-column90[
.font-medium[Screen Readers] <BR>
.font-mediumsmall[Narrator, VoiceOver, JAWS, Window Eyes, NVDA, TalkBack]
.font-medium[Screen adjustment]<BR>
.font-mediumsmall[ZoomText, Magnifier, Zoom, High Contrast<BR>]
.font-medium[Speech input]<BR>
.font-mediumsmall[Dragon Naturally Speaking, Dictation, Speech Recognition]
.font-medium[Keyboarding]<BR>
.font-mediumsmall[Sticky Keys, Mouse Keys, Filter Keys, Keyboard Shortcuts]
.font-medium[Many more]<BR>
.font-mediumsmall[Joysticks, scrollbars, the Xbox Adaptive Controller]
]
]
---
.left-column[ .left-column[
![:img screen reader by Sophia Bai from the Noun Project, 100%, width](img/inclusive-design/screenreader.png) ![:img screen reader by Sophia Bai from the Noun Project, 100%, width](img/media/screenreader.png)
## Screen <BR>reader Demo
] ]
.right-column[ .right-column[
Three core interaction patterns: Three core interaction patterns:
...@@ -323,65 +68,8 @@ Three core interaction patterns: ...@@ -323,65 +68,8 @@ Three core interaction patterns:
- The first “hit” of an interface element will focus, double tap to select/activate that interface element - The first “hit” of an interface element will focus, double tap to select/activate that interface element
] ]
---
.left-column[
![:img screen reader by Sophia Bai from the Noun Project, 100%, width](img/inclusive-design/screenreader.png)
## 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. Discuss similarities and differences from desktop
Example: inclusive design sprint where we brought in SMEs
---
# Important Principles
<iframe src="https://embed.polleverywhere.com/discourses/SJ4quDgOprBUOAnj1Q0u6?controls=none&short_poll=true" width="800px" height="600px"></iframe>
???
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[## ![:img A picture of people with temporary and permanent disabilities,20%, width](img/inclusive-design/people2.png) .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[## ![:img A picture of a phone ,20%, width](img/inclusive-design/app.png) .centerv[App side]]
<BR>
- Use *best practices* in inclusive design
- Play nice with *accessibility APIs*
- *Test* with diverse users
]
--- ---
# Building for screen readers # Building for screen readers
...@@ -389,7 +77,7 @@ We’re going to go over a few key things to keep in mind when designing and pro ...@@ -389,7 +77,7 @@ We’re going to go over a few key things to keep in mind when designing and pro
<DIV class="mermaid"> <DIV class="mermaid">
graph LR graph LR
SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Asks for next object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Asks for next object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge
API -->|Passes along request| ATK[fa:fa-android<BR> Android Toolkit<BR>]:::bluelarge API -->|Passes along request| ATK[<BR> Toolkit<BR>]:::bluelarge
ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
App -->|Name: Foo| ATK App -->|Name: Foo| ATK
ATK -->|Name, Role: Button| API ATK -->|Name, Role: Button| API
...@@ -402,7 +90,7 @@ Speak(fa:fa-volume-up Button, Foo ):::bluelarge ...@@ -402,7 +90,7 @@ Speak(fa:fa-volume-up Button, Foo ):::bluelarge
<DIV class="mermaid"> <DIV class="mermaid">
graph LR graph LR
SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Asks for next object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Asks for next object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge
API -->|Passes along request| ATK[fa:fa-android<BR> Android Toolkit<BR>]:::bluelarge API -->|Passes along request| ATK[<BR> Toolkit<BR>/Browser]:::bluelarge
ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
App -->|Name: Bar| ATK App -->|Name: Bar| ATK
ATK -->|Name, Role: Button| API ATK -->|Name, Role: Button| API
...@@ -417,7 +105,7 @@ Speak(fa:fa-volume-up Button, Bar ):::bluelarge ...@@ -417,7 +105,7 @@ Speak(fa:fa-volume-up Button, Bar ):::bluelarge
<DIV class="mermaid"> <DIV class="mermaid">
graph LR graph LR
SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Invokes object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Invokes object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge
API -->|Passes along request| ATK[fa:fa-android<BR> Android Toolkit<BR>]:::bluelarge API -->|Passes along request| ATK[<BR> Toolkit/<BR>Browser]:::bluelarge
ATK -->|Invokse Callback| App[fa:fa-mobile <BR>App<BR>]:::bluelarge ATK -->|Invokse Callback| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
App -->|Updates Interface<BR>Announces Changes| ATK App -->|Updates Interface<BR>Announces Changes| ATK
ATK -->|Passes along information| API ATK -->|Passes along information| API
...@@ -429,15 +117,15 @@ Speak(fa:fa-volume-up Deleted Text ):::bluelarge ...@@ -429,15 +117,15 @@ Speak(fa:fa-volume-up Deleted Text ):::bluelarge
--- ---
# Building for Accessibility # Building for Accessibility
*Role of Developers is important here* *Role of Designers/Developers is important here*
- Only they can provide proper alt text - Only they can provide proper ALT text
- Their choices impact navigation order - Their choices impact navigation order
- They need to announce things that change - They need to announce things that change
- Size and color matter too - Size and color matter too
--- ---
.left-column40[ .left-column40[
![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ![:img A picture of facebook ,80%, width](img/media/facebook1.png)
] ]
.right-column60[ .right-column60[
...@@ -450,7 +138,7 @@ Enable the user to understand the name of the control they have navigated to, wh ...@@ -450,7 +138,7 @@ Enable the user to understand the name of the control they have navigated to, wh
--- ---
.left-column40[ .left-column40[
![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ![:img A picture of facebook ,80%, width](img/media/facebook1.png)
] ]
.right-column60[ .right-column60[
...@@ -477,19 +165,21 @@ API knows: State ("Not selected") ...@@ -477,19 +165,21 @@ API knows: State ("Not selected")
--- ---
# Example: Swipe Order # Example: Swipe Order
.left-column40[ .left-column40[
![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ![:img A picture of facebook ,80%, width](img/media/facebook1.png)
] ]
.righ-column60[ .righ-column60[
What focus order makes sense for the Facebook newsfeed? What focus order makes sense for the Facebook newsfeed?
Does this match the actual focus order? Does this match the actual focus order?
When might you need to *skip* things?
] ]
--- ---
## What order do you think will be used ## What order do you think will be used
.left-column40[ .left-column40[
![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ![:img A picture of facebook ,80%, width](img/media/facebook1.png)
] ]
.right-column60[ .right-column60[
Use chunks to group meaningful info and reduce number of navigation steps. Use chunks to group meaningful info and reduce number of navigation steps.
...@@ -500,10 +190,10 @@ ink over! ...@@ -500,10 +190,10 @@ ink over!
--- ---
## What order do you think will be used ## What order do you think will be used
.left-column40[ .left-column40[
![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ![:img A picture of facebook ,80%, width](img/media/facebook1.png)
] ]
.right-column40[ .right-column40[
![:img A picture of facebook ,120%, width](img/inclusive-design/facebook-actual.png) ![:img A picture of facebook ,120%, width](img/media/facebook-actual.png)
] ]
...@@ -519,7 +209,7 @@ ink over! ...@@ -519,7 +209,7 @@ ink over!
--- ---
# Any UI change should be announced # Any UI change should be announced
.column[ .column[
![:img A picture of a failed sign in to the University of Washington ,90%, width](img/inclusive-design/signin-fail.png) ] ![:img A picture of a failed sign in to the University of Washington ,90%, width](img/media/signin-fail.png) ]
.column[ .column[
Entering the wrong login credentials triggered an error message. If you couldn’t see the UI and the error wasn’t announced, you would have no idea if login succeeded or not. Entering the wrong login credentials triggered an error message. If you couldn’t see the UI and the error wasn’t announced, you would have no idea if login succeeded or not.
...@@ -552,7 +242,7 @@ Errors ...@@ -552,7 +242,7 @@ Errors
Especially hard on mobile devices Especially hard on mobile devices
.left-column40[ .left-column40[
![:img An arrow vs arrow and label make very different target sizes ,90%, width](img/inclusive-design/targets.png) ![:img An arrow vs arrow and label make very different target sizes ,90%, width](img/media/targets.png)
] ]
.right-column60[ .right-column60[
...@@ -605,30 +295,14 @@ WCAG Level AAA requires a contrast ratio of at least ...@@ -605,30 +295,14 @@ WCAG Level AAA requires a contrast ratio of at least
| <i class="darklight fa fa-angle-double-right fa-2x"></i> | Overlapping clickable items | | <i class="darklight fa fa-angle-double-right fa-2x"></i> | Overlapping clickable items |
|<i class="darklight fa fa-link fa-2x"></i> | URL in link may be invalid | |<i class="darklight fa fa-link fa-2x"></i> | URL in link may be invalid |
--- ---
# Accessibility is a design problem. # Mode shift: Video Description
.left-column50[
## Theory
**Disability** is a mismatched interaction between someone and their context
**Accessibility** describes tools that help people navigate mismatched interactions
**Inclusive design** is a framework that helps us design more accessible products
]
.right-column50[
## Practice
Who might be **excluded** from using my design?
How will my design work with assistive technologies?
]
???
I ask that as you continue your career, you think of accessibility as a design problem, no differently than you would think of a design problem that is handed to you in a spec sheet for your homework. It is good for the business, but more importantly good for people.
- Compare and contrast
- Accessible ALT text (for "pictures")
- Accessible, dynamic systems (apps/web pages) and their images
- Accessible video
---
# In Class Exercise
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment