Assessment Part 2

# Assessment Part 2
Strategies for assessing user needs and access

CSE443: Winter 2026; Jennifer Mankoff (Last Edited: 2026-01-26). <a href="/courses/cse443/26wi/slides/assessment2.html">Live View: /slides/assessment2.html</a>

Important Reminder: check zoom & captioning

---

<div class="slide-outline" style="margin: 1em 0; padding: 1em; background: #f5f5f5; border-radius: 5px;">
<h2 style="margin-top: 0;">
  
  
    Outline
  
  
</h2>
    
  <ul style="list-style-type: none; padding-left: 0;">
  
  
  
  
  
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#7">Quick Acknowledgement</a> (Slide 7)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#12">Auditing</a> (Slide 12)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#31">ARIA</a> (Slide 31)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#39">UARs</a> (Slide 39)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
  </ul>
</div>

---
class: center, middle, inverse
# Announcements

<p>Announcements for week 4</p>

---
## Assignment
<ul>
  <li>The assignment has a few modifications, either <del>crossed out</del> or in <em>[new] italics].</em></li>
  <li>The Last revised date is: 1/23/2026</li>
  <li>Let us know if you have any questions.</li>
</ul>

---
## Handin
<p>The assignment handin for the current assignment was released over the weekend and finalized today.  There are four pieces</p>

<ul>
  <li>the three competencies</li>
  <li>the report (which must be complete, and the group should decide how anonymous)</li>
</ul>

---
## Writing credit
<p>Reminder: Writing credit</p>
<ul>
  <li>this course optionally allows writing credit</li>
  <li>you need to tell me you want it</li>
  <li>you need to be willing to revise this report based on feedback before I send it to the sponsor to get it</li>
</ul>

---
class: center, middle, inverse
# Quick Acknowledgement

---
## Recent news

You are not expected to share personal experiences and are welcome to step out briefly

Let's talk a little about disability connections

---
[![:img A picture of a news article titled Disabled woman dragged from car by ICE speaks out ](img/assessment/aliyah.png)]](https://www.newsnationnow.com/us-news/immigration/border-coverage/disabled-woman-dragged-from-car-by-ice-speaks-out/)

???

She was on her way to a TBI appointment on Tuesday 1/20 in Minneapolis
more detail: https://www.cbc.ca/news/world/aliya-rahman-citizen-ice-arrest-9.7047853

---
## Other disability connections?

???
- medical neglect
- detention can cause disability
- communication denial (e.g. DHH)

---
## Ways to learn more

- Protection and advocacy organizations exist in every state
  - [Disability Rights California on ICE](https://www.disabilityrightsca.org/latest-news/death-at-adelanto-detention-facility-heightens-alarm-about-treatment)
  - [Disability Rights Washington on Immigration](https://disabilityrightswa.org/drw-joins-washington-state-immigrant-solidarity-network/)

- Local events. Huskies for Opportunities in Prison Education (HOPE) & ASL club hosting Disability and d/Deaf Incarcerated Justice on Monday, Feb. 9th from 4:30 pm - 6:00 pm, in Miller 301.

---
class: center, middle, inverse
# Auditing

Recommendations for auditing a website

---
## Scenario (for today)

- [(in)Accessible University](https://projects.accesscomputing.uw.edu/au/before.html) (not accessible)
- [Accessible University](https://projects.accesscomputing.uw.edu/au/after_u.html) (accessible)
- [Accessible University Source](https://projects.accesscomputing.uw.edu/au/)
- [Information about Accessible University](https://www.washington.edu/accesscomputing/AU/info.html)

[Originally developed](https://www.washington.edu/accesscomputing/AU/index.html) at UW by [AccessComputing](https://www.washington.edu/accesscomputing/)

---
## Break into pairs
- One person load it on your laptop (use the *Safari* browser on OS X)
- One person load it on your phone
- Start an [Ed](https://edstem.org/us/courses/90089/discussion/) post to keep track of your findings. Break it into sections (one per problem or group of similar problems).

Load [(in)Accessible University](https://projects.accesscomputing.uw.edu/au/before.html)

---
## Follow this sequence
1. Check for videos (no)
2. Check rotation (what do you notice?)
3. Check if the form is visually understandable (labels)

---
## What to do with a problem you find?
Check the [WCAG beginner's guide](https://appt.org/en/guidelines/wcag-beginners-guide) to make sure it's a problem. In this case, it's bad UX but doesn't rise to "access problem"

---
## Text Resizing
- Does text resize 
- Is it legible?

---
## Find a problem?

Post a simple UAR analysis on [ed](https://edstem.org/us/courses/90089/discussion/

- Name/Brief Description (Unique)
- Testing Method: Visual Inspection
- Evidence: Take a photo; add in the success criterion (1.4.4)

---
## Explanation

- Explanation: This app issues violates success criterion 1.4.4 Resize Text, because text doesn't resize properly on an iPhone. This is challenging for user who cannot read small fonts easily. 
- Severity 3

---
## Severity Justification
- Justification: Frequency is high because it affects all text. Impact is medium because the reader can zoom in and out (they have to scroll a lot then though). Persistence is high because there isn't an easy work around

???
Discuss difference between impact and persistence here

---
## Solution
This one is actually quite hard to solve, but [Craig Hockenberry's blog post on dynamic type](https://furbo.org/2024/07/04/dynamic-type-on-the-web/) is both a demonstration of a working solution and an explanation of how to solve it.

---
## Color Contrast

One easy way to check one the web is using WebAim's [Wave](https://wave.webaim.org/report#/https://projects.accesscomputing.uw.edu/au/before.html)

This is much easier on a laptop! The link above loads our sample bad web page. Look at "contrast errors"

*Note*: You can group these all into one problem report

---
## Textual Alternatives

Simplest to check with  [Wave](https://wave.webaim.org/report#/https://projects.accesscomputing.uw.edu/au/before.html). Click on "details" and check them all. You'll see

- 3 x missing alt text 
- 6 x linked image missing alt text
- 2 x suspicious alt text (much further down)
  
---
## Order of Elements

Order of elements can be checked two ways

1. Tab through things (laptop only)
2. Click on "Order" in WAVE

This can also be checked on a phone with an actual screen reader -- it will be your "swipe order"

---
## Turning on your screen reader

iPhone: Can be done in settings -> accessibility -> VoiceOver

OS X: Settings -> search for VoiceOver

---
## ALT-Tab to safari

- Try it: Read the title; use VO (control-option) to move around
- iPhone users try swiping (swipe up slowly until you hear 3 beeps to switch apps from settings)

---
## As you move around 
- Check ALT text
- Check roles ("navigation"; "button"; etc)
- Check headings
- Try to operate the app (fill in the form)

---
## Some things I noticed
- "required fields in blue" (not visible to screen reader user)
- I couldn't complete the form. It didn't tell me where the error was
- form labels read twice on laptop

Other issues
- Missing "skip link" 
- Heading level not consistent with semantics
- Carousel not accessible

[All 18 problems](https://projects.accesscomputing.uw.edu/au/issues.html)

---
## [something to try at home]
Try it again (Accessible version)

Load [Accessible University](https://projects.accesscomputing.uw.edu/au/after_u.html)

---
## Questions
- Thoughts about this process?
- Questions before we dive into details of POUR?

---
class: center, middle, inverse
# ARIA

Accessible Rich Internet Applications

---
## What is ARIA

-  a type of semantic HTML
- labels and defines the different parts of a website’s content when traditional semantic html does not suffice
- addresses roles, states, and properties

[How to use ARIA, a beginner's guide](https://webflow.com/blog/how-to-use-aria)

---
## Roles (1/2)
- **Abstract** roles set up foundations for other roles (e.g., landmark, window, command) 
- **Widget** roles define interactive elements like alert, button, scrollbar, tab, and textbox. *Whenever possible* use HTML for this (e.g. buttons!!!)

---
## Roles (2/2)
- **Document structure** roles are for content comprehension. Examples could be a separator, or article. 
- **Landmark** roles are for major navigational landmarks. Use native HTMl instead whenever possible (e.g., `<nav>`, `<header>`)

---
## States and Properties

Describe relationships and other key information. examples include 
- [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby) (relates descriptions to other elements)
- [`aria-haspopup`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup), meaning that a menu, dialog, etc will appear if this element is invoked
- [`aria-hidden`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden), meaning don't include this

---
## Key observations
- Less is more. 
- Need to complement ARIA with keyboard access (often includes javascript & other needs)
- Native HTML > predefined ARIA patterns > build your own

Have to study ARIA to use it well

---
# Aside: CAPTCHA Accessibility

.left-column40[
![:img Screen shots of three different captchas with various hard to read letters and numbers on them, 100%, width](img/assessment/CAPTCHAS.png)
]
.right-column60[
- Commonly used security method
  - Designed to be hard for computers and easy for humans
  - Require vision
- No accessible alternatives: [audio CAPTCHA are easy to crack](https://arstechnica.com/information-technology/2008/12/computer-scientists-find-audio-captchas-easy-to-crack/) and unuseable ([more info](https://www.youtube.com/watch?v=raFXfU7_fkg)).

]

???
Pointer to later 2nd wave accessibility topic: Accessibility and computer security

---
# Audio CAPTCHA Accessibility

.left-column40[
![:img Screen shots of an audio CAPTCHA interface, 100%, width](img/assessment/audiocaptcha.png)
]
.right-column60[
Commonly used security method
- Designed to be hard for computers and easy for humans
- Require vision

Answer: 
]

---
class: center, middle, inverse
# UARs