Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Kitty Giraudel

May 17, 2018
Tweet

More Decks by Kitty Giraudel

Other Decks in Programming

Transcript

  1. Designing
    for the real world
    @HugoGiraudel — Accessibility advocate @N26 (Berlin, Germany)
    May 17th 2018

    View full-size slide

  2. What’s
    accessibility?
    @HugoGiraudel

    View full-size slide

  3. A set of
    standards
    @HugoGiraudel

    View full-size slide

  4. Interfaces for
    everyone
    @HugoGiraudel

    View full-size slide

  5. Inclusive
    design
    @HugoGiraudel

    View full-size slide

  6. Not being
    selfish
    @HugoGiraudel

    View full-size slide

  7. Empathy
    @HugoGiraudel

    View full-size slide

  8. Impairments
    disabilities
    @HugoGiraudel

    View full-size slide

  9. Visual
    @HugoGiraudel

    View full-size slide

  10. Mobility
    @HugoGiraudel

    View full-size slide

  11. Cognitive
    @HugoGiraudel

    View full-size slide

  12. Hearing
    @HugoGiraudel

    View full-size slide

  13. Vocal
    @HugoGiraudel

    View full-size slide

  14. Context
    @HugoGiraudel

    View full-size slide

  15. Permanent
    @HugoGiraudel

    View full-size slide

  16. Temporary
    @HugoGiraudel

    View full-size slide

  17. Situational
    @HugoGiraudel

    View full-size slide

  18. Visual
    impairments
    @HugoGiraudel

    View full-size slide

  19. Low vision
    @HugoGiraudel

    View full-size slide

  20. @HugoGiraudel

    View full-size slide

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

    View full-size slide

  22. Good

    contrast
    @HugoGiraudel

    View full-size slide

  23. Allow
    zooming
    @HugoGiraudel

    View full-size slide

  24. Avoid
    non-scalable
    content
    @HugoGiraudel

    View full-size slide

  25. Combine
    text, colors
    & shapes
    @HugoGiraudel

    View full-size slide

  26. Color
    blindness /
    low contrast
    @HugoGiraudel

    View full-size slide

  27. High contrast
    @HugoGiraudel

    View full-size slide

  28. The smaller
    the higher
    @HugoGiraudel

    View full-size slide

  29. Test it against
    standards
    @HugoGiraudel

    View full-size slide

  30. @HugoGiraudel

    View full-size slide

  31. Never
    color only
    @HugoGiraudel

    View full-size slide

  32. Beware
    color-coded
    elements
    @HugoGiraudel

    View full-size slide

  33. Combine
    colors with
    patterns
    @HugoGiraudel

    View full-size slide

  34. @HugoGiraudel

    View full-size slide

  35. Blindness
    @HugoGiraudel

    View full-size slide

  36. Meaningful
    content flow
    @HugoGiraudel

    View full-size slide

  37. Keyboard
    usage
    @HugoGiraudel

    View full-size slide

  38. No critical
    hover states
    @HugoGiraudel

    View full-size slide

  39. Alternative
    text
    @HugoGiraudel

    View full-size slide

  40. Try a
    screen-reader
    @HugoGiraudel

    View full-size slide

  41. Mobility
    impairments
    @HugoGiraudel

    View full-size slide

  42. Single hand
    availability
    @HugoGiraudel

    View full-size slide

  43. Upper limb
    disability
    @HugoGiraudel

    View full-size slide

  44. Tendonitis &
    carpal tunnel
    syndrome
    @HugoGiraudel

    View full-size slide

  45. Hand tremor
    & Parkinson
    @HugoGiraudel

    View full-size slide

  46. How to
    @HugoGiraudel

    View full-size slide

  47. CTA at the
    bottom
    @HugoGiraudel

    View full-size slide

  48. @HugoGiraudel

    View full-size slide

  49. Avoid
    multi-touch
    @HugoGiraudel

    View full-size slide

  50. Avoid
    repetitive
    gestures
    @HugoGiraudel

    View full-size slide

  51. Limit amount
    of actions
    @HugoGiraudel

    View full-size slide

  52. Be forgiving
    with accuracy
    @HugoGiraudel

    View full-size slide

  53. Test with
    other hand
    @HugoGiraudel

    View full-size slide

  54. Keyboard /
    screen-reader
    @HugoGiraudel

    View full-size slide

  55. Cognitive
    impairments
    @HugoGiraudel

    View full-size slide

  56. Autism
    @HugoGiraudel

    View full-size slide

  57. Consistent
    layouts
    @HugoGiraudel

    View full-size slide

  58. Explicit &
    straight-
    forward
    @HugoGiraudel

    View full-size slide

  59. Avoid
    acronyms &
    idioms
    @HugoGiraudel

    View full-size slide

  60. Caption
    videos
    @HugoGiraudel

    View full-size slide

  61. Dyslexia
    @HugoGiraudel

    View full-size slide

  62. Use a clear
    font face
    @HugoGiraudel

    View full-size slide

  63. ~70 chars /
    line
    @HugoGiraudel

    View full-size slide

  64. ~1.5 line
    height
    @HugoGiraudel

    View full-size slide

  65. Decent
    contrast
    @HugoGiraudel

    View full-size slide

  66. Start-align
    content
    @HugoGiraudel

    View full-size slide

  67. Alternative
    ways
    @HugoGiraudel

    View full-size slide

  68. Vestibular
    disorder
    @HugoGiraudel

    View full-size slide

  69. No parallax
    @HugoGiraudel

    View full-size slide

  70. No auto-scroll
    @HugoGiraudel

    View full-size slide

  71. Subtle
    animations
    @HugoGiraudel

    View full-size slide

  72. Allow
    disabling
    animations
    @HugoGiraudel

    View full-size slide

  73. Attention
    deficit
    disorder
    @HugoGiraudel

    View full-size slide

  74. Consistent
    user flow
    @HugoGiraudel

    View full-size slide

  75. Avoid infinite
    animations
    @HugoGiraudel

    View full-size slide

  76. Anxiety
    @HugoGiraudel

    View full-size slide

  77. Avoid time-
    sensitive
    @HugoGiraudel

    View full-size slide

  78. Be clear and
    supportive
    @HugoGiraudel

    View full-size slide

  79. @HugoGiraudel

    View full-size slide

  80. Allow
    reviewing
    @HugoGiraudel

    View full-size slide

  81. @HugoGiraudel

    View full-size slide

  82. Post-traumatic
    stress disorder
    @HugoGiraudel

    View full-size slide

  83. Trigger
    warnings
    @HugoGiraudel

    View full-size slide

  84. Review
    the copy
    @HugoGiraudel

    View full-size slide

  85. Diverse group
    of testers
    @HugoGiraudel

    View full-size slide

  86. Leave out

    the jokes
    @HugoGiraudel

    View full-size slide

  87. Epilepsy
    @HugoGiraudel

    View full-size slide

  88. Avoid flashing
    content
    @HugoGiraudel

    View full-size slide

  89. Animate on
    user action
    @HugoGiraudel

    View full-size slide

  90. Seizure
    @HugoGiraudel

    View full-size slide

  91. Hearing
    impairments
    @HugoGiraudel

    View full-size slide

  92. Loud
    environment
    @HugoGiraudel

    View full-size slide

  93. Ear infection
    @HugoGiraudel

    View full-size slide

  94. Hard of
    hearing
    @HugoGiraudel

    View full-size slide

  95. Deafness
    @HugoGiraudel

    View full-size slide

  96. How to
    @HugoGiraudel

    View full-size slide

  97. Alternative
    ways
    @HugoGiraudel

    View full-size slide

  98. Caption
    videos
    @HugoGiraudel

    View full-size slide

  99. No vocal only
    @HugoGiraudel

    View full-size slide

  100. Consider
    stutters
    @HugoGiraudel

    View full-size slide

  101. Alternative
    ways
    @HugoGiraudel

    View full-size slide

  102. Wrapping up
    @HugoGiraudel

    View full-size slide

  103. Layout &
    structure
    @HugoGiraudel

    View full-size slide

  104. Color &
    contrast
    @HugoGiraudel

    View full-size slide

  105. Stick to
    common
    patterns
    @HugoGiraudel

    View full-size slide

  106. Usability over
    aesthetics
    @HugoGiraudel

    View full-size slide

  107. Do better
    everyday
    @HugoGiraudel

    View full-size slide

  108. Think about
    more people
    @HugoGiraudel

    View full-size slide

  109. Accept
    differences
    @HugoGiraudel

    View full-size slide

  110. Design for
    everyone
    @HugoGiraudel

    View full-size slide

  111. Thank you!
    @HugoGiraudel
    May 17th 2018

    View full-size slide