Building Future Interfaces
Next-generation technologies that are useful to ALL people!
05-899 Accessibility by Jeff Bigham
Duration
4 months (August 2017 - December 2017)
Role
Accessibility Designer and Developer. I worked as a designer and a software developer, from research, to the design and development of accessible interfaces for the web. All interfaces were designed and developed as Chrome Extensions.
Summary
Two common and contrasting ways to think about accessibility are the Medical Model and the Social Model.
Medical Model
The Medical Model looks to find ways to fix people.
Social Model
The Social Model approaches accessibility as a social construct.
All applications I developed for this course were based around the social model. I looked as accessibility problems as situational impairments, and attempted to create a universal design, that can be used by ALL people.
The Process
To understand the accessibility issue at hand, rephrase the issue under the constraints of the Social Model of accessibility, design a solution and implement it. Each individual project was intended to address a wide array of issues including visibility, auditory, motor issues, etc.
Understand
Rephrase
Design
Implement
Screen Reader
Understanding the Problem
To design and implement a solution that allows blind or visually impaired users to read texts displayed on the computer screen with a speech synthesizer. The user sends commands by pressing different combinations of keys on the computer keyboard to instruct the speech synthesizer what to say.
Rephrasing the Problem
How might we implement a solution that allows all users to read texts displayed on the computer screen with a speech synthesizer.
Persona Development
Ashley Waltham
Ashley is an Executive at a large law firm. She often travels for work and has to use her laptop at the airport. The problem with working in public is that people sitting near you can easily look at your computer screen. Most of Ashley's e-mails are confidential and she wishes she could hide her screen in such situations.
David Miller
David drives to and and from work. In the evenings, on his way back home he often catches up with what's going on, on Facebook. He realizes it is dangerous to use his phone while driving and wishes there was a way through which he could browse through Facebook without taking his eyes of the road.
Personas - Ashley and David
Interview Feedback
Conducted interviews with a visually impaired user and a domain expert.
"I might not be able to see but I love to express myself and show the world my unique identity. I express myself through basketball!" Visually impaired user
Design Ideas
- Provide users with some degree of control when it comes to the way they want to digest content.
- Personalize the experience for users.
Implementation - Technical Prototype →
Click to try out the Screen Reader MVP
Read Entire Page
Use control+l to navigate forward and control+shift+l to navigate backwards.
Read Headings
Use control+h to navigate forward and control+shift+h to navigate backwards.
Read Focusables
Use control+j to navigate forward and control+shift+j to navigate backwards.
Stop Reading
Use Escape to stop using the Screen Reader.
Screen Reader MVP - Controls
Magnifier
Understanding the Problem
To design and implement a solution that allows visually impaired users to read texts displayed on the computer screen easily.
Rephrasing the Problem
How might we implement a solution that allows all users to read texts displayed on the computer screen easily.
Persona Development
Alisha Khan
Alisha is an Elementary school teacher. When she teaches her kids to read on a computer she wishes she had a tool to help them focus on individual words. The text in children's books are big and clear but not so much on computer screens.
Persona - Alisha
Design Ideas
- Provide users with some degree of control when it comes to the way they want to magnify content.
- Personalize the experience for users.
Implementation - Technical Prototype →
Click to try out the Magnifier MVP
Browser Zoom
Use control+ to zoom in and control- to zoom out. The entire document is manipulated.
Pixel Zoom
Use shift+ to zoom in shift- to zoom out. The scale of each screen pixel is manipulated.
Refactoring Content
Use space to refactor content and Escape to cancel.
Magnifier MVP - Controls
Single Button Input
people with severe physical or cognitive impairment use one or more switches to access computers
Understanding the Problem
To design and implement a solution for people with severe physical or cognitive impairment to access the web with just 1 button.
Rephrasing the Problem
How might we implement a solution that allows all users to browse the web by pressing a single key on the keyboard.
Persona Development
Daniel Harris
Daniel is a stay-at-home dad. He recently started cooking and watches cooking programs on his iPad. In the kitchen, his hands are often wet and he can not use his iPad. Sometimes, when he's carrying his daughter he faces the same problem. In such situations, Daniel wishes there was a way to use an iPad without having to use ones hands.
Persona - Daniel
Implementation - Technical Prototype →
Click to try out the Single Button Input MVP
Scan Line
Use b to start and stop each scan line.
Single Button Input MVP - Controls