Designing for the real world

Designing for the real world

We all know that accessibility should be baked in all our projects. But what is it even? This topic is so wide that it is sometimes hard to grasp. We’ll take the amazing opportunity to meet on the Global Accessibility Awareness Day to discuss how accessibility blends into inclusive design, and what it means to design for all people.

729edf889ced7863dedba95452272bca?s=128

Hugo Giraudel

May 17, 2018
Tweet

Transcript

  1. Designing for the real world @HugoGiraudel — Accessibility advocate @N26

    (Berlin, Germany) May 17th 2018
  2. What’s accessibility? @HugoGiraudel

  3. A set of standards @HugoGiraudel

  4. Interfaces for everyone @HugoGiraudel

  5. Inclusive design @HugoGiraudel

  6. Not being selfish @HugoGiraudel

  7. Empathy @HugoGiraudel

  8. Impairments disabilities @HugoGiraudel

  9. Visual @HugoGiraudel

  10. Mobility @HugoGiraudel

  11. Cognitive @HugoGiraudel

  12. Hearing @HugoGiraudel

  13. Vocal @HugoGiraudel

  14. Context @HugoGiraudel

  15. Permanent @HugoGiraudel

  16. Temporary @HugoGiraudel

  17. Situational @HugoGiraudel

  18. Visual impairments @HugoGiraudel

  19. Low vision @HugoGiraudel

  20. @HugoGiraudel

  21. Large font size (16-22pt) @HugoGiraudel

  22. Good
 contrast @HugoGiraudel

  23. Allow zooming @HugoGiraudel

  24. Avoid non-scalable content @HugoGiraudel

  25. Combine text, colors & shapes @HugoGiraudel

  26. Color blindness / low contrast @HugoGiraudel

  27. High contrast @HugoGiraudel

  28. The smaller the higher @HugoGiraudel

  29. Test it against standards @HugoGiraudel

  30. @HugoGiraudel

  31. Never color only @HugoGiraudel

  32. Beware color-coded elements @HugoGiraudel

  33. Combine colors with patterns @HugoGiraudel

  34. @HugoGiraudel

  35. Blindness @HugoGiraudel

  36. Meaningful content flow @HugoGiraudel

  37. Keyboard usage @HugoGiraudel

  38. No critical hover states @HugoGiraudel

  39. Alternative text @HugoGiraudel

  40. Try a screen-reader @HugoGiraudel

  41. Mobility impairments @HugoGiraudel

  42. Single hand availability @HugoGiraudel

  43. Upper limb disability @HugoGiraudel

  44. Tendonitis & carpal tunnel syndrome @HugoGiraudel

  45. Hand tremor & Parkinson @HugoGiraudel

  46. How to @HugoGiraudel

  47. CTA at the bottom @HugoGiraudel

  48. @HugoGiraudel

  49. Avoid multi-touch @HugoGiraudel

  50. Avoid repetitive gestures @HugoGiraudel

  51. Limit amount of actions @HugoGiraudel

  52. Be forgiving with accuracy @HugoGiraudel

  53. Test with other hand @HugoGiraudel

  54. Keyboard / screen-reader @HugoGiraudel

  55. Cognitive impairments @HugoGiraudel

  56. Autism @HugoGiraudel

  57. Consistent layouts @HugoGiraudel

  58. Explicit & straight- forward @HugoGiraudel

  59. Avoid acronyms & idioms @HugoGiraudel

  60. Caption videos @HugoGiraudel

  61. Dyslexia @HugoGiraudel

  62. Use a clear font face @HugoGiraudel

  63. ~70 chars / line @HugoGiraudel

  64. ~1.5 line height @HugoGiraudel

  65. Decent contrast @HugoGiraudel

  66. Start-align content @HugoGiraudel

  67. Alternative ways @HugoGiraudel

  68. Vestibular disorder @HugoGiraudel

  69. No parallax @HugoGiraudel

  70. No auto-scroll @HugoGiraudel

  71. Subtle animations @HugoGiraudel

  72. Allow disabling animations @HugoGiraudel

  73. Attention deficit disorder @HugoGiraudel

  74. Consistent user flow @HugoGiraudel

  75. Avoid infinite animations @HugoGiraudel

  76. Anxiety @HugoGiraudel

  77. Avoid time- sensitive @HugoGiraudel

  78. Be clear and supportive @HugoGiraudel

  79. @HugoGiraudel

  80. Allow reviewing @HugoGiraudel

  81. @HugoGiraudel

  82. Post-traumatic stress disorder @HugoGiraudel

  83. Trigger warnings @HugoGiraudel

  84. Review the copy @HugoGiraudel

  85. Diverse group of testers @HugoGiraudel

  86. Leave out
 the jokes @HugoGiraudel

  87. Epilepsy @HugoGiraudel

  88. Avoid flashing content @HugoGiraudel

  89. Animate on user action @HugoGiraudel

  90. Seizure @HugoGiraudel

  91. Hearing impairments @HugoGiraudel

  92. Loud environment @HugoGiraudel

  93. Ear infection @HugoGiraudel

  94. Hard of hearing @HugoGiraudel

  95. Deafness @HugoGiraudel

  96. How to @HugoGiraudel

  97. Alternative ways @HugoGiraudel

  98. Caption videos @HugoGiraudel

  99. No vocal only @HugoGiraudel

  100. Consider stutters @HugoGiraudel

  101. Alternative ways @HugoGiraudel

  102. Wrapping up @HugoGiraudel

  103. Layout & structure @HugoGiraudel

  104. Color & contrast @HugoGiraudel

  105. Stick to common patterns @HugoGiraudel

  106. Usability over aesthetics @HugoGiraudel

  107. Do better everyday @HugoGiraudel

  108. Think about more people @HugoGiraudel

  109. Accept differences @HugoGiraudel

  110. Design for everyone @HugoGiraudel

  111. Thank you! @HugoGiraudel May 17th 2018