---
layout: presentation
title: Testing for Accessibility  --Week 3--
description: Accessibility
class: middle, center, inverse
---
background-image: url(img/people.png)

.left-column50[
# Week 3: Testing for Accessibility

{{site.classnum}}, {{site.quarter}}
]
---
name: normal
layout: true
class:

---
# Important Reminder

## This is an important reminder
## Make sure zoom is running and recording!!!
## Make sure captioning is turned on

---
[//]: # (Outline Slide)
# Learning Goals for Today

- **Get comfortable using existing freely available accessibility technology to manually support assessment**
- How do we use automated tools?

---
# Example Disabilities To Consider

.left-column50[
Web browsing involves 
- Color
- Text of different shapes and sizes 
- Content (images, words, sounds, animat.)
- Typing (e.g. input to forms)
- Mousing (e.g. clicking on links for navigation)
- Comprehension (e.g. reading level)
]
.right-column50[
Therefore…
- Visual impairments
- Difficulty understanding content
- Difficulty hearing
- Difficulty manipulating mouse our keyboard

all affect accessibility

]

---
# What is the goal?
End users interact with the *same* website or app as anyone else

End users may use browser features or a specialist accessibility tool to customize their experience

**This is Key** Website or app designer provides the right structure and information to support this

---
background-image: url(img/assessment/gmail.png)

<audio controls="controls"><source src="img/assessment/gmail-normal.wav" type="audio/x-wav" /></audio>

???
But, lets back up a little to see why the web can be difficult for blind people to use.

To interact with their computers, blind people use software programs called screen readers.  Here’s a screen reader reading the GMail inbox.

---
background-image: url(img/assessment/gmail-blackedout.png)


???
Although it may have felt longer, that was only 20 seconds.

In 20 seconds, most of us would have found the message we wanted, and many of us not only would have found that message, but also read it and, possibly replied

At this point, a blind user new to this site still has no idea that an inbox even exists.

---
# But it gets much better
Accessibly design pages, combined with user expertise, work very well

![:img gmail landscape view showing navigation start,60%, width](img/assessment/gmail-nav1.png) 

---
# But it gets much better
Accessibly design pages, combined with user expertise, work very well

![:img gmail landscape view showing navigation headers,60%, width](img/assessment/gmail-nav2.png) 

---
# But it gets much better
Accessibly design pages, combined with user expertise, work very well

![:img gmail landscape view showing navigation landmarks,60%, width](img/assessment/gmail-nav3.png) 

---
# But it gets much better
Accessibly design pages, combined with user expertise, work very well

![:img gmail landscape view showing to form inputs,60%, width](img/assessment/gmail-nav4.png) 

---
# But it gets much better
Accessibly design pages, combined with user expertise, work very well

![:img gmail landscape view showing navigation to buttons,60%, width](img/assessment/gmail-nav5.png) 


---
# Most Websites and Apps not Accessible

- Over 60% of Android apps missing at least one label on a clickable element (out of 5721 apps tested) ([Ross et al, 2020](https://dl.acm.org/doi/pdf/10.1145/3348797))
- Over 80% of fortune 500 websites not accessible ([Loiacono et al, 2009](https://dl.acm.org/doi/pdf/10.1145/1562164.1562197))
- University websites are also partly to mostly inaccessible ([Campoverde-Molina et al, 2021](https://link.springer.com/content/pdf/10.1007/s10209-021-00825-z.pdf))
- Less than 1% of Twitter images had ALT text in 2019 ([Gleason et al, 2019](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605))

More study is needed, but overall, progress here is slow. Perhaps this is not surprising since only about 50% of universities in the US teach accessibility at all ([Shinohara et al, 2018](https://dl.acm.org/doi/pdf/10.1145/3159450.3159484)).

---
# Best Practices for Testing Accessibility?

.left-column50[
Automated Tools
- [Review of many options](https://medium.com/@OPTASY.com/what-are-some-of-the-best-web-accessibility-testing-tools-to-evaluate-your-website-with-69def25a386)
- Web: WebAIM's [WAVE](https://wave.webaim.org/);
- Browser Extensions ([Comparison Article](https://medium.com/@OPTASY.com/what-are-some-of-the-best-web-accessibility-testing-tools-to-evaluate-your-website-with-69def25a386)): [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US); [Axe](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US); [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/); [Siteimprove](https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc/related);  & other browser extensions
 - Phone apps: [Google Accessibility Scanner](https://support.google.com/accessibility/android/answer/6376570?hl=en&ref_topic=6376582) and [iOS.](https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
]
.right-column50[
Design Guidelines (i.e. know them and apply them heuristically)

Simulation (Try it yourself using accessibility technologies or simulators such as [aDesigner](https://www.eclipse.org/actf/downloads/tools/aDesigner/))

User Testing
]

---
# Simulation

In this assignment we will use off-the-shelf, freely available accessibility technology for simulation
- Screen Readers
- Switch Control
- Magnification
- Anything else you want to try


---
# Screen Readers: Typical Bugs

.left-column40[
![:img  Same picture highlighting the hamburger menu (which has the alt text "hamburger menu") and an image (which has no alt text and just plays an unintelligible name). The audio of this page is the video at right,100%, width](img/assessment/banking.png)
]

.right-column60[
<BR>
![:youtube Banking failure, b-R5r_aKmKo]
]

???
- Reads the words on the screen
- Keystroke to move to next area
- Screen reader users, turn this on on your phone

---
# Introduction to Screen Readers

![:youtube Screen Reader Demo, dEbl5jvLKGQ]

???
Demo also shows an example of a screen reader finding a problem such as lack of alt text or a badly labeled table

---
# Switch Control

![:youtube Explanation of how to set up switch control, GQKEE9nI1lk]

???
- Switch users, turn this on, on your phone

---
# Simulation Warning

.left-column[
Simulation tends to cause people to underestimate what is possible
]

.right-column[
![:youtube One thumb to rule them all: video of gaming with switch control,2BhHwk9qSvI]
]

???
Remind them about drone video

Don't fall into the trap of assuming that your ineptitude is the standard disability experience]
---

# Magnification

![:youtube How to magnify your phone's screen, yHqJOSZN1zA]

???
- Magnification users, turn this on, on your phone

---
# Break up into groups 

Decide who will 
- use a screen reader
- use switch control
- use magnification

Open your phone's web browser and load [seattleschools.org](https://www.seattleschools.org/)

---
# In your groups

Visit [Seattle Public Schools](https://www.seattleschools.org/)

The task you are evaluating is whether a disabled family can "Report a Concern" about how accessible the website is

What are some problems you found? Try to separate out what is difficult for you as a beginner from what is a flaw in the website itself. 

[Share your findings](TBD)