accessible design: breaking barriers between disability and digital interfaces #ghc15
TRANSCRIPT
2015
Accessible Design:Breaking Barriers between Disability and Digital Interfaces
Yvonne So, Intuit Oct 2015
#GHC15
2015
2015
Agenda
• Exercise #1 • What and Why • Principles of Accessible Design • Tools and Simulators • Exercise #2 • Example Interfaces • Beyond the Screen
2015
What is Accessibility?
Accessibility
“...the degree to which a product, service, or environment is available to as many people as possible.”
http://www.brainline.org/landing_pages/categories/accessibility.html
2015
What is Disability?
Disability
“...physical or mental impairment that substantially limits one or more major life activity.”
https://adata.org/faq/what-definition-disability-under-ada
2015
Types of Disabilities
• Vision • Movement • Thinking • Remembering • Learning
http://www.cdc.gov/ncbddd/disabilityandhealth/types.html
• Communicating • Hearing • Mental Health • Social Relationships
2015
1 out of 7
The World Health Organization reports that nearly one out of seven of the world’s population has some form of disability.
2015
More Statistics 1.3 million Americans have legal blindness More than 3 million Americans have low vision One in six Americans (17%, 16.5 million), 45 years and older, have some form of vision impairment even when wearing glasses or contact lenses Vision impairment increases with age (21%, age 65 and older) http://www.gesta.org/estudos/statistics0402.pdf
2015
Colorblindness
Colorblindness affects approximately 8% of males and 0.5% of females.
http://www.colorblindor.com
2015
U.S. Regulations
1990: Americans with Disabilities Act (ADA) 1998: Section 508 1999: WCAG 1.0 2008: WCAG 2.0 2010: 21st Century Communications and Video Accessibility Act (CCVA)
2015
Perceivable
Provide alternative text on images Captions or transcripts for video and audio Good color contrast Avoid marquees and movement
Title
11:27 AM
BG IMAGE WITH HIGH CONTRAST TEXT
BG IMAGE WITH LOW CONTRAST TEXT
BG IMAGE OF VIDEO
ALT TEXT:"Search"
ALT TEXT:"Video of Swimming Sharks"
ALT TEXT:"Photo of
sharks eating turtles"
ALT TEXT:"Photo of
turtles fighting monsters"
ALT TEXT:"Main Menu
Button"
Can the user hear or see the information?
2015
Operable
Provide access to navigation and controls through alternative means Don’t make buttons too tiny Make sure user can get back to the home screen
Are any of the UI elements interactive? Can the user navigate?
2015
Understandable
Content is clearly and logically presented Wording should be simple and concise Text should be legible and readable
Title
11:27 AM
This is some body text that I’m typing to illustrate a typical sign
up screen or similar home screen. Is text understandable? Is this readable? Is this legible?
PRIMARY CALL TO ACTION
SECONDARY CALL TO ACTION
THIS IS A HEADLINE!
Is the information presented easy to understand or cause more confusion?
2015
Robust
Semantic markups Validate code Responsive design Customize or adapt for different devices
Can the interface and content be easily interpreted by customized interfaces?
2015
Color Contrast Analyzer
Download from: http://www.paciellogroup.com/resources/contrastanalyser/
2015
Common Built-in Features
Text-to-speech
Pinch and zoom screen
Text magnification & highlight
Alternate gestures
Custom ring and vibration patterns
Color/brightness contrast
Haptic feedback
2015
Screen Readers
iOS Settings > General > Accessibility > VoiceOver
ANDROID Settings > Accessibility > TalkBack
WINDOWS PHONE Settings > Ease of Access > Narrator
2015
Questions to Ask PERCEIVABLE Can the user see or hear the information presented? OPERABLE Can the user interact with controls? Can the user navigate? Is the hierarchy of content logical? UNDERSTANDABLE Is the information presented clear and easy to understand? ROBUST Can the interface and content be interpreted on different devices or platforms?
2015
Suggest Improvement
Think about a product you work on or select a product you use, and suggest an accessibility improvement.
2015
Need Some Examples?
Yelp Paper Google+ LinkedIn Southwest Groupon
GogoBot Spotify Twitter Snapchat Vine Evernote
2015
Assessment
What kinds of pitfalls did you encounter? Based on POUR, what are some recommendations you can think of? Does it work for all audiences? Does it have a good user experience?