@DEVONPERSING DESIGNING FOR ACCESSIBILITY

Transcription

1 @DEVONPERSING DESIGNING FOR ACCESSIBILITY

2 WHAT WE LL COVER Understanding your audience Overview of assistive technologies Accessible visual and user experience design Tools and resources

3 RETHINKING WHAT DISABILITY MEANS UNDERSTANDING YOUR AUDIENCE

4

5

6 MAJOR USE CASES Visual impairment Mobility and fine motor impairment Hearing impairment Learning and cognitive disabilities Seizure and vestibular disorders

7 VISUAL IMPAIRMENT

8 FINE MOTOR IMPAIRMENT

9 HEARING IMPAIRMENT

10 LEARNING + COGNITIVE DISABILITIES

11 SEIZURE + VESTIBULAR DISORDERS

12 SOFTWARE, HARDWARE, SETTINGS ASSISTIVE TECHNOLOGY OVERVIEW

13 SCREEN READERS

14 REFRESHABLE BRAILLE

15 INPUT DEVICES

16 OTHER SUPPORTS AND TOOLS

17 COLOR, STRUCTURE, CONTENT, INTERACTION ACCESSIBLE DESIGN PRINCIPLES

18 POUR POOR Perceivable Operable Understandable Robust

19 COLOR CONTRAST

20 COLOR + (CON)TEXT

21 SHOWING STATE

22 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

23 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

24 PROXIMITY

25 I M A G E A LT E R N AT I V E S

26 CAPTIONS + TRANSCRIPTS

27 LABELS + INSTRUCTIONS

28 NOTIFICATIONS + WARNINGS USER PROFILE NAME* PHONE* ADDRESS* PET TYPE DOG CAT BIRD SAVE

29 NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE

30 NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE

31 NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE

32 NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* (555) ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE

33 NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* (555) Please enter a phone number in format. ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE

34 NOTIFICATIONS + WARNINGS USER PROFILE NAME* Jane Doe PHONE* Please enter a phone number in format. ADDRESS* 123 Pet Street PET TYPE DOG CAT BIRD SAVE

35 NOTIFICATIONS + WARNINGS USER PROFILE NAME* PHONE* ADDRESS* Jane Doe Pet Street PET TYPE DOG CAT BIRD SAVE

36 NOTIFICATIONS + WARNINGS USER PROFILE NAME* PHONE* ADDRESS* Jane Doe Pet Street PET TYPE DOG CAT BIRD SAVE CHANGES SAVED

37 CONSISTENT LOOK + FEEL

38 How do I convince my clients that they want an accessible site? YOU (HOPEFULLY)

39 UNIVERSAL DESIGN

40 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

41 TESTING TOOLS, GUIDELINES, AND TECHNIQUES TOOLS + RESOURCES

42 TESTING COLOR Contrast Ratio browser tool for color contrast Color Oracle desktop tool for color blindness Photoshop proofing for color blindness

43 CAPTIONS + TRANSCRIPTS YouTube captions and transcripts Vimeo captions and transcripts

44 OSX + IOS DOCUMENTATION Apple accessibility settings and supports ios app accessibility guidelines Using VoiceOver on OSX and ios

45 GUIDELINES + SPECIFICATIONS WCAG 2.0 for accessible UX and development a11ytips blog for WCAG in plainer language WAI-ARIA for building complex, custom widgets

46 YOU VE BEEN VERY KIND THANK YOU!

47 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