---
layout: presentation
title: Accessibility --Week 4, Monday--
description: Accessibility
class: middle, center, inverse
---
# Screen Reader Accessibility on Android

Venkatesh Potluri & Anne Ross

CSE 340, Winter 2020

---
name: normal
layout: true
class:

---
# Experiment done!

![:img Histogram showing how dots and no dots performed. They are about the same, 50%](img/accessibility/chart.png)

---
# Venkatesh Research Interests

Accessible programming tools for blind software developers
- A Multi Modal Approach for Blind and Visually Impaired Developers to Edit Webpage Designs
- CodeTalk (aka.ms/codetalk)

Improving screen reader interactions
- investigating nonvisual interaction techniques on laptop touchpads
- QBit: an exploratory tangible user interface to support nonlinear nonvisual window switching
---
# A Multimodal Approach for Blind and Visually Impaired Developers to Edit Webpage Designs

<iframe width="560" height="315" src="https://www.youtube.com/embed/NbkiVG9Mi9s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
---
# Today’s focus

.left-column-half[
Screen readers.

What are screen readers?

Different types of screen readers.
- JAWS for Windows
- NonVisual Desktop Access
- VoiceOver
- TalkBack
- ChromeVox

]
.right-column-half[
![:img JAWS logo. A blue shark; with talking rings over blue text that reads JAWS.,30%](img/accessibility/JAWS_logo.png) ![:img NVAccess logo. geometric shapes intermix in orange blues and purple. text reads; NVAccess empowering lives through non-visual access to technology,50%](img/accessibility/NVDA_logo.png)

*Where can you find one?*
Different devices used to interact with screen readers.
]
---
# Building for screen readers

Screen readers get underlying information about controls from operating systems.
- this information is provided by a developer.
- Accessibility APIs provide the information to a screen reader.
- Screen readers provide this information visually, through audio or in Braille to users.

.left-column-half[
![:img Diagram showing the client (screen reader) making a call to the accessibility API; which passes along the request to the provider (browser); which checks the content in the web document; which sends the information back up the chain, 100%](img/accessibility/ScreenReaderIllustration.png)
]
.right-column-half[
Illustrative example of how screen readers get information. Source: semantics to screen readers -- a list apart.

*Do all developers provide this information?*
]
---
# App Health Indicators reported by Google's Accessibility Scanner

| Error                | Description                                                                                                                   |
|----------------------|-------------------------------------------------------------------------------------------------------------------------------|
| Clickable Items      | Overlapping clickable items                                                                                                   |
| Editable Image Label | TextView has a content description. This might interfere with a screen reader’s ability to read the content of the text field |
| Image Contrast       | Low contrast in image or icon                                                                                                 |
| Item Descriptions    | Items with identical speakable text                                                                                           |
| Item Label           | Missing element label                                                                                                         |
| Item Type Label      | Item label ends with type, e.g., “Play Button.” TalkBack automatically announces item type, so information is redundant       |
| Link                 | URL in link may be invalid                                                                                                    |
| Text Contrast        | Low text contrast between foreground and background                                                                           |
| Touch Target         | Item is too small|


---
# Demo

---