Accessibility @ Cascade SF

Working with accessibility can be frustrating, especially when you feel like you’re fighting the platform instead of working with it. This talk aims to clear up some of the confusion that makes getting started with accessibility tricky, while showing off new tools to make the process easier, and highlighting ways that we can work with and extend the platform so our apps are accessible to everyon

Transcript

1. Accessibility @ Cascade SF
   + RobDodson
   @rob_dodson
   

   View Slide

2. View Slide

3. Perf is crucial for good UX
   

   View Slide

4. View Slide

5. View Slide

6. Disability is not just a health problem. It is a
   complex phenomenon, reflecting the interaction
   between features of a person’s body and
   features of the society in which he or she lives.
   - World Health Organization
   source • who.int/topics/disabilities/en/
   

   View Slide

7. View Slide

8. View Slide

9. Accessibility is good UX
   

   View Slide

10. Diversity of users
    Design
    Focus
    

    View Slide

11. Understanding the
    diversity of users
    

    View Slide

12. About 15% of the world's
    population lives with
    some form of disability
    - World Health Organization
    source • who.int/disabilities/world_report/2011/report
    

    View Slide

13. 1 Billion People
    

    View Slide

14. visual
    auditory cognitive
    motor
    

    View Slide

15. Visual
    A broad range from no vision (total blindness) to
    limited or low vision
    

    View Slide

16. View Slide

17. View Slide

18. Motor
    Users may prefer not to use a mouse, have RSI, or
    physical paralysis and limited range of motion
    

    View Slide

19. Motor
    Users may prefer not to use a mouse, have RSI, or
    physical paralysis and limited range of motion
    

    View Slide

20. Auditory
    May be completely deaf or hard of hearing
    

    View Slide

21. View Slide

22. Cognitive
    A broad range encompassing ADHD, dyslexia, and
    autism just to name a few
    

    View Slide

23. View Slide

24. visual
    auditory cognitive
    motor
    

    View Slide

25. WCAG 2.0
    Web Content Accessibility
    Guidelines 2.0 provide a system
    for assessing the accessibility
    of any app
    w3.org/TR/WCAG20
    

    View Slide

26. WebAIM WCAG 2.0 Checklist
    webaim.org/standards/wcag/checklist
    

    View Slide

27. Nail the checklist
    

    View Slide

28. Design
    

    View Slide

29. Make sure you always include a
    meta viewport tag
    initial-scale=1">
    

    View Slide

30. initial-scale=1, user-scalable=no”>
    anti-pattern
    Make sure you always include a
    meta viewport tag
    

    View Slide

31. View Slide

32. Touch targets
    Use a minimum of 48px for your
    touch target size. And provide
    32px of margin around each
    touch target.
    

    View Slide

33. 48
    40
    48
    24
    Touch targets
    Use a minimum of 48px for your
    touch target size. And provide
    32px of margin around each
    touch target.
    

    View Slide

34. Ali Connors
    Brunch this weekend?
    I’ll be in your neighborhood doing errands …
    Summer BBQ
    Wish I could come, but I’m out of town this …
    Oui oui
    Do you have any recommendations? Have …
    Birthday gift
    Have any ideas about what to get Heidi for …
    me, Scott, Jennifer
    Sandra Adams
    Trevor Hansen
    15 min
    2 hr
    6 hr
    12 hr
    Inbox 32
    Touch targets
    Use a minimum of 48px for your
    touch target size. And provide
    32px of margin around each
    touch target.
    

    View Slide

35. Size things appropriately
    Be sure to set your meta viewport and provide
    generous touch targets
    

    View Slide

36. Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    15.9:1 5.7:1 3.5:1 1.6:1
    Ensure users can read your content with
    proper contrast ratios
    

    View Slide

37. WCAG - 1.4.3 Contrast
    • Text and images of text have a contrast ratio of at
    least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a
    contrast ratio of at least 3:1
    

    View Slide

38. • Text and images of text have a contrast ratio of at
    least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a
    contrast ratio of at least 3:1
    WCAG - 1.4.3 Contrast
    

    View Slide

39. • Text and images of text have a contrast ratio of at
    least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a
    contrast ratio of at least 3:1
    WCAG - 1.4.3 Contrast
    

    View Slide

40. • Text and images of text have a contrast ratio of at
    least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a
    contrast ratio of at least 3:1
    WCAG - 1.4.3 Contrast
    

    View Slide

41. Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    15.9:1 5.7:1 3.5:1 1.6:1
    Ensure users can read your content with
    proper contrast ratios
    

    View Slide

42. Accessibility
    Developer Tools
    

    View Slide

43. View Slide

44. bit.ly/a11y-devtools
    

    View Slide

45. Ensure proper contrast
    Make sure you meet minimum contrast ratios
    and audit your site when adding new content
    

    View Slide

46. Focus
    

    View Slide

47. Focus determines where
    keyboard events go in the page.
    

    View Slide

48. Tab Order
    The order in which DOM elements receive focus as the user
    presses the tab key
    

    View Slide

49. DOM Order Matters
    Tab order is inferred by the order
    of the DOM. Changing the visual
    position of elements can lead to
    an illogical tab order.
    

    View Slide

50. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    

    View Slide

51. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

52. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

53. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

54. 
    I Should
    

    Be Focused

    Last!
    HTML Output
    I Should
    Be Focused Last!
    

    View Slide

55. I Should
    Be Focused Last!
    
    I Should
    

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

56. I Should
    Be Focused Last!
    
    I Should
    

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

57. I Should
    Be Focused Last!
    
    I Should
    

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

58. View Slide

59. Don’t fight the platform
    Leverage the natural DOM order to create a good
    keyboard experience
    

    View Slide

60. What can be focused?
    

    View Slide

61. What can be focused?
    should
    

    View Slide

62. Implicitly Focusable
    Native elements like input,
    button, and select get
    focusability for free!
    Click Me!
    Password
    Aisle Seat
    

    View Slide

63. Not all elements are focusable
    

    View Slide

64. Bop
    Beep Boop
    Beep

    Bop

    Boop
    HTML Output
    

    View Slide

65. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    

    View Slide

66. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    tab
    

    View Slide

67. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    tab
    

    View Slide

68. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    

    View Slide

69. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    tab
    

    View Slide

70. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    tab
    

    View Slide

71. Don’t fight the platform
    Use native elements whenever possible
    

    View Slide

72. tabindex
    Configure the focus behavior of an element
    

    View Slide

73. tabindex=“0”
    In the natural tab order and can
    be programmatically focused by
    calling focus()
    Settings
    
    Settings
    
    

    View Slide

74. tabindex=“0”
    In the natural tab order and can
    be programmatically focused by
    calling focus()
    Settings
    tabindex=“0”>
    Settings
    
    

    View Slide

75. tabindex=“0”
    In the natural tab order and can
    be programmatically focused by
    calling focus()
    tabindex=“0”>
    Settings
    
    Settings
    

    View Slide

76. tabindex=“-1”
    Not in the natural tab order but
    can be programmatically
    focused by calling focus().
    Useful for “roving tabindex”
    Item 1
    Item 2
    Item 3
    Item 1
    Item 2
    Item 3
    

    View Slide

77. tabindex=“-1”
    Item 1
    Item 2
    Item 3
    Item 1
    Item 2
    Item 3
    focus();
    Not in the natural tab order but
    can be programmatically
    focused by calling focus().
    Useful for “roving tabindex”
    

    View Slide

78. tabindex=“5”
    In the natural tab order and
    jumps ahead of everything else.
    Generally an anti-pattern.
    

    View Slide

79. ARIA Design Patterns
    w3.org/TR/wai-aria-practices-1.1
    

    View Slide

80. Use the keyboard patterns from
    the ARIA Authoring guide to
    ensure an accessible experience
    

    View Slide

81. Review!
    

    View Slide

82. Nail the checklist
    Consider the broad range of
    users. Work with WCAG 2.0 and
    the Web AIM checklist to ensure
    your application is accessible.
    

    View Slide

83. Design for inclusivity
    Use a meta viewport tag and
    ensure proper touch target
    sizes. Make sure all text meets
    minimum contrast ratios.
    

    View Slide

84. Ensure focus
    Leverage native elements like
    button for easy focus wins. Use
    tabindex to add keyboard
    support to custom elements.
    

    View Slide

85. Good accessibility
    is good UX
    

    View Slide

86. bit.ly/web-a11y
    

    View Slide

87. Thank You!
    + RobDodson
    @rob_dodson
    Images created by Julien Deveaux, Co-Effect Creative,
    Michael Wohlwend, Maico Amorim, Yu Luck, Andrey
    Vasiliev, Till Teenck, Gregor Črešnar, Wes Breazell,
    Amandine Vandesteene from the Noun project
    Credits
    

    View Slide