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.

Transcript

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

   View Slide

2. What’s
   accessibility?
   @HugoGiraudel
   

   View Slide

3. A set of
   standards
   @HugoGiraudel
   

   View Slide

4. Interfaces for
   everyone
   @HugoGiraudel
   

   View Slide

5. Inclusive
   design
   @HugoGiraudel
   

   View Slide

6. Not being
   selfish
   @HugoGiraudel
   

   View Slide

7. Empathy
   @HugoGiraudel
   

   View Slide

8. Impairments
   disabilities
   @HugoGiraudel
   

   View Slide

9. Visual
   @HugoGiraudel
   

   View Slide

10. Mobility
    @HugoGiraudel
    

    View Slide

11. Cognitive
    @HugoGiraudel
    

    View Slide

12. Hearing
    @HugoGiraudel
    

    View Slide

13. Vocal
    @HugoGiraudel
    

    View Slide

14. Context
    @HugoGiraudel
    

    View Slide

15. Permanent
    @HugoGiraudel
    

    View Slide

16. Temporary
    @HugoGiraudel
    

    View Slide

17. Situational
    @HugoGiraudel
    

    View Slide

18. Visual
    impairments
    @HugoGiraudel
    

    View Slide

19. Low vision
    @HugoGiraudel
    

    View Slide

20. @HugoGiraudel
    

    View Slide

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

    View Slide

22. Good

    contrast
    @HugoGiraudel
    

    View Slide

23. Allow
    zooming
    @HugoGiraudel
    

    View Slide

24. Avoid
    non-scalable
    content
    @HugoGiraudel
    

    View Slide

25. Combine
    text, colors
    & shapes
    @HugoGiraudel
    

    View Slide

26. Color
    blindness /
    low contrast
    @HugoGiraudel
    

    View Slide

27. High contrast
    @HugoGiraudel
    

    View Slide

28. The smaller
    the higher
    @HugoGiraudel
    

    View Slide

29. Test it against
    standards
    @HugoGiraudel
    

    View Slide

30. @HugoGiraudel
    

    View Slide

31. Never
    color only
    @HugoGiraudel
    

    View Slide

32. Beware
    color-coded
    elements
    @HugoGiraudel
    

    View Slide

33. Combine
    colors with
    patterns
    @HugoGiraudel
    

    View Slide

34. @HugoGiraudel
    

    View Slide

35. Blindness
    @HugoGiraudel
    

    View Slide

36. Meaningful
    content flow
    @HugoGiraudel
    

    View Slide

37. Keyboard
    usage
    @HugoGiraudel
    

    View Slide

38. No critical
    hover states
    @HugoGiraudel
    

    View Slide

39. Alternative
    text
    @HugoGiraudel
    

    View Slide

40. Try a
    screen-reader
    @HugoGiraudel
    

    View Slide

41. Mobility
    impairments
    @HugoGiraudel
    

    View Slide

42. Single hand
    availability
    @HugoGiraudel
    

    View Slide

43. Upper limb
    disability
    @HugoGiraudel
    

    View Slide

44. Tendonitis &
    carpal tunnel
    syndrome
    @HugoGiraudel
    

    View Slide

45. Hand tremor
    & Parkinson
    @HugoGiraudel
    

    View Slide

46. How to
    @HugoGiraudel
    

    View Slide

47. CTA at the
    bottom
    @HugoGiraudel
    

    View Slide

48. @HugoGiraudel
    

    View Slide

49. Avoid
    multi-touch
    @HugoGiraudel
    

    View Slide

50. Avoid
    repetitive
    gestures
    @HugoGiraudel
    

    View Slide

51. Limit amount
    of actions
    @HugoGiraudel
    

    View Slide

52. Be forgiving
    with accuracy
    @HugoGiraudel
    

    View Slide

53. Test with
    other hand
    @HugoGiraudel
    

    View Slide

54. Keyboard /
    screen-reader
    @HugoGiraudel
    

    View Slide

55. Cognitive
    impairments
    @HugoGiraudel
    

    View Slide

56. Autism
    @HugoGiraudel
    

    View Slide

57. Consistent
    layouts
    @HugoGiraudel
    

    View Slide

58. Explicit &
    straight-
    forward
    @HugoGiraudel
    

    View Slide

59. Avoid
    acronyms &
    idioms
    @HugoGiraudel
    

    View Slide

60. Caption
    videos
    @HugoGiraudel
    

    View Slide

61. Dyslexia
    @HugoGiraudel
    

    View Slide

62. Use a clear
    font face
    @HugoGiraudel
    

    View Slide

63. ~70 chars /
    line
    @HugoGiraudel
    

    View Slide

64. ~1.5 line
    height
    @HugoGiraudel
    

    View Slide

65. Decent
    contrast
    @HugoGiraudel
    

    View Slide

66. Start-align
    content
    @HugoGiraudel
    

    View Slide

67. Alternative
    ways
    @HugoGiraudel
    

    View Slide

68. Vestibular
    disorder
    @HugoGiraudel
    

    View Slide

69. No parallax
    @HugoGiraudel
    

    View Slide

70. No auto-scroll
    @HugoGiraudel
    

    View Slide

71. Subtle
    animations
    @HugoGiraudel
    

    View Slide

72. Allow
    disabling
    animations
    @HugoGiraudel
    

    View Slide

73. Attention
    deficit
    disorder
    @HugoGiraudel
    

    View Slide

74. Consistent
    user flow
    @HugoGiraudel
    

    View Slide

75. Avoid infinite
    animations
    @HugoGiraudel
    

    View Slide

76. Anxiety
    @HugoGiraudel
    

    View Slide

77. Avoid time-
    sensitive
    @HugoGiraudel
    

    View Slide

78. Be clear and
    supportive
    @HugoGiraudel
    

    View Slide

79. @HugoGiraudel
    

    View Slide

80. Allow
    reviewing
    @HugoGiraudel
    

    View Slide

81. @HugoGiraudel
    

    View Slide

82. Post-traumatic
    stress disorder
    @HugoGiraudel
    

    View Slide

83. Trigger
    warnings
    @HugoGiraudel
    

    View Slide

84. Review
    the copy
    @HugoGiraudel
    

    View Slide

85. Diverse group
    of testers
    @HugoGiraudel
    

    View Slide

86. Leave out

    the jokes
    @HugoGiraudel
    

    View Slide

87. Epilepsy
    @HugoGiraudel
    

    View Slide

88. Avoid flashing
    content
    @HugoGiraudel
    

    View Slide

89. Animate on
    user action
    @HugoGiraudel
    

    View Slide

90. Seizure
    @HugoGiraudel
    

    View Slide

91. Hearing
    impairments
    @HugoGiraudel
    

    View Slide

92. Loud
    environment
    @HugoGiraudel
    

    View Slide

93. Ear infection
    @HugoGiraudel
    

    View Slide

94. Hard of
    hearing
    @HugoGiraudel
    

    View Slide

95. Deafness
    @HugoGiraudel
    

    View Slide

96. How to
    @HugoGiraudel
    

    View Slide

97. Alternative
    ways
    @HugoGiraudel
    

    View Slide

98. Caption
    videos
    @HugoGiraudel
    

    View Slide

99. No vocal only
    @HugoGiraudel
    

    View Slide

100. Consider
     stutters
     @HugoGiraudel
     

     View Slide

101. Alternative
     ways
     @HugoGiraudel
     

     View Slide

102. Wrapping up
     @HugoGiraudel
     

     View Slide

103. Layout &
     structure
     @HugoGiraudel
     

     View Slide

104. Color &
     contrast
     @HugoGiraudel
     

     View Slide

105. Stick to
     common
     patterns
     @HugoGiraudel
     

     View Slide

106. Usability over
     aesthetics
     @HugoGiraudel
     

     View Slide

107. Do better
     everyday
     @HugoGiraudel
     

     View Slide

108. Think about
     more people
     @HugoGiraudel
     

     View Slide

109. Accept
     differences
     @HugoGiraudel
     

     View Slide

110. Design for
     everyone
     @HugoGiraudel
     

     View Slide

111. Thank you!
     @HugoGiraudel
     May 17th 2018
     

     View Slide