# WCAG for Milestone 4: Resizing, Reflow & more The remaining WCAG categories for your final VPAT cse482a: Fall 2026; Jennifer Mankoff (Last Edited: 2026-11-16). <a href="/courses/cse482a/26au/slides/wcag-final.html">Live View: /slides/wcag-final.html</a> Important Reminder: check zoom & captioning <a href="/courses/cse482a/26au/slides/wcag-final.html"><img src="https://api.qrserver.com/v1/create-qr-code/?data=/slides/wcag-final.html&size=100x100" alt="QR for /courses/cse482a/26au/slides/wcag-final.html" title="" /></a> --- <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 4</a> (Slide 3)</li> <li><a href="#9">Audit in action</a> (Slide 9)</li> <li><a href="#12">In pairs: audit a real page</a> (Slide 12)</li> <li><a href="#20">Now try the fixed version (10 min)</a> (Slide 20)</li> <li><a href="#21">In your team: your own project</a> (Slide 21)</li> </ul> </div> --- class: center, middle, inverse # Milestone 4 Final Concept & VPAT Starts **Thu 11/19**. Due **Wed 12/2** (Demo Day in class). Poster due **Mon 12/7**. ??? DRAFT. Milestone 4's page is still partly TBD. Check this deck against it before presenting. --- ## What you will do 1. **Update your running project doc** with your final concept 2. **Finish your VPAT**: check the remaining WCAG categories (the beginners' guide), and update your Milestone 3 rows for what you fixed 3. **Fix what you can**, after your audit walkthrough with a TA (Mon 11/23). It is expected that you may not eliminate every issue 4. **Summarize the most severe problems** that remain 5. **Finalize your build log** 6. **Demo Day** (Wed 12/2) **Then:** the poster, due the morning of Mon 12/7. Poster session Wed 12/9. ??? Confirm against the Milestone 4 page: running project doc, build log, and "Other" are still TBD there. --- ## Checklist: what "complete" looks like - Your VPAT covers all categories in the WCAG beginners' guide, with honest ratings and explanations (including what does not apply) - Your Milestone 3 audit rows are updated for the fixes you made - Your most severe remaining problems are summarized - Your final concept is in the running project doc - `LOG.md#build` is finalized, with an entry from every teammate ??? TBD: confirm the exact list once the Milestone 4 page is finished. --- ## How it is graded - **Accessible Implementation**: your final app and the VPAT - **Accessible Communication**: your final documentation - **Inclusive Person Centered Design** and **Design/Disability Justice**: your final concept Handin: tag your repo (`git tag milestone-4`), then submit the compare link `milestone-3...milestone-4`. --- ## Class time until it is due | Day | What | |---|---| | Mon 11/16 | Last WCAG criteria (resizing, reflow, the rest) | | Mon 11/23 | **Audit walkthroughs** with TAs, and an accessible poster lecture | | Wed 11/25 | No class (Thanksgiving) | | Mon 11/30 | Final build and polish | | Wed 12/2 | **Demo Day** | | Mon 12/7 | **Posters due** (morning) | | Wed 12/9 | **Poster session** | Teamwork reflections: after Milestone 3 (due Mon 11/23), and a final one (due Fri 12/11). --- ## Common problems - Waiting for the walkthrough to start fixing - A VPAT that skips categories without saying why they do not apply - Starting the poster only after Milestone 4: **start in week 9** - Hiding problems instead of reporting them. A VPAT is **truthful** --- class: center, middle, inverse # Audit in action Resizing, reflow, and the rest of the VPAT --- ## Plan for today (80 minutes) | Time | What | |---|---| | 5 min | Where your VPAT stands | | 25 min | **In pairs:** resize text, reflow, and a hunt through the rest of the guide | | 10 min | Try the fixed version | | 40 min | **In your team:** audit your own project, with check-ins | **Milestone 3 is due Wednesday**, with your four-criteria audit. Today starts the **Milestone 4** VPAT, due 12/2. --- ## Where your VPAT stands | Milestone | Criteria | |---|---| | 2 | 1.1.1 alt text, 1.4.3 contrast, 1.4.11 non-text contrast | | 3 | 2.1.1 keyboard, 2.4.3 focus order, 2.4.7 focus visible, 1.3.1 headings | | **4** | **Everything else** in the [WCAG beginners' guide](https://appt.org/en/guidelines/wcag-beginners-guide), plus updates for what you fixed | Same table, same ratings (Supports, Partially Supports, Does Not Support), same explanations: **which** feature, **how**, **who** is affected. It is **expected** that you may not eliminate every issue. Report them honestly. --- class: center, middle, inverse # In pairs: audit a real page --- ## Setup Same pairs as before: one **laptop**, one **phone**. Load [(in)Accessible University](https://projects.accesscomputing.uw.edu/au/before.html) on both. --- ## Step 1: Resize text (1.4.4), 7 min **The criterion (Level AA):** text can be resized up to **200%** without loss of content or function. **Do it:** - **Laptop:** zoom the browser to 200% (use text-only zoom if your browser allows it) - **Phone:** increase the system font size, then reload - Does text overlap, get cut off, or stop being legible? Can you still do everything? **Write the row** for 1.4.4. Name *what* broke. --- ## Step 1: What to look for When this was run before, text **did not resize properly on an iPhone**: hard to read for users who need larger text. This one is hard to fix. Craig Hockenberry's post on [dynamic type on the web](https://furbo.org/2024/07/04/dynamic-type-on-the-web/) is both a demonstration of a working solution and an explanation. How would you rate it? Think about **frequency** (how much of the page), **impact** (can people work around it) and **persistence** (is there a workaround). ??? If a pair rates it "Supports" on a laptop, ask whether they tried the phone. --- ## Step 2: Reflow (1.4.10), 7 min **The criterion (Level AA):** content works at a narrow width (**320 CSS pixels**, roughly a phone in portrait, or a browser at **400% zoom**) *without scrolling in two directions*. **Do it:** - **Laptop:** zoom to 400%, or make the window narrow - Is everything still reachable? Do you have to scroll sideways to read a line? - **Phone:** hold it in portrait, then rotate it to landscape. What changes? **Write the row** for 1.4.10. --- ## Step 3: The rest of the guide, 11 min Open the [WCAG beginners' guide](https://appt.org/en/guidelines/wcag-beginners-guide). Pick **three categories you have not yet checked**, and find out whether they apply to this page. Here are some real problems on this page. Can you find them *and* name the criterion? - You must tab through the **whole menu** on every page - **Required form fields** are marked only in blue - The form doesn't say **where the error** is - Form **labels** are read twice - The **dropdown menu** doesn't tell a screen reader it has a sub-menu, or whether it's open - The **carousel** cannot be operated For each: which criterion? Does the page **Support**, **Partially Support**, or **Not Support** it? ??? Likely answers: bypass blocks (2.4.1), use of color (1.4.1), error identification (3.3.1), labels or instructions (3.3.2), name/role/value (4.1.2), keyboard (2.1.1). Different pairs may map differently. Check against the guide. --- ## If a criterion doesn't apply If there is **no content** a criterion applies to, it is satisfied. Rate it **Supports**, and explain why it doesn't apply. Example: your app has no video, so the **captions** criteria are *Supports* ("no video in this product"). This is why a full VPAT is more tractable than it looks: **many rows are one line.** Be careful: *"Supports" because it doesn't apply* is fine. *"Supports" because we didn't check* is not. Say **Not Evaluated** only for AAA. --- ## Share out (3 min) One pair tells the room **one criterion** they found a problem for. Which criterion was **hard to rate**? Why? --- name: fixed-version ## Now try the fixed version (10 min) Load [Accessible University](https://projects.accesscomputing.uw.edu/au/after_u.html). With your partner: 1. Resize to 200% and reflow to 400%: do both now work? 2. Revisit your three "rest of the guide" criteria. Is each one fixed? 3. Is anything *still* a problem? The full [list of issues](https://a11y-assessments.pages.oit.duke.edu/accessible-u/issues.html) explains each problem and its fix. --- class: center, middle, inverse # In your team: your own project --- ## Your project (40 min, during check-ins) 1. **Split the guide.** Divide the categories in the [WCAG beginners' guide](https://appt.org/en/guidelines/wcag-beginners-guide) among teammates 2. **Test** resizing (1.4.4) and reflow (1.4.10) on your running prototype first 3. For each category: write a **VPAT row**. If it doesn't apply, say **Supports** and why 4. **List what you can fix** before 12/2, and what you can't. Rank by severity 5. **Update your Milestone 3 rows** (due Wed) so they're ready to hand in Staff will check in with each team: bring questions and your draft rows. ??? Teams are also expected to hand in Milestone 3 on Wednesday. Make sure nobody starts new Milestone 4 work in a way that delays it. --- ## Wrap up - **Wed 11/18:** Milestone 3 due. **Demo Day:** study readout - **Mon 11/23:** audit walkthroughs with TAs. Bring your VPAT and your list of what is feasible to fix - **Wed 12/2:** Milestone 4 due - Questions?