Accessibility Design in HCI

Fall 2017. Instructors: Jeff Bigham

Class/reading notes and reflections. Normal office hours are from 2–5pm on Thursdays in 407 S. Craig (second floor, in the back).

8.29 | Introduction to Accessibility

Why this exists and examples

Interesting Examples

• Ray Kurzweil computer scientist and futurist. Involved in fields such as optical character recognition (OCR), text-to-speech synthesis, speech recognition technology, and electronic keyboard instruments. Worked on one of the first text-to-speech readers.
• Ishikawa Oku Laboratory on smart architecture and intelligence

8.31 | The Web

How the internet is built, how accessibility interacts with this architecture, and design

• Patrick, the TA does “chairables” so wearables but for wheelchairs

How internet/web is built

• Before easy access to computer information you were restricted to what was physically available at your local library (not everything was braille, large print, or audio book)
• Internet was initially defense project as alternative form of communication
• IETF (internet engineering task force): internet protocol standards. Helps with IP to help find computers/send data between computers. Running out of numbers ’cause people didn’t think there’d be so many computers when internet first started.
• ICANN (internet corporation for assigned names and numbers): decides top-level domain names
• W3c (world wide web consortium): web standards
• Internet started with text files (.html and .txt) and evolved to other media (.gif .jpg .mov .exe)

Disability feels like “loss of independence”; accessibility ignites innovation

How accessibility interacts with this architecture

• Content: HTML
• Presentation: web browser and CSS
• Behavior: Javascript and default behavior of html elements

How do you make these accessible?

• Early web was pretty accessible because most people just used text, but now there are many graphics and interactive elements. Screen readers may used to just emphasize bolded words
• Lynx text web browser
• A challenge now is that some people now make design decision to make typography all bold. → Would screen reader just be yelling the whole time?
• Web Content Accessibility Guidelines (WCAG) (1999) many related to usability.
• WAI-ARIA, Web Accessibility Initiative (2014) for rich internet applications. Web is v different now especially ’cause of javascript

Making Web-Based Activity Accessible

Jeff took a picture of our class, put them on a google board and asked us all to label each other’s names. Thoughts on this process:

• How would a blind person begin to use this? Misaligned faces, how to match labels to faces, what faces look like.
• Colors are difficult to see because of background inconsistency
• Overlapping cursors makes it hard to control your text input
• Interactive components encourages collaboration

9.5 | Web Content Accessibility

History of WCAG, implementation basics, useful tools to apply WCAG, practice in-class

History

• Americans with disabilities act (ADA)
• Web is often an extension of a physical entity. Ex: Target’s site allowed customers to get in-store discounts but their website was not accessible so they were sued.
• As soon as visual content made it onto the web, accessibility became a concern
• WCAG 2 allows more flexibility within defined parameters, more flexible than WCAG. Ex: instead of saying “don’t flash at all”, it discusses which conditions and methods flashing would work.
• Large companies that working with accessibility: Paciello Group, Dequeue, SSB BART
• Independent consultants: fill gaps, mostly target smaller companies and unusual cases
• In-house teams: nearly all tech companies have these now

Tools

ironic how this tool is not user-friendly ;____; how do you interpret this??

• http://wave.webaim.org/ can be used to inspect existing websites and reveal inefficiencies
• Green: exists, good. Yellow: questionable. Red: BAD
• Most commonly misused alt text is “empty string” for an image that’s purely decorative, or “spacer image”
• Can also right+click → inspect to look at image descriptions
• An analogue way to test is: “Can I use this page if I can’t use a mouse?” Load a page and start tabbing through it.

Activity— Looking at existing sites

• Reddit: all images lack alt text, but it’s user generated content. How important would it be and does Reddit even have an option to add alt text? Social media in general have this problems.
• Amazon: different amounts of problem between signed in/not signed in homepage.

9.7 | Class

Discussing examples of accessibility we found and reviewing first project

Interesting Examples

• Sticky Keys: use keyboard with one hand and reduce repetitive strain injury
• Hands-free CUI and IoT: accessible for those with mobility disabilities
• Maptic: analog tactile watch for vision impaired (so pretty~)
• Video Captions: helpful for situational “impairment” (ex: in noisy environment, non-native speaker)
• Video games color-blind mode: High contrast/saturation does help but isn’t aesthetically pleasing
• Audio graphing calculator: Collaboration between able/disabled people, making higher-level education accessible

Interesting: people often think accessibility features are a bug and aren’t sure how to exit the mode

• iOS Home Button Opening: many time-based interactions require accessibility; can cause big problems.
• Braille Music! Acclaimed musicians like Stevie Wonder tend towards Jazz because of its improvising nature → easy to pick up by ears

• Netflix audio descriptions: Dare Devil is a blind superhero, so when they released Dare Devil, they also released this feature
• Audio assists: Conundrum when using in outside because you don’t want to interfere with them hearing their surroundings
• ^Bone Conduction Headphone: sends vibrations through cheekbones → inner ear

This technology currently only works for people with partial hearing loss, not total

9.19 | Screen Readers

• Formatting emails and documents are purely visual, so visually impaired people might not immediately think to do so.
• People with disabilities are using tools the ways we would if they worked better
• How do we create a really good audio interface for something? How do we create something everyone else uses accessible? However, often simply making an audio version is not optimal.
• Screen readers are currently very difficult to learn because you need to memorize a huge number of keyboard shortcuts and gestures

Activity — One person is screen reader, the other is vision impaired user

• tabbing through everything and reading everything is tedious; I just made the decision of what he needed and directed his track pad to click on it. How would this kind of “smart” technology work in computers?