Accessible Media

background-image: url(img/inclusive-design/people.png)

# Accessible Media: 
# ALT Text and 
# Video Description

CSEP 590a, Spring 2021

---
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[
![: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[
"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[
![: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 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[
![:img screen reader by Sophia Bai from the Noun Project, 100%, width](img/media/screenreader.png)
]
.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>

---
# What happens when user double taps to invoke?

</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[
![:img A picture of facebook ,80%, width](img/media/facebook1.png) 
]

.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[
![:img A picture of facebook ,80%, width](img/media/facebook1.png) 
]

.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[
![:img A picture of facebook ,80%, width](img/media/facebook1.png) 
]
.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[
![:img A picture of facebook ,80%, width](img/media/facebook1.png) 
]
.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[
![:img A picture of facebook ,80%, width](img/media/facebook1.png) 
]
.right-column40[
![:img A picture of facebook ,120%, width](img/media/facebook-actual.png) 
]

---
# 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[
![:img A picture of a failed sign in to the University of Washington ,90%, width](img/media/signin-fail.png) ]
.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[
![:img An arrow vs arrow and label make very different target sizes ,90%, width](img/media/targets.png) 
]

.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 | 
|--|----------------------|
| | Missing element label ||
| | Item label ends with type, e.g., “Play Button.” TalkBack automatically announces item type, so information is redundant |
| | UI Change not announced |
| | Navigation lacks hierarchy; or makes no sense |
| | Item is too small|
| | Low contrast in image or icon |
| | Low text contrast between foreground and background |

---
# Some additional things to watch out for

| |Description | 
|--|----------------------|
| | TextView has a content description. This might interfere with a screen reader’s ability to read the content of the text field |
| | Item's role identical with alt text|
| | Overlapping clickable items |
| | 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