1. Universal Design
CSCE 436
J. Michael Moore

2. 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]

3. 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]

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

5. 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]

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

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

8. Impact
Broader than just the “targeted group”

9. 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

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

11. 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

12. 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!

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

14. 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.

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

16. 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!

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

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

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

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

21. Web Design Guidelines
Alt Text
[W3C]

22. 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]

23. 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]

24. 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
Captioning Image:
UD Cartoon:
Various Images: