Accessible Design: Breaking Barriers between Disability and Digital Interfaces Yvonne So, Intuit Oct 2015 #GHC15 2015
Accessible Design: Breaking Barriers between Disability and Digital Interfaces #GHC15
Apr 16, 2017
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
Quick Exercise!
2015
Explore More
Additional resources + follow along:
yvonniks.tumblr.com
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
Four Principles of Accessible Design
2015
Four Principles
Perceivable Operable Understandable Robust
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
Tools and Simulators
2015
Color Oracle
2015
Adobe Photoshop
2015
Color Contrast Analyzer
Download from: http://www.paciellogroup.com/resources/contrastanalyser/
2015
SEE Chrome Extension
2015
VisionSim
2015
Accessibility on Mobile Devices
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
Another Quick Exercise!
2015
Screen Readers
iOS Settings > General > Accessibility > VoiceOver
ANDROID Settings > Accessibility > TalkBack
WINDOWS PHONE Settings > Ease of Access > Narrator
2015
Example Interfaces
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
Alt Text/Description
2015
Logical Navigation
2015
Content Hierarchy
2015
Legibility/Readability
2015
Color Contrast
2015
Audio Alternative
2015
What about digital interfaces beyond the screen?
2015
Battery Charger
2015
Washer/Dryer
2015
How can we work with our teams to keep accessibility in mind?
2015
Daily Scrum
2015
Learn Together
2015
Utilize Networks
2015
Special Bonus Exercise!
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?
2015
Got Feedback?
Rate and Review the session using the
GHC Mobile App
To download visit www.gracehopper.org
Related Documents
