@DEVONPERSING DESIGNING FOR ACCESSIBILITY
WHAT WE LL COVER Understanding your audience Overview of assistive technologies Accessible visual and user experience design Tools and resources
RETHINKING WHAT DISABILITY MEANS UNDERSTANDING YOUR AUDIENCE
MAJOR USE CASES Visual impairment Mobility and fine motor impairment Hearing impairment Learning and cognitive disabilities Seizure and vestibular disorders
VISUAL IMPAIRMENT
FINE MOTOR IMPAIRMENT
HEARING IMPAIRMENT
LEARNING + COGNITIVE DISABILITIES
SEIZURE + VESTIBULAR DISORDERS
SOFTWARE, HARDWARE, SETTINGS ASSISTIVE TECHNOLOGY OVERVIEW
SCREEN READERS
REFRESHABLE BRAILLE
INPUT DEVICES
OTHER SUPPORTS AND TOOLS
COLOR, STRUCTURE, CONTENT, INTERACTION ACCESSIBLE DESIGN PRINCIPLES
POUR POOR Perceivable Operable Understandable Robust
COLOR CONTRAST
COLOR + (CON)TEXT
SHOWING STATE
CONTENT ORDER + OUTLINE A I. Welcome B C II. II. About Us III. Our Company III. Our Work III. Our Philosophy About You III. Your Brand III. Your Vision
CONTENT ORDER + OUTLINE A I. Your Trip Results III. III. Filter your Results Sort Your Results C B II. Search Results III. Result 1 III. Result 2 III. Etc. D
PROXIMITY
I M A G E A LT E R N AT I V E S
CAPTIONS + TRANSCRIPTS
LABELS + INSTRUCTIONS
NOTIFICATIONS + WARNINGS USER PROFILE NAME* PHONE* ADDRESS* PET TYPE DOG CAT BIRD SAVE
NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE
NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE
NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE
NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* (555) 555-5555 ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE
NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* (555) 555-5555 Please enter a phone number in 555-555-5555 format. ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE
NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* 555-555-5555 Please enter a phone number in 555-555-5555 format. ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE
NOTIFICATIONS + WARNINGS USER PROFILE NAME* PHONE* ADDRESS* Jane Doe 555-555-5555 123 Pet Street PET TYPE DOG CAT BIRD SAVE
NOTIFICATIONS + WARNINGS USER PROFILE NAME* PHONE* ADDRESS* Jane Doe 555-555-5555 123 Pet Street PET TYPE DOG CAT BIRD SAVE CHANGES SAVED
CONSISTENT LOOK + FEEL
How do I convince my clients that they want an accessible site? YOU (HOPEFULLY)
UNIVERSAL DESIGN
MOBILE-FIRST DESIGN Content is ordered by importance mobile Complex processes are broken down into digestible pieces Flexible layout relies on CSS a11y Touch targets are large and obvious/friendly
TESTING TOOLS, GUIDELINES, AND TECHNIQUES TOOLS + RESOURCES
TESTING COLOR Contrast Ratio browser tool for color contrast Color Oracle desktop tool for color blindness Photoshop proofing for color blindness
CAPTIONS + TRANSCRIPTS YouTube captions and transcripts Vimeo captions and transcripts
OSX + IOS DOCUMENTATION Apple accessibility settings and supports ios app accessibility guidelines Using VoiceOver on OSX and ios
GUIDELINES + SPECIFICATIONS WCAG 2.0 for accessible UX and development a11ytips blog for WCAG in plainer language WAI-ARIA for building complex, custom widgets
YOU VE BEEN VERY KIND THANK YOU!
PHOTO CREDITS Title slide What we ll cover Who is disabled? Kenguru Major use cases Visual impairment Fine motor impairment Hearing impairment Learning and cognitive disabilities Seizure and vestibular disorders Screen readers Refreshable braille Input devices Color contrast Color and (con)text Showing state Proximity Image alternatives Captions and transcripts Labels and instructions Consistent look and feel Universal design Thank you slide