WCAG for Milestone 2: Alt Text, Contrast & the VPAT

# WCAG for Milestone 2: Alt Text, Contrast & the VPAT
The first three WCAG criteria your team will check, and how to record them

cse482a: Fall 2026; Jennifer Mankoff (Last Edited: 2026-10-26). <a href="/courses/cse482a/26au/slides/wcag-visual.html">Live View: /slides/wcag-visual.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="#3">Milestone 2</a> (Slide 3)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#10">Auditing</a> (Slide 10)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#29">Back to Milestone 2</a> (Slide 29)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
  </ul>
</div>

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

---
## Upcoming

<ul>
  <li><a href="/courses/cse482a/26au/projects/milestone-2-prototype-and-architecture/">Milestone 2: Prototype & Architecture</a> (group) is due <strong>Monday 11/2</strong>, with Demo Day in class on Wednesday 11/4</li>
  <li><a href="/courses/cse482a/26au/projects/milestone-3-study-and-audit/">Milestone 3</a> and <a href="/courses/cse482a/26au/projects/milestone-3-consent-forms/">Milestone 3 Study Consent Forms</a> are due Monday 11/16.</li>
  <li>11/16: we will do Audit walkthroughs, and check in on feasibility of what to fix and the overall project.</li>
</ul>

---
## Other notes
<ul>
  <li>We divided the audit across Milestones 2 3 and 4.</li>
  <li>Your <strong>public website</strong> also needs to be accessible as part of Milestone 2 (and continued throughout the project)</li>
  <li>Drafts of Milestones 3 and 4 and the final poster page are now on the website.</li>
  <li>We added a small <strong>formative study</strong> of your Milestone 2 prototype (2-3 participants) to Milestone 3.</li>
</ul>

---
## Readings
<p><a href="https://teachaccess.github.io/tutorial/">Teach Access Tutorial: Writing Code (work through all lessons</a>; live code editor with instant pass/fail checks); <a href="https://appt.org/en/guidelines/beginnersguide-accessibility-testing">Beginners’ Guide to Accessibility Testing</a>; <a href="https://appt.org/en/guidelines/wcag-beginners-guide">WCAG Beginners’ Guide</a></p>

<p>Reading questions for this week are:</p>
<ul>
  <li>What is one new thing (to you) that you plan to bring into your project from the readings?</li>
  <li>Pick a criterion from the beginners guide. Define it and explain how to test it.</li>
</ul>

---
class: center, middle, inverse
# Milestone 2
Prototype & Architecture

Starts **Thu 10/22**. Due **Monday 11/2**

---

![:img Flowchart of the Milestone 2 tasks: build a prototype; document it; start accessibility on the prototype and the website; architecture and feasibility; log contributions; tag and submit to Canvas,100%,width](/courses/cse482a/26au/assets/diagrams/milestone-2-flow.png)

---
## Primary handins for Milestone 2

- Build and document your prototype on the **public website**
- Start **VPAT** for your prototype: 1.4.3 contrast, 1.4.11 non-text contrast, 1.1.1 alt text
- Update **public website**; check accessibility with [WAVE](https://wave.webaim.org/)

---
## Competencies so far (Milestone 0)

### Milestone 0:
- Inclusive, person centered design. 
- Re-evaluated on Milestone 1 if needed
- And again if needed after that

---
## Competencies so far (Milestone 1)

### Milestone 0:
- Inclusive, person centered design.

### Milestone 1:
- Design/Disability Justice
- Inclusive Experiments

---
## Milestone 2

- **Accessible Communication**: Accessibility of your website 
- **Accessible Implementation**: limited to the VPAT of your app
  - will continue to re-assess as you add to the VPAT

---
## Accessible Implementation Spread

- Milestone 2 Alt text, contrast and the VPAT 
- Milestone 3 Keyboard, focus and headings 
- Milestone 4 Remainder of the beginners guide

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

Focus: Alt text, contrast, and filling in a VPAT

---
name: vpat-row
## Voluntary Product Accessibility Template

A **VPAT** is summarizes accessibility of an app or website

Honesty is more important than fixing everything

---
## Focus on three things

- 1.4.3 Contrast
- 1.4.11 Non-text Contrast
- 1.1.1 Non-text Content

---
## Fill out the table
| Criteria | Severity | Conformance Level | Brief Explanation |
|---|---|---|---|
| 1.4.3 (Contrast (Minimum)) | | | |
| 1.4.11 (Non-text Contrast) | | | |
| 1.1.1 (Non-text Content) | | | |

- **Conformance Level**: Supports, Partially Supports, or Does Not Support
- **Brief Explanation**: Keep it short

Provide a longer explanation below the table.

---
## Conformance

A VPAT does not mean everything is accessible
- **Supports**: the product meets the criterion
- **Partially Supports**: some functionality does not meet it
- **Does Not Support**: the majority of functionality does not meet it

Instead of N/A say "supports" and explain N/A

---
## Longer explanation

Provide sufficient detail to show you understand the criterion and how it is impacted.

**Not enough detail:** "Bad contrast between elements. This will make it hard for people to use the app."

**Better:** "The white text on the light gray buttons on the checkout screen is 2.1:1. If users cannot read the button labels, they cannot complete the main task."

---
## We'll learn through auditing

- [(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
- [Source](https://projects.accesscomputing.uw.edu/au/)

Break into **pairs** and load [(in)Accessible University](https://projects.accesscomputing.uw.edu/au/before.html):
- Keep a shared doc: one section per problem (or group of similar problems)

---
## Text contrast (1.4.3)

Contrast impacts visibility. For Level AA text: 
- **4.5:1** for normal text
- **3:1** for large text (18pt, or 14pt bold, and larger)

---
## Checking Contrast
1. Open [WAVE](https://wave.webaim.org/report#/https://projects.accesscomputing.uw.edu/au/before.html) and check summary
2. Find *where* they are on the page
3. Use the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to get the actual ratio

*Note:* group similar errors into one row.

---
## Fill in the VPAT table

| Criteria | Conformance Level | Brief Explanation |
|---|---|---|
| 1.4.3 (Contrast (Minimum)) | ? | summary only |

Pick **Supports**, **Partially Supports** or **Does Not Support**.

What goes in the explanation

---
## Non-text contrast (1.4.11)

For non-text, required level is **3:1**

- Borders of buttons and text fields
- Icons that carry meaning
- Chart marks and state indicators (selected, focused)

---
## Checking Non-text contrast

May require a contrast checker.

Good time to check if is anything is shown by **color alone**? (Required fields? Errors?)

---
## Alt text (1.1.1)

Anything that is not text needs a text alternative
- **Informative** image: describe the relevant information
- **Decorative** image: mark so screen readers skip it
- **Image as a link or button**: title/function

---
## Signs of a problem
- ALT text is meaningless or missing
- ALT text is repetitive (have to test with a screen reader to find this). Example: says "image of ..." 
- Images are marked as decorative that should not be.

---
## First check with an automated tool

Open the page in [WAVE](https://wave.webaim.org/report#/https://projects.accesscomputing.uw.edu/au/before.html).

Check **Details** in **Alt text** (for missing and bad content)

---
## Filling in the VPAT

Write one VPAT row for **1.1.1**:

| Criteria | Conformance Level | Brief Explanation |
|---|---|---|
| 1.1.1 (Non-text Content) | ? | Which images, what is wrong, who is affected |

Pick **Supports**, **Partially Supports** or **Does Not Support**.

---
## What I found

WAVE reports (roughly):

- **1** linked image with alt text
- **5** images with missing alt text
- **5** suspicious alt text

???
The AU "issues" page lists these. Don't give the row away before they've tried.

---
## Try it with a screen reader

Simplest way is to do it on a phone (demo)

---
## Now try the fixed version

Load [Accessible University](https://projects.accesscomputing.uw.edu/au/after_u.html). First, turn off any screen reader.

- Open [WAVE](https://wave.webaim.org/report#/https://projects.accesscomputing.uw.edu/au/after_u.html) and check summary
 again. 
- Which errors are gone? Which remain?
- Is there anything you would *still* flag?

The full [list of issues](https://a11y-assessments.pages.oit.duke.edu/accessible-u/issues.html) and fixes.

---
class: center, middle, inverse
# Back to Milestone 2

---
## Assessing a prototype

What if your prototype is not digital?

What if your prototype is not accessible to WAVE?

Any other concerns?

---
## Wrap up

- **Milestone 2 is due Monday**. Work this week includes 
- rapid implementation of a prototype
- architecture and feasibility planning 
- first round of accessibility checking