Accessibility --Week 4, Monday--

[//]: # (Outline Slide)
.left-column[
# Today's goals
]
.right-column[

Reminders
  - Layout Part 3-5 due tomorrow at 10pm
    - Remember you needed to accept [as2-layout-part-3-4](https://gitgrade.cs.washington.edu/student/assignment/120) first!
    - Remember git add/commit/push __then go to [GitGrade to turn in](https://gitgrade.cs.washington.edu/student/assignment/120/turnin)__
  - Accessiblity is now open!
    - Remember to [accept]() the assignment through GitGrade

Accessibility in practice!

Intro to the Accessibility assignment
]
---

# Screen Reader Accessibility on Android

Venkatesh Potluri & Anne Ross

CSE 340, Spring 2020

---
name: normal
layout: true
class:

---
# 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

---
# 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

---
# Accessbility assignment