with Professor Jeffrey Bigham

9.5.17 — 
Class Notes

Web Content Accessibility:

  • Americans with Disabilities Act (ADA) — Section 508 Amendment to the Rehabilitation Act of 1973 (providing alternatives to visual/oral/etc content)
  • Web Content Accessibility Guidelines (WCAG) + its applications
  • Many other international regulations based on WCAG
  • WCAG became a big deal when visuals were introduced to the web (early on, browsers were text-based)
  • 2014: WAI-ARIA — Web Accessibility Initiative, Accessible Rich Internet Applications — websites weren’t necessarily static anymore, more app-like
  • *** Wendy Chisholm, Trace R&D Center (HCI researchers) — early accessibility professionals (from the 90s)
  • WCAG 1.0 updated to be quantifiable: i.e. WCAG 2.0 specifies contrast between foreground and background colour ratio must be 4.5:1; three flashes below threshold (instead of don’t let screen flicker), etc
  • Enabled scripting — providing client-side validation
  • Content is not just accessible to user, but also to the computer
  • Automatic accessibility: WAVE (browser extension)

WAVE Analysis:

We used a tool called “WAVE” which helps to break down accessibility errors on existing websites.

It’s ironic that the tool itself has accessibility issues? And basic usability issues.

Is the alt text for this image specific enough? Is it relevant / redundant? We must take precaution when writing alt text, to make sure that it’s concise but also informative.

Analysis of (Desktop):

with Bettina Chou

List of Accessibility Issues:

9.7.17 — 
Class Notes
“A lot of accessibility is available, but time-consuming and difficult. Perhaps we should be thinking about how we can make accessibility easier.”

Project 2

NVDA — non-visual …access?

T.B. Ramen??? Emacspeak

Firevox Chromevox

9.14.17 — 
Class Notes


Speech Recognition:

  • pace of speech can alter one’s ability to comprehend
  • John Moschitta


9.19.17 — 
Class Notes

This week: Screenreaders

Q: When blind users type, the document is often unformatted. Is it necessary to format the written content?

Risk-free exploration: two-tap trigger to open application — one-tap to select app and read app name

Remove visual space:

Rotor Window:

  • Voiceover — Ctrl+option+‘u’
  • Shows the separated element categories into tables


Currently, the screenreader would read out the element type then the content. (e.g. hello would be read as “link hello”)

9.21.17 — 
Class Notes

JAWS Screen Reader — wayyy expensive

10.3.17 — 
Class Notes

Magnification: for the low-vision, visually impaired, and blind

  • 285 mi people in the world are visually impaired
  • 39 mi people are blind
  • 246 mi have low vision


AI Squared


Project 5:

  • call css that increases size of text
  • detect whether cursor is on left side of screen or right side of screen, scroll content left or right accordingly

10.5.17 — 
Class Notes

Always consider the assumptions that are being made in demo videos for products — what is that actual process that users need to take in order to use the product? (i.e. finding cereal…people shake the boxes instead of scanning each barcode)

Comparison case

10.10.17 — 
Class Notes

*** Special Guest: Jennison Asuncion (LinkedIn, now Microsoft) ***

  1. Making a product accessible is quite simple — sometimes as simple as just adding an alt text!
  2. Advocating for accessibility — consider why it’s important!

Computer Vision

  • Optical character recognition (OCR)
  • Image labeling and Q&A
  • Dealing with errors

Basic OCR Process

Pre-processing to make OCR more likely to work:

  • Normalize alignment (deskew) — check orientation of text, upside down will not work
  • Despeckle — dust & hair in scans…get rid of things that are not text
  • Binarisation (black and white) —
  • Line removal
  • Layout analysis
  • Line and word detection
  • Normalize aspect ratio and scale

OCR: Pattern Matching to Recognize Characters

Multi-font OCR:

  • uses other features of characters to recognize multiple fonts: lines, loops, line direction, line intersections
  • learning to recognize the font by adapting during the scan

OCR Examples:

  • Mail Sorting in the US Postal Offices
  • Tesseract.js

Image Labeling and Q&A

  • early image labels worked on 30–100 classes (mostly well-framed photographs)
  • big innovation came from — large data sets, systems that could handle them, neural nets, 1000s of labels now
  • can even start to “answer questions”
  • Merie MacLeod

10.24.17 — 
Class Notes: Call with Raja

(Thank you Marie Shaw!!)

Like what you read? Give Lucy Yifan Yu a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.