---
layout: presentation
title: Accessible Media
description: Alt Text and Video Description
class: middle, center, inverse
---
background-image: url(img/people.png)
# Accessible Media:
# 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
---
# 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 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 |
|--|----------------------|
| | 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