Universal Design CSCE 436 J. Michael Moore

Definitions “Universal design (often inclusive design) refers to broad- spectrum ideas meant to produce buildings, products and environments that are inherently accessible to older people, people without disabilities, and people with disabilities.” [Wikipedia]

Definitions “UNIVERSAL DESIGN: The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” THE PRINCIPLES OF UNIVERSAL DESIGN Equitable Use Flexibility in Use Simple and Intuitive Use Perceptible Information Tolerance for Error Low Physical Effort Size and Space for Approach and Use [NC State University, The Center for Universal Design]

Definitions Design for people. Based on definition by Anne Gibson: “Web accessibility means that  people can use the web.”

Disability How many of you have a visual disability? How many of you use an assistive technology for that? Glasses are an assistive technology… Glasses gave people access now we don’t even think about it! Assistive technology can do the same for so many… Not always permanent [WebAIM]

Captioning Designed for Who benefits Deaf / Hard of Hearing English as a second language Noisy environments Others?

Curb Cuts Designed for Who benefits Wheelchairs Strollers Rolling Luggage Others?

Impact Broader than just the “targeted group”

Motivation If altruism isn’t enough… Legal ramifications Rehabilitation Act of 1973, Sections 504 and 508 Americans with Disabilities Act (ADA) Individuals with Disabilities Education Act (IDEA) Telecommunications Act of 1996, Section 255

Change In Perspective Reframe to technology challenge [Gibson] Input devices for computers Output devices for computers

Accessibility Matrix Computer monitor Colorblind palette on monitor Screen Reader Speakers Printer Braille embosser Haptic device Plotter printer Keyboard Mouse Keyboard with mouse 3d mouse Joystick Game controller Microphone / voice Touch screen Webcam Eye tracker Laser range finder

Evaluate Matrix Do these combinations exist? Laser range finder with plotter printer output for web surfing??? If your current system is inaccessible… Data will not show with screen readers!

Other Test Cases Can anything from the matrix be combined with other test cases? Operating System Browser Screen Resolution / Size Minimize test cases

Sample Matrix Color Screen (large breakpoint) Non-color screen / colorblind palette (medium breakpoint) Magnified screen / zoom (small breakpoint) Audio / screen reader (Apple VoiceOver) Braille terminal Keyboard (desktop) Red text isn’t visible on green background in protanopia check Text is jamming together in header Mouse (desktop) Same as above NA Voice /dictation (Apple VoiceOver) Touchscreen (Android / Google Chrome) Can’t see hover state on link Can’t see hover state on links Can’t get to hover state on link.

Personalize Roles Roles and Groups Easy to stereotype Easy to dismiss cases Create hypothetical users and give them a name. Persona [Cooper]

Sample Persona Dan is a manager who has been with the company for 10 years. He gets excellent workplace evaluations and often trains new employees. Dan communicates through email and has to use a manager web app as well as the standard employee web app. Since he move around a lot, he uses a tablet with a touchscreen as his primary computing device. Dan began loosing his vision 6 years ago, but is not completely blind. He zooms his screen to the maximum, but gets headaches if he reads too long. He uses a screen reader to listen to long emails. He carries headphones to avoid disrupting other employees. Normally more complete and descriptive!

Persona Not just some “disabled person” A real person with real needs Uses the accessibility built into the system

Things to Think About Beyond I/O Epilepsy ADHD Reading Disability More Accessibility Issues

Web Design Guidelines Dual output channels Don’t just use a beep, use a visual cue as well. And vice versa. [W3C]

Web Design Guidelines Keyboard input Some can’t use a mouse [W3C]

Web Design Guidelines Alt Text http://www.fiveguys.com/menu.aspx [W3C]

Web Design Guidelines Use HTML structure <H1></H1> List <li></li> Many screen readers allow user to list heading to jump into a document. [W3C]

Web Design Guidelines Descriptive Links Increase text included in link. Click here Click here for more information about web accessibility guidelines. Many screen readers allow user to list links. [W3C]

References Goodman, Anne; Reframing Accessibility for the Web: http://alistapart.com/article/reframing-accessibility-for-the-web The Principles of Universal Design: http://www.ncsu.edu/ncsu/design/cud/about_ud/udprinciplestext.htm Cooper, Alan; About Face 2.0: The Essentials of Interaction Design Curb cut image: "Pram Ramp" by Michael3 - Own work. Licensed under Public Domain via Wikimedia Commons - http://commons.wikimedia.org/wiki/File:Pram_Ramp.jpg#/media/File:Pram_ Ramp.jpg Captioning Image: http://www.gaates.org/aICwebdev/s2y1z2a.php UD Cartoon: http://ginacarson.com/ud/universal-design/ Various Images: http://pixabay.com/