diff --git a/schedule.md b/schedule.md
index ffaceac341fede40d0c1b53c3c304702d6b86320..23d31c493703f5ce6d72cddb0290d4f80e2e7968 100644
--- a/schedule.md
+++ b/schedule.md
@@ -66,7 +66,6 @@ You will need to submit the [learning goals homework](assignments/hw0-learninggo
We will learn about best practices to make certain types of media accessible.
- Intro to alt-text and audio description.
- Describe a video (in class) and an image (in class)
- - Intro to captions.
**Readings**
- [Rescribe: Authoring and Automatically Editing Audio Descriptions](https://amypavel.com/papers/rescribe.pdf) ([talk](https://www.youtube.com/watch?v=jmyPmT5T0PY))
diff --git a/slides/wk01/img/inclusive-design/1980.png b/slides/alt-text/img/media/1980.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/1980.png
rename to slides/alt-text/img/media/1980.png
diff --git a/slides/wk01/img/inclusive-design/20sesgemail.png b/slides/alt-text/img/media/20sesgemail.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/20sesgemail.png
rename to slides/alt-text/img/media/20sesgemail.png
diff --git a/slides/wk01/img/inclusive-design/JAWS_logo.png b/slides/alt-text/img/media/JAWS_logo.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/JAWS_logo.png
rename to slides/alt-text/img/media/JAWS_logo.png
diff --git a/slides/wk01/img/inclusive-design/NVDA_logo.png b/slides/alt-text/img/media/NVDA_logo.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/NVDA_logo.png
rename to slides/alt-text/img/media/NVDA_logo.png
diff --git a/slides/wk01/img/inclusive-design/ScreenReaderIllustration.png b/slides/alt-text/img/media/ScreenReaderIllustration.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/ScreenReaderIllustration.png
rename to slides/alt-text/img/media/ScreenReaderIllustration.png
diff --git a/slides/wk01/img/inclusive-design/ZoomIcon.jpg b/slides/alt-text/img/media/ZoomIcon.jpg
similarity index 100%
rename from slides/wk01/img/inclusive-design/ZoomIcon.jpg
rename to slides/alt-text/img/media/ZoomIcon.jpg
diff --git a/slides/wk01/img/inclusive-design/accent.png b/slides/alt-text/img/media/accent.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/accent.png
rename to slides/alt-text/img/media/accent.png
diff --git a/slides/wk01/img/inclusive-design/accessibility-design.png b/slides/alt-text/img/media/accessibility-design.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/accessibility-design.png
rename to slides/alt-text/img/media/accessibility-design.png
diff --git a/slides/wk01/img/inclusive-design/app.png b/slides/alt-text/img/media/app.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/app.png
rename to slides/alt-text/img/media/app.png
diff --git a/slides/wk01/img/inclusive-design/arminjury.png b/slides/alt-text/img/media/arminjury.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/arminjury.png
rename to slides/alt-text/img/media/arminjury.png
diff --git a/slides/wk01/img/inclusive-design/at.png b/slides/alt-text/img/media/at.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/at.png
rename to slides/alt-text/img/media/at.png
diff --git a/slides/wk01/img/inclusive-design/audiobook.png b/slides/alt-text/img/media/audiobook.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/audiobook.png
rename to slides/alt-text/img/media/audiobook.png
diff --git a/slides/alt-text/img/media/award.jpeg b/slides/alt-text/img/media/award.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..bf062fdcaac5a8c746654f2cc98fd9830a87aca9
Binary files /dev/null and b/slides/alt-text/img/media/award.jpeg differ
diff --git a/slides/wk01/img/inclusive-design/banking.png b/slides/alt-text/img/media/banking.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/banking.png
rename to slides/alt-text/img/media/banking.png
diff --git a/slides/wk01/img/inclusive-design/banking0.png b/slides/alt-text/img/media/banking0.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/banking0.png
rename to slides/alt-text/img/media/banking0.png
diff --git a/slides/wk01/img/inclusive-design/bartender.png b/slides/alt-text/img/media/bartender.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/bartender.png
rename to slides/alt-text/img/media/bartender.png
diff --git a/slides/wk01/img/inclusive-design/blind.png b/slides/alt-text/img/media/blind.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/blind.png
rename to slides/alt-text/img/media/blind.png
diff --git a/slides/wk01/img/inclusive-design/cataract.png b/slides/alt-text/img/media/cataract.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/cataract.png
rename to slides/alt-text/img/media/cataract.png
diff --git a/slides/wk01/img/inclusive-design/chart.png b/slides/alt-text/img/media/chart.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/chart.png
rename to slides/alt-text/img/media/chart.png
diff --git a/slides/wk01/img/inclusive-design/crashtest.png b/slides/alt-text/img/media/crashtest.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/crashtest.png
rename to slides/alt-text/img/media/crashtest.png
diff --git a/slides/wk01/img/inclusive-design/deaf.png b/slides/alt-text/img/media/deaf.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/deaf.png
rename to slides/alt-text/img/media/deaf.png
diff --git a/slides/wk01/img/inclusive-design/diverse-people.png b/slides/alt-text/img/media/diverse-people.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/diverse-people.png
rename to slides/alt-text/img/media/diverse-people.png
diff --git a/slides/wk01/img/inclusive-design/diversity.png b/slides/alt-text/img/media/diversity.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/diversity.png
rename to slides/alt-text/img/media/diversity.png
diff --git a/slides/wk01/img/inclusive-design/driver.png b/slides/alt-text/img/media/driver.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/driver.png
rename to slides/alt-text/img/media/driver.png
diff --git a/slides/wk01/img/inclusive-design/ear.png b/slides/alt-text/img/media/ear.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/ear.png
rename to slides/alt-text/img/media/ear.png
diff --git a/slides/wk01/img/inclusive-design/education.png b/slides/alt-text/img/media/education.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/education.png
rename to slides/alt-text/img/media/education.png
diff --git a/slides/wk01/img/inclusive-design/email.png b/slides/alt-text/img/media/email.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/email.png
rename to slides/alt-text/img/media/email.png
diff --git a/slides/wk01/img/inclusive-design/employment.png b/slides/alt-text/img/media/employment.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/employment.png
rename to slides/alt-text/img/media/employment.png
diff --git a/slides/wk01/img/inclusive-design/exclusion.png b/slides/alt-text/img/media/exclusion.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/exclusion.png
rename to slides/alt-text/img/media/exclusion.png
diff --git a/slides/wk01/img/inclusive-design/facebook-actual.png b/slides/alt-text/img/media/facebook-actual.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/facebook-actual.png
rename to slides/alt-text/img/media/facebook-actual.png
diff --git a/slides/wk01/img/inclusive-design/facebook1.png b/slides/alt-text/img/media/facebook1.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/facebook1.png
rename to slides/alt-text/img/media/facebook1.png
diff --git a/slides/wk01/img/inclusive-design/focusgroup.png b/slides/alt-text/img/media/focusgroup.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/focusgroup.png
rename to slides/alt-text/img/media/focusgroup.png
diff --git a/slides/wk01/img/inclusive-design/gaming.png b/slides/alt-text/img/media/gaming.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/gaming.png
rename to slides/alt-text/img/media/gaming.png
diff --git a/slides/wk01/img/inclusive-design/gmail.png b/slides/alt-text/img/media/gmail.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/gmail.png
rename to slides/alt-text/img/media/gmail.png
diff --git a/slides/wk01/img/inclusive-design/keyboarding.png b/slides/alt-text/img/media/keyboarding.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/keyboarding.png
rename to slides/alt-text/img/media/keyboarding.png
diff --git a/slides/wk01/img/inclusive-design/laryngitis.png b/slides/alt-text/img/media/laryngitis.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/laryngitis.png
rename to slides/alt-text/img/media/laryngitis.png
diff --git a/slides/wk01/img/inclusive-design/longpeople.png b/slides/alt-text/img/media/longpeople.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/longpeople.png
rename to slides/alt-text/img/media/longpeople.png
diff --git a/slides/wk01/img/inclusive-design/magnifier.png b/slides/alt-text/img/media/magnifier.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/magnifier.png
rename to slides/alt-text/img/media/magnifier.png
diff --git a/slides/wk01/img/inclusive-design/many.png b/slides/alt-text/img/media/many.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/many.png
rename to slides/alt-text/img/media/many.png
diff --git a/slides/wk01/img/inclusive-design/manyraces.png b/slides/alt-text/img/media/manyraces.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/manyraces.png
rename to slides/alt-text/img/media/manyraces.png
diff --git a/slides/wk01/img/inclusive-design/microphone.png b/slides/alt-text/img/media/microphone.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/microphone.png
rename to slides/alt-text/img/media/microphone.png
diff --git a/slides/wk01/img/inclusive-design/newparent.png b/slides/alt-text/img/media/newparent.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/newparent.png
rename to slides/alt-text/img/media/newparent.png
diff --git a/slides/wk01/img/inclusive-design/nonverbal.png b/slides/alt-text/img/media/nonverbal.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/nonverbal.png
rename to slides/alt-text/img/media/nonverbal.png
diff --git a/slides/wk01/img/inclusive-design/one2many.png b/slides/alt-text/img/media/one2many.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/one2many.png
rename to slides/alt-text/img/media/one2many.png
diff --git a/slides/wk01/img/inclusive-design/onearm.png b/slides/alt-text/img/media/onearm.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/onearm.png
rename to slides/alt-text/img/media/onearm.png
diff --git a/slides/wk01/img/inclusive-design/people.png b/slides/alt-text/img/media/people.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/people.png
rename to slides/alt-text/img/media/people.png
diff --git a/slides/wk01/img/inclusive-design/people2.png b/slides/alt-text/img/media/people2.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/people2.png
rename to slides/alt-text/img/media/people2.png
diff --git a/slides/wk01/img/inclusive-design/rights-narrow.png b/slides/alt-text/img/media/rights-narrow.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/rights-narrow.png
rename to slides/alt-text/img/media/rights-narrow.png
diff --git a/slides/wk01/img/inclusive-design/scissors.png b/slides/alt-text/img/media/scissors.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/scissors.png
rename to slides/alt-text/img/media/scissors.png
diff --git a/slides/wk01/img/inclusive-design/screenreader.png b/slides/alt-text/img/media/screenreader.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/screenreader.png
rename to slides/alt-text/img/media/screenreader.png
diff --git a/slides/wk01/img/inclusive-design/shop.png b/slides/alt-text/img/media/shop.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/shop.png
rename to slides/alt-text/img/media/shop.png
diff --git a/slides/wk01/img/inclusive-design/signin-fail.png b/slides/alt-text/img/media/signin-fail.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/signin-fail.png
rename to slides/alt-text/img/media/signin-fail.png
diff --git a/slides/wk01/img/inclusive-design/speaker.png b/slides/alt-text/img/media/speaker.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/speaker.png
rename to slides/alt-text/img/media/speaker.png
diff --git a/slides/wk01/img/inclusive-design/straw.png b/slides/alt-text/img/media/straw.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/straw.png
rename to slides/alt-text/img/media/straw.png
diff --git a/slides/wk01/img/inclusive-design/targets.png b/slides/alt-text/img/media/targets.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/targets.png
rename to slides/alt-text/img/media/targets.png
diff --git a/slides/wk01/img/inclusive-design/today.png b/slides/alt-text/img/media/today.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/today.png
rename to slides/alt-text/img/media/today.png
diff --git a/slides/wk01/img/inclusive-design/typewriter.png b/slides/alt-text/img/media/typewriter.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/typewriter.png
rename to slides/alt-text/img/media/typewriter.png
diff --git a/slides/wk01/img/inclusive-design/what-is-disability.png b/slides/alt-text/img/media/what-is-disability.png
similarity index 100%
rename from slides/wk01/img/inclusive-design/what-is-disability.png
rename to slides/alt-text/img/media/what-is-disability.png
diff --git a/slides/alt-text/media.html b/slides/alt-text/media.html
new file mode 100644
index 0000000000000000000000000000000000000000..e9e974c76dc8934a7c619368da2270c056541596
--- /dev/null
+++ b/slides/alt-text/media.html
@@ -0,0 +1,308 @@
+---
+layout: presentation
+title: Accessible Media
+description: Alt Text and Video Description
+class: middle, center, inverse
+---
+background-image: url(img/inclusive-design/people.png)
+
+# Accessible Media: <BR>
+# ALT Text and
+# Video Description
+
+{{site.classnum}}, {{site.quarter}}
+
+---
+name: normal
+layout: true
+class:
+
+---
+[//]: # (Outline Slide)
+# Today's goals
+- Go over ALT text rules
+- Describe a video (in-class exercise)
+- Discuss captioning
+
+---
+# ALT text for an image
+
+.left-column[
+
+]
+.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."
+]
+
+---
+.left-column[
+
+]
+.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:
+
+Cripping the “Crack Baby†Epidemic: A Feminist Genealogy.
+
+Dr. Frye is an Assistant Professor of Gender Studies and Disability Studies at the University of Utah in the Division of Gender Studies.
+]
+---
+# Mode shift: ALT text in dynamic systems
+
+- Compare and contrast
+- Accessible ALT text (for "pictures")
+- Accessible, dynamic systems (apps/web pages) and their images
+- Accessible video
+
+
+---
+# Typical (on-phone) screen reader interaction
+
+.left-column[
+
+]
+.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
+]
+
+???
+Discuss similarities and differences from desktop
+
+---
+# Building for screen readers
+
+<DIV class="mermaid">
+graph LR
+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[<BR> Toolkit<BR>]:::bluelarge
+ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
+App -->|Name: Foo| ATK
+ATK -->|Name, Role: Button| API
+API -->|Name, Role| SR
+Speak(fa:fa-volume-up Button, Foo ):::bluelarge
+
+</div>
+--
+... (repeat for each swipe)
+<DIV class="mermaid">
+graph LR
+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[<BR> Toolkit<BR>/Browser]:::bluelarge
+ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
+App -->|Name: Bar| ATK
+ATK -->|Name, Role: Button| API
+API -->|Name, Role| SR
+Speak(fa:fa-volume-up Button, Bar ):::bluelarge
+
+</div>
+
+---
+# What happens when user double taps to invoke?
+
+<DIV class="mermaid">
+graph LR
+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[<BR> Toolkit/<BR>Browser]:::bluelarge
+ATK -->|Invokse Callback| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
+App -->|Updates Interface<BR>Announces Changes| ATK
+ATK -->|Passes along information| API
+API -->|Deleted text| SR
+Speak(fa:fa-volume-up Deleted Text ):::bluelarge
+
+</div>
+
+---
+# Building for Accessibility
+
+*Role of Designers/Developers is important here*
+- Only they can provide proper ALT text
+- Their choices impact navigation order
+- They need to announce things that change
+- Size and color matter too
+
+---
+.left-column40[
+
+]
+
+.right-column60[
+## Proper ALT text
+
+What is a good name for the "Like" Button?
+
+Enable the user to understand the name of the control they have navigated to, what type of control it is, what value it has, what state it has.
+]
+
+---
+.left-column40[
+
+]
+
+.right-column60[
+## Proper ALT text
+
+Screen reader will read out name, role, and state. Don't repeat these.
+
+Good alt text: Name ("Like")
+
+API knows: Role ("Button")
+
+API knows: State ("Not selected")
+]
+
+---
+# Building for Accessibility
+
+*Role of Developers is important here*
+- Only they can provide proper alt text
+- **Their choices impact navigation order**
+- They need to announce things that change
+- Size and color matter too
+
+---
+# Example: Swipe Order
+.left-column40[
+
+]
+.righ-column60[
+What focus order makes sense for the Facebook newsfeed?
+
+Does this match the actual focus order?
+
+When might you need to *skip* things?
+]
+
+---
+## What order do you think will be used
+
+.left-column40[
+
+]
+.right-column60[
+Use chunks to group meaningful info and reduce number of navigation steps.
+- User can double tap to drill down into chunk (e.g. navigate to the “like†button by drilling down into an individual post).
+]
+???
+ink over!
+---
+## What order do you think will be used
+.left-column40[
+
+]
+.right-column40[
+
+]
+
+
+---
+# Building for Accessibility
+
+*Role of Developers is important here*
+- Only they can provide proper alt text
+- Their choices impact navigation order
+- **They need to announce things that change**
+- Size and color matter too
+
+---
+# Any UI change should be announced
+.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.
+
+]
+--
+
+.column[
+## Common places this happens
+
+Dialog boxes
+
+Success notifications
+
+Errors
+]
+
+
+---
+# Building for Accessibility
+
+*Role of Developers is important here*
+- Only they can provide proper alt text
+- Their choices impact navigation order
+- They need to announce things that change
+- **Size and color matter too**
+
+---
+# Size
+
+Especially hard on mobile devices
+
+.left-column40[
+
+]
+
+.right-column60[
+Even if the user misses the Text Label on the screen, they will still be able to trigger the desired action because the touch target is larger than what appears, resulting in less user error.
+
+White space around targets also helps
+
+Minimum on mobile: 48x48
+]
+???
+Solve for one, extend to many
+Trying to hit a small button with one hand while standing on a moving, crowded bus
+
+---
+# Color contrast
+
+Choose colors that provide enough contrast between content and the background so that anyone with low-vision impairments and color deficiencies can perceive the content.
+
+.left-column50[
+WCAG Level AAA requires a contrast ratio of at least
+- .contrast71[7:1 for normal text]
+- .contrast41[4.5:1 for large text (14t pt bold or larger)]
+- .badcontrast[Avoid anything else!]
+]
+.right-column50[
+- [Colorzilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en) is an excellent tool for extracting the color value from any page element;
+- WebAIM has a [contrast checker](https://webaim.org/resources/contrastchecker/#:~:text=WCAG%20Level%20AAA%20requires%20a,value%20from%20any%20page%20element)
+]
+
+---
+# Summary and most common errors
+
+| |Description |
+|--|----------------------|
+|<i class="darklight fa fa-times-circle fa-2x"></i> | Missing element label ||
+|<i class="darklight fa fa-retweet fa-2x"></i> | Item label ends with type, e.g., “Play Button.†TalkBack automatically announces item type, so information is redundant |
+|<i class="darklight fa fa-eye-slash fa-2x"></i> | UI Change not announced |
+|<i class="darklight fa fa-server fa-2x"></i> | Navigation lacks hierarchy; or makes no sense |
+|<i class="darklight fa fa-search-minus fa-2x"></i> | Item is too small|
+|<i class="greylight fa fa-adjust fa-2x"></i> | Low contrast in image or icon |
+|<i class="greylight fa fa-quote-left fa-2x"></i> | Low text contrast between foreground and background |
+
+---
+# Some additional things to watch out for
+
+| |Description |
+|--|----------------------|
+|<i class="darklight fa fa-strikethrough fa-2x"></i> | TextView has a content description. This might interfere with a screen reader’s ability to read the content of the text field |
+|<i class="darklight fa fa-retweet fa-2x"></i> | Item's role identical with alt text|
+| <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 |
+
+---
+# Mode shift: Video Description
+
+- Compare and contrast
+- Accessible ALT text (for "pictures")
+- Accessible, dynamic systems (apps/web pages) and their images
+- Accessible video
+
+
+---
+# In Class Exercise
diff --git a/slides/wk01/inclusive-design.html b/slides/wk01/inclusive-design.html
deleted file mode 100644
index aa1c6009e33c639dde27f841c43ca5083be7f7d8..0000000000000000000000000000000000000000
--- a/slides/wk01/inclusive-design.html
+++ /dev/null
@@ -1,634 +0,0 @@
----
-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 <BR>7x as Many Books]]
-
-]
-
----
-# Example: Banking
-
-.left-column40[
-
-]
-
-.right-column60[
-<BR>
-![:youtube Banking failure, b-R5r_aKmKo]
-]
----
-# Example: Banking
-
-.left-column40[
-
-]
-
-.right-column60[
-<BR>
-![: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<BR>] ]
-.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.<BR> ]]
-
-.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
-
-<BR>
-.column[
-.centerh[
-
-
-Recognize exclusion
-]
-]
-
-.column[
-.centerh[
-
-
-Learn from diversity
-]]
-
-.column[
-.centerh[
-
-
-Solve for one, <BR>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* <BR> navigate computing <BR> (and the world)
-
-Not a *medical* device
-]
-.right-column60[
-.left-column[
-]
-.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[
-
-
-## Screen <BR>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
-
-<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[##  .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]]
-<BR>
-
-- Use *best practices* in inclusive design
-- Play nice with *accessibility APIs*
-- *Test* with diverse users
-]
-
----
-# Building for screen readers
-
-<DIV class="mermaid">
-graph LR
-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
-ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
-App -->|Name: Foo| ATK
-ATK -->|Name, Role: Button| API
-API -->|Name, Role| SR
-Speak(fa:fa-volume-up Button, Foo ):::bluelarge
-
-</div>
---
-... (repeat for each swipe)
-<DIV class="mermaid">
-graph LR
-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
-ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
-App -->|Name: Bar| ATK
-ATK -->|Name, Role: Button| API
-API -->|Name, Role| SR
-Speak(fa:fa-volume-up Button, Bar ):::bluelarge
-
-</div>
-
----
-# What happens when user double taps to invoke?
-
-<DIV class="mermaid">
-graph LR
-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
-ATK -->|Invokse Callback| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
-App -->|Updates Interface<BR>Announces Changes| ATK
-ATK -->|Passes along information| API
-API -->|Deleted text| SR
-Speak(fa:fa-volume-up Deleted Text ):::bluelarge
-
-</div>
-
----
-# Building for Accessibility
-
-*Role of Developers is important here*
-- Only they can provide proper alt text
-- Their choices impact navigation order
-- They need to announce things that change
-- Size and color matter too
-
----
-.left-column40[
-
-]
-
-.right-column60[
-## Proper ALT text
-
-What is a good name for the "Like" Button?
-
-Enable the user to understand the name of the control they have navigated to, what type of control it is, what value it has, what state it has.
-]
-
----
-.left-column40[
-
-]
-
-.right-column60[
-## Proper ALT text
-
-Screen reader will read out name, role, and state. Don't repeat these.
-
-Good alt text: Name ("Like")
-
-API knows: Role ("Button")
-
-API knows: State ("Not selected")
-]
-
----
-# Building for Accessibility
-
-*Role of Developers is important here*
-- Only they can provide proper alt text
-- **Their choices impact navigation order**
-- They need to announce things that change
-- Size and color matter too
-
----
-# Example: Swipe Order
-.left-column40[
-
-]
-.righ-column60[
-What focus order makes sense for the Facebook newsfeed?
-Does this match the actual focus order?
-
-]
-
----
-## What order do you think will be used
-
-.left-column40[
-
-]
-.right-column60[
-Use chunks to group meaningful info and reduce number of navigation steps.
-- User can double tap to drill down into chunk (e.g. navigate to the “like†button by drilling down into an individual post).
-]
-???
-ink over!
----
-## What order do you think will be used
-.left-column40[
-
-]
-.right-column40[
-
-]
-
-
----
-# Building for Accessibility
-
-*Role of Developers is important here*
-- Only they can provide proper alt text
-- Their choices impact navigation order
-- **They need to announce things that change**
-- Size and color matter too
-
----
-# Any UI change should be announced
-.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.
-
-]
---
-
-.column[
-## Common places this happens
-
-Dialog boxes
-
-Success notifications
-
-Errors
-]
-
-
----
-# Building for Accessibility
-
-*Role of Developers is important here*
-- Only they can provide proper alt text
-- Their choices impact navigation order
-- They need to announce things that change
-- **Size and color matter too**
-
----
-# Size
-
-Especially hard on mobile devices
-
-.left-column40[
-
-]
-
-.right-column60[
-Even if the user misses the Text Label on the screen, they will still be able to trigger the desired action because the touch target is larger than what appears, resulting in less user error.
-
-White space around targets also helps
-
-Minimum on mobile: 48x48
-]
-???
-Solve for one, extend to many
-Trying to hit a small button with one hand while standing on a moving, crowded bus
-
----
-# Color contrast
-
-Choose colors that provide enough contrast between content and the background so that anyone with low-vision impairments and color deficiencies can perceive the content.
-
-.left-column50[
-WCAG Level AAA requires a contrast ratio of at least
-- .contrast71[7:1 for normal text]
-- .contrast41[4.5:1 for large text (14t pt bold or larger)]
-- .badcontrast[Avoid anything else!]
-]
-.right-column50[
-- [Colorzilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en) is an excellent tool for extracting the color value from any page element;
-- WebAIM has a [contrast checker](https://webaim.org/resources/contrastchecker/#:~:text=WCAG%20Level%20AAA%20requires%20a,value%20from%20any%20page%20element)
-]
-
----
-# Summary and most common errors
-
-| |Description |
-|--|----------------------|
-|<i class="darklight fa fa-times-circle fa-2x"></i> | Missing element label ||
-|<i class="darklight fa fa-retweet fa-2x"></i> | Item label ends with type, e.g., “Play Button.†TalkBack automatically announces item type, so information is redundant |
-|<i class="darklight fa fa-eye-slash fa-2x"></i> | UI Change not announced |
-|<i class="darklight fa fa-server fa-2x"></i> | Navigation lacks hierarchy; or makes no sense |
-|<i class="darklight fa fa-search-minus fa-2x"></i> | Item is too small|
-|<i class="greylight fa fa-adjust fa-2x"></i> | Low contrast in image or icon |
-|<i class="greylight fa fa-quote-left fa-2x"></i> | Low text contrast between foreground and background |
-
----
-# Some additional things to watch out for
-
-| |Description |
-|--|----------------------|
-|<i class="darklight fa fa-strikethrough fa-2x"></i> | TextView has a content description. This might interfere with a screen reader’s ability to read the content of the text field |
-|<i class="darklight fa fa-retweet fa-2x"></i> | Item's role identical with alt text|
-| <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 |
-
-
----
-# Accessibility is a design problem.
-
-.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.
-
-
-