d e s i g n i n g f o r a c c e s s i b i l i t y w h at
play

D E S I G N I N G F O R A C C E S S I B I L I T Y W H AT W E L L - PowerPoint PPT Presentation

Jul 08, 2023 •388 likes •861 views

@ D E V O N P E R S I N G D E S I G N I N G F O R A C C E S S I B I L I T Y W H AT W E L L C O V E R Understanding your audience Overview of assistive technologies Accessible visual and user experience design Tools

  1. @ D E V O N P E R S I N G D E S I G N I N G F O R A C C E S S I B I L I T Y

  2. W H AT W E ’ L L C O V E R • Understanding your audience • Overview of assistive technologies • Accessible visual and user experience design • Tools and resources

  3. R E T H I N K I N G W H A T D I S A B I L I T Y M E A N S U N D E R S TA N D I N G Y O U R A U D I E N C E

  6. M A J O R U S E C A S E S • Visual impairment • Mobility and fine motor impairment • Hearing impairment • Learning and cognitive disabilities • Seizure and vestibular disorders

  7. V I S U A L I M PA I R M E N T

  8. F I N E M O T O R I M PA I R M E N T

  9. H E A R I N G I M PA I R M E N T

  10. L E A R N I N G + C O G N I T I V E D I S A B I L I T I E S

  11. S E I Z U R E + V E S T I B U L A R D I S O R D E R S

  12. S O F T WA R E , H A R D WA R E , S E T T I N G S A S S I S T I V E T E C H N O L O G Y O V E R V I E W

  13. S C R E E N R E A D E R S

  14. R E F R E S H A B L E B R A I L L E

  15. I N P U T D E V I C E S

  16. O T H E R S U P P O RT S A N D T O O L S

  17. C O L O R , S T R U C T U R E , C O N T E N T, I N T E R A C T I O N A C C E S S I B L E D E S I G N P R I N C I P L E S

  18. P O U R ≠ P O O R Perceivable Operable Understandable Robust

  19. C O L O R C O N T R A S T

  20. C O L O R + ( C O N ) T E X T

  21. S H O W I N G S TAT E

  22. C O N T E N T O R D E R + O U T L I N E A I. Welcome II. About Us III. Our Company III. Our Work B III. Our Philosophy II. About You III. Your Brand III. Your Vision C

  23. C O N T E N T O R D E R + O U T L I N E A I. Your Trip Results III. Filter your Results III. Sort Your Results II. Search Results B C III. Result 1 III. Result 2 III. Etc. D

  24. P R O X I M I T Y

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

  26. C A P T I O N S + T R A N S C R I P T S

  27. L A B E L S + I N S T R U C T I O N S

  28. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E N A M E * P H O N E * A D D R E S S * P E T T Y P E D O G C AT B I R D S AV E

  29. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E Jane Doe N A M E * P H O N E * 123 Pet Street A D D R E S S * P E T T Y P E D O G C AT B I R D ✓ S AV E

  30. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E Jane Doe N A M E * P H O N E * 123 Pet Street A D D R E S S * P E T T Y P E D O G C AT B I R D ✓ S AV E

  31. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E Jane Doe N A M E * P H O N E * P H O N E * 123 Pet Street A D D R E S S * P E T T Y P E D O G C AT B I R D ✓ S AV E

  32. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E Jane Doe N A M E * (555) 555-5555 P H O N E * P H O N E * 123 Pet Street A D D R E S S * P E T T Y P E D O G C AT B I R D ✓ S AV E

  33. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E Jane Doe N A M E * (555) 555-5555 P H O N E * P H O N E * Please enter a phone number in 555-555-5555 format. 123 Pet Street A D D R E S S * P E T T Y P E D O G C AT B I R D ✓ S AV E

  34. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E Jane Doe N A M E * 555-555-5555 P H O N E * P H O N E * Please enter a phone number in 555-555-5555 format. 123 Pet Street A D D R E S S * P E T T Y P E D O G C AT B I R D ✓ S AV E

  35. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E Jane Doe N A M E * 555-555-5555 P H O N E * 123 Pet Street A D D R E S S * P E T T Y P E D O G C AT B I R D ✓ S AV E

  36. N O T I F I C AT I O N S + WA R N I N G S U S E R P R O F I L E Jane Doe N A M E * 555-555-5555 P H O N E * 123 Pet Street A D D R E S S * P E T T Y P E D O G C AT B I R D ✓ ✓ C H A N G E S S AV E D S AV E

  37. C O N S I S T E N T L O O K + F E E L

  38. “How do I convince my clients that they want an accessible site?” – Y O U ( H O P E F U L LY )

  39. U N I V E R S A L D E S I G N

  40. M O B I L E - F I R S T D E S I G N Content is ordered by importance Complex processes are broken mobile a11y down into digestible pieces Flexible layout relies on CSS Touch targets are large and obvious/friendly

  41. T E S T I N G T O O L S , G U I D E L I N E S , A N D T E C H N I Q U E S T O O L S + R E S O U R C E S

  42. T E S T I N G C O L O R • Contrast Ratio browser tool for color contrast • Color Oracle desktop tool for color blindness • Photoshop proofing for color blindness

  43. C A P T I O N S + T R A N S C R I P T S • YouTube captions and transcripts • Vimeo captions and transcripts

  44. O S X + I O S D O C U M E N TAT I O N • Apple accessibility settings and supports • iOS app accessibility guidelines • Using VoiceOver on OSX and iOS

  45. G U I D E L I N E S + S P E C I F I C AT I O N S • WCAG 2.0 for accessible UX and development • a11yTips blog for WCAG in plainer language • WAI-ARIA for building complex, custom widgets

  46. Y O U ’ V E B E E N V E RY K I N D T H A N K Y O U !

  47. P H O T O C R E D I T S • Title slide • Refreshable braille • Input devices • What we’ll cover • Color contrast • “Who is disabled?” • Color and (con)text • Kenguru • Showing state • Major use cases • Proximity • Visual impairment • Image alternatives • Fine motor impairment • Captions and transcripts • Hearing impairment • Labels and instructions • Learning and cognitive disabilities • Consistent look and feel • Seizure and vestibular disorders • Universal design • Screen readers • Thank you slide

Recommend

More recommend