Intuit's Yvonne So talks about the principles of Accessible Design at the 2015 Grace Hopper Celebration of Women in Computing Conference.

1. 2015
Accessible Design:
Breaking Barriers between
Disability and Digital Interfaces
Yvonne So, Intuit
Oct 2015
#GHC15
2015

2. 2015
Agenda
• Exercise #1
• What and Why
• Principles of Accessible Design
• Tools and Simulators
• Exercise #2
• Example Interfaces
• Beyond the Screen

3. 2015
Quick Exercise!

4. 2015
Explore More
Additional resources + follow along:
yvonniks.tumblr.com

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

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

7. 2015
Types of Disabilities
• Vision
• Movement
• Thinking
• Remembering
• Learning
http://www.cdc.gov/ncbddd/disabilityandhealth/types.html
• Communicating
• Hearing
• Mental Health
• Social Relationships

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

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

10. 2015
Colorblindness
Colorblindness
affects
approximately
8% of males
and 0.5% of
females.
http://www.colorblindor.com

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

12. 2015
Four Principles of
Accessible Design

13. 2015
Four Principles
Perceivable
Operable
Understandable
Robust

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

15. 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?

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

17. 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?

18. 2015
Tools and Simulators

19. 2015
Color Oracle

20. 2015
Adobe Photoshop

21. 2015
Color Contrast Analyzer
Download from:
http://www.paciellogroup.com/resources/contrastanalyser/

22. 2015
SEE Chrome Extension

23. 2015
VisionSim

24. 2015
Accessibility on Mobile Devices

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

26. 2015
Another Quick Exercise!

27. 2015
Screen Readers
iOS
Settings > General > Accessibility > VoiceOver
ANDROID
Settings > Accessibility > TalkBack
WINDOWS PHONE
Settings > Ease of Access > Narrator

28. 2015
Example Interfaces

29. 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?

30. 2015
Alt Text/Description

31. 2015
Logical Navigation

32. 2015
Content Hierarchy

33. 2015
Legibility/Readability

34. 2015
Color Contrast

35. 2015
Audio Alternative

36. 2015
What about digital interfaces
beyond the screen?

37. 2015
Battery Charger

38. 2015
Washer/Dryer

39. 2015
How can we work with our teams
to keep accessibility in mind?

40. 2015
Daily Scrum

41. 2015
Learn Together

42. 2015
Utilize Networks

43. 2015
Special Bonus Exercise!

44. 2015
Suggest Improvement
Think about a product you work
on or select a product you use,
and suggest an accessibility
improvement.

45. 2015
Need Some Examples?
Yelp
Paper
Google+
LinkedIn
Southwest
Groupon
GogoBot
Spotify
Twitter
Snapchat
Vine
Evernote

46. 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?

47. 2015
Thanks!
Stay in touch:
Yvonne So
Sr. UX Designer, Intuit
yvonneyso@gmail.com
@yvonniks

48. 2015
Got Feedback?
Rate and Review the session using the
GHC Mobile App
To download visit www.gracehopper.org