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  

Thanks!

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

2015  

Got Feedback?

Rate and Review the session using the

GHC Mobile App

To download visit www.gracehopper.org