Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beautifully accessible

83 views

Published on

Are accessible web applications and beautiful interface design mutually exclusive? NO WAY! Trying to keep up with the trends set by cutting-edge apps and websites can lead us to make design decisions that exclude users. When we embrace accessibility as a design requirement, everyone wins.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Beautifully accessible

  1. 1. Beautifully Accessible Levi McGranahan Design System Lead User Experience Office, Indiana University @levimcg lmcgrana@iu.edu
  2. 2. The Contract rivet.iu.edu
  3. 3. The Contract rivet.iu.edu
  4. 4. rivet.iu.edu
  5. 5. Accessibility???
  6. 6. https://commons.wikimedia.org/wiki/File:Monroe_County_Courthouse_in_Bloomington_from_west-southwest.jpg
  7. 7. https://www.ronhazelton.com/blog/the_house_that_barns_built
  8. 8. https://youtu.be/4-pmKf7lcNk
  9. 9. https://youtu.be/4-pmKf7lcNk
  10. 10. https://www.idsnews.com/article/2018/08/brewers-vendors-and-patrons-celebrate-20-years-of-upland-brewing
  11. 11. We help people Find,Create,& Share Information.
  12. 12. https://www.digitalinformationworld.com/2018/10/tim-berners-lee-protect-web-data.html
  13. 13. https://io9.gizmodo.com/you-may-never-see-a-better-video-than-mad-max-fury-roa-1786534726
  14. 14. W3C WAI Web Accessibility Initiative https://www.w3.org/WAI/
  15. 15. WCAG Web Content Accessibility Guidelines https://www.w3.org/TR/WCAG21/
  16. 16. ARIA Accessible Rich Internet Applications https://www.w3.org/TR/wai-aria/
  17. 17. We have no building codes.
  18. 18. Innovate! 🚀
  19. 19.
  20. 20. It’s up to us. 🤞
  21. 21. User Human Experience
  22. 22. 12.5% https://factfinder.census.gov/
  23. 23. https://factfinder.census.gov/ 40 Million
  24. 24. Multitasking
  25. 25. Multitasking Sleep deprivation
  26. 26. Multitasking Sleep deprivation Stress
  27. 27. Multitasking Sleep deprivation Stress Depression
  28. 28. Multitasking Sleep deprivation Stress Depression
  29. 29. “People don’t _____”
  30. 30. “People don’t need that focus indicator.It’s ugly, get rid of it.”
  31. 31. “People don’t navigate with their keyboard only.”
  32. 32. “People don’t need to do that from their phone.”
  33. 33. This is how exclusion happens.
  34. 34. Designers, we started this.
  35. 35. UX / Interaction Designers UI / Visual Designers Product Owners Project Managers Developers
  36. 36. Greatest Hits
  37. 37. Greatest Hits Of Exclusionary Design
  38. 38. Links
  39. 39. 🤮
  40. 40. *:focus { outline: none; }
  41. 41. *:focus-visible { outline: 3px dotted navy; outline-offset: 3px; } https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
  42. 42. Contrast,Space, & Typography
  43. 43. “Typography is 90% of design the other 90% is space” – Jefferey Zeldman
  44. 44. Labels
  45. 45. 🚫
  46. 46. Placeholder attribute • No screen reader support • Contrast issues • They disappear! 👻
  47. 47. Labels • First class screen reader support • Able to style (contrast) • Always visible
  48. 48. Microcopy
  49. 49. • Button text • Link text • Hints,Tips,Explainers • Error states
  50. 50. “Read more”
  51. 51. “Read more” “See more”
  52. 52. “Read more” “See more” “More”
  53. 53. “Read more” “See more” “More” “Above”
  54. 54. “Read more” “See more” “More” “Above” “Below”
  55. 55. “Read more” “See more” “More” “Above” “Below” “To the left”
  56. 56. “Read more” “See more” “More” “Above” “Below” “To the left” “To the right”
  57. 57. Icons
  58. 58. Save PrintOpen Delete
  59. 59. Unnecessary complexity
  60. 60. Custom controls
  61. 61. Checklist • Focusable • Keyboard operable • Touch operable • Expected operation • Clear indication of focus • Label * • Role * • States and properties * • Color contrast https://developer.paciellogroup.com/blog/2014/09/web-components-punch-list/ *Exposed to Accessibility APIs
  62. 62. ARIA Authoring Practices w3c.github.io/aria-practices/
  63. 63. Obfuscation
  64. 64. Tooltips Accordions 🔥Modals🔥
  65. 65. https://modalzmodalzmodalz.com/
  66. 66. “The less an interface requires of its users,the more accessible it is.” – Alice Boxhall
  67. 67. We all have have good intentions.
  68. 68. We get to design the future.
  69. 69. You have more power than you think.
  70. 70. You’re doing good work.
  71. 71. Beautifully Accessible Levi McGranahan Design System Lead User Experience Office, Indiana University @levimcg lmcgrana@iu.edu

×