Universal Design 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]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 1.Equitable Use 2.Flexibility in Use 3.Simple and Intuitive Use 4.Perceptible Information 5.Tolerance for Error 6.Low Physical Effort 7.Size and Space for Approach and Use [NC State University, The Center for Universal Design]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]WebAIM

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

Curb Cuts Designed for Wheelchairs Who benefits 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]Gibson Input devices for computers Output devices for computers

Accessibility Matrix Computer monitor Colorblind palette on monitor Screen Reader SpeakersPrinterBraille 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 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) Same as above Touchscreen (Android / Google Chrome) Can’t see hover state on link Can’t see hover state on links Same as aboveNA Braille terminalCan’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 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 s. 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]W3C

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

Web Design Guidelines Alt Text [W3C]W3C

Web Design Guidelines Use HTML structure List Many screen readers allow user to list heading to jump into a document. [W3C]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]W3C

END

References Goodman, Anne; Reframing Accessibility for the Web: The Principles of Universal Design: 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 - Ramp.jpg Ramp.jpg Captioning Image: UD Cartoon: Various Images: