Download Universal Design - CS Course Webpages

Universal Design
CSCE 436
J. Michael Moore
Definitions
“Universal design (often inclusive design) refers to broadspectrum 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
1.
2.
3.
4.
5.
6.
7.
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
• 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]
• Input devices for computers
• Output devices for computers
Accessibility Matrix
Computer
monitor
Keyboard
Mouse
Keyboard
with mouse
3d mouse
Joystick
Game
controller
Microphone
/ voice
Touch
screen
Webcam
Eye tracker
Laser range
finder
Colorblind
palette on
monitor
Screen
Reader
Speakers
Printer
Braille
embosser
Haptic
device
Plotter
printer
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)
Keyboard (desktop)
Red text isn’t visible Text is jamming
on green background together in header
in protanopia check
Mouse (desktop)
Same as above
Same as above
Voice /dictation
(Apple VoiceOver)
Same as above
Same as above
Touchscreen
(Android / Google
Chrome)
Can’t see hover state
on link
Can’t see hover state
on links
Same as above
Braille terminal
Can’t get to hover
state on link.
Can’t get to hover
state on link.
Can’t get to hover
state on link.
Audio / screen
reader (Apple
VoiceOver)
Braille terminal
NA
NA
NA
Can’t get to hover
state on link.
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/