Accessibility is My Favorite Part of the Platform

My favorite part of my job is when I get to work on accessibility. I see this as removing uncertainty and anxiety from people’s day, and helping them access the information they need. But working with accessibility can be frustrating, especially when you feel like you’re fighting the platform instead of working with it. This session 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 everyone.

Transcript

1. View Slide

2. Accessibility is my favorite part
   of the platform
   + RobDodson
   @rob_dodson
   

   View Slide

3. #GAAD #io16
   Happy Global
   Accessibly Awareness Day!
   Tweet this!
   

   View Slide

4. g.co/WebA11yCourse
   Oh snap! Check this out!!!
   

   View Slide

5. Taxes. Wheeeeee…
   

   View Slide

6. (˽°□°)˽Ɨ ˍʓˍ
   

   View Slide

7. I ❤
   Accessibility
   

   View Slide

8. Why?
   

   View Slide

9. Greenfield
   

   View Slide

10. Benefits
    everyone
    

    View Slide

11. Certainty
    

    View Slide

12. Good accessibility
    is good UX
    

    View Slide

13. But… is hard…
    

    View Slide

14. View Slide

15. Diversity of users
    Focus
    Semantics
    

    View Slide

16. Understanding the
    diversity of users
    

    View Slide

17. 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

18. 1 Billion People
    

    View Slide

19. visual
    auditory cognitive
    motor
    

    View Slide

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

    View Slide

21. View Slide

22. View Slide

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

    View Slide

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

    View Slide

25. Auditory
    May be completely deaf or hard of hearing
    

    View Slide

26. View Slide

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

    View Slide

28. View Slide

29. visual
    auditory cognitive
    motor
    

    View Slide

30. 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

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

    View Slide

32. Nail the checklist
    

    View Slide

33. Focus
    

    View Slide

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

    View Slide

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

    View Slide

36. 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

37. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    

    View Slide

38. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

39. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

40. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

41. 
    I Should
    

    Be Focused

    Last!
    HTML Output
    I Should
    Be Focused Last!
    

    View Slide

42. I Should
    Be Focused Last!
    
    I Should
    

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

43. I Should
    Be Focused Last!
    
    I Should
    

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

44. I Should
    Be Focused Last!
    
    I Should
    

    Be Focused

    Last!
    HTML Output
    tab
    

    View Slide

45. View Slide

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

    View Slide

47. What can be focused?
    

    View Slide

48. What can be focused?
    should
    

    View Slide

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

    View Slide

50. Not all elements are focusable
    

    View Slide

51. Bop
    Beep Boop
    Beep

    Bop

    Boop
    HTML Output
    

    View Slide

52. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    

    View Slide

53. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    tab
    

    View Slide

54. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    tab
    

    View Slide

55. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    

    View Slide

56. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    tab
    

    View Slide

57. Beep Boop
    Beep

    
    Bop
    

    Boop
    HTML Output
    BOP
    tab
    

    View Slide

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

    View Slide

59. tabindex
    Configure the focus behavior of an element
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. 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

64. 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

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

    View Slide

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

    View Slide

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

    View Slide

68. Extend the platform
    Turn useful patterns into Web Components
    

    View Slide

69. DECLINE ACCEPT
    Would you like to save?
    Otherwise all will be deleted!
    

    View Slide

70. DECLINE ACCEPT
    Would you like to save?
    Otherwise all will be deleted!
    tab
    

    View Slide

71. DECLINE ACCEPT
    Would you like to save?
    Otherwise all will be deleted!
    tab
    

    View Slide

72. DECLINE ACCEPT
    Would you like to save?
    Otherwise all will be deleted!
    oh no!
    tab
    

    View Slide

73. // Will hold previously focused element
    var focusedElementBeforeModal;
    // Find the modal and its overlay
    var modal = document.querySelector('.modal');
    var modalOverlay = document.querySelector('.modal-overlay');
    var modalToggle = document.querySelector('.modal-toggle');
    modalToggle.addEventListener('click', openModal);
    Code for trapping modal focus
    

    View Slide

74. 
    Would you like to save?
    Otherwise all will be deleted!
    
    Decline
    Accept
    
    
    

    View Slide

75. 
    Would you like to save?
    Otherwise all will be deleted!
    
    Decline
    Accept
    
    
    Trap focus
    

    View Slide

76. 
    Would you like to save?
    Otherwise all will be deleted!
    
    Decline
    Accept
    
    Move focus into
    the modal
    

    View Slide

77. 
    Would you like to save?
    Otherwise all will be deleted!
    
    Decline
    Accept
    
    Dismiss or confirm
    and close modal
    

    View Slide

78. 
    Would you like to save?
    Otherwise all will be deleted!
    
    Decline
    Accept
    
    
    Restore focus
    

    View Slide

79. View Slide

80. Semantics
    

    View Slide

81. Affordances
    Affordances offer or afford a
    person the opportunity to
    perform an action.
    

    View Slide

82. Programmatic semantics
    
    
    
    
    
    
    
    
    Search
    
    
    
    
    
    
    Preferred seat type
    
    No preference
    Aisle seat
    Window seat
    
    pop-up button
    value: “No preference”
    name: “Preferred seat type”
    state: collapsed
    

    View Slide

83. Programmatic semantics
    
    
    
    
    
    
    
    
    Search
    
    
    
    
    
    
    Preferred seat type
    
    No preference
    Aisle seat
    Window seat
    
    Role: “pop-up button”
    Name: “Preferred seat type”
    State: collapsed
    Value: “No preference”
    

    View Slide

84. GUI accessibility
    tree
    assistive
    technology
    user
    application
    

    View Slide

85. Implicit Semantics
    Similar to focus, native elements
    get rich semantics for free
    Click Me!
    Password
    Aisle Seat
    “pop-up button”
    “button”
    “secure edit text”
    

    View Slide

86. Generic elements have generic semantics
    tabindex=“0”>
    Sign Up
    
    SIGN UP
    “group”
    

    View Slide

87. Don’t fight the platform
    Use native elements for free programmatic semantics
    

    View Slide

88. WAI-ARIA
    The Web Accessibility Initiative - Accessible Rich Internet Applications
    (ARIA) specification adds the ability to modify and enhance the semantic
    meaning of elements in the DOM
    

    View Slide

89. ARIA does NOT change behavior
    

    View Slide

90. 
    
    Sign Up
    ✔ Sign Up
    …
    

    View Slide

91. ARIA. All of it…
    

    View Slide

92. ARIA Design Patterns
    

    View Slide

93. View Slide

94. 
    
    Sign Up
    ✔ Sign Up
    …
    

    View Slide

95. role=“checkbox”>
    
    Sign Up
    ✔ Sign Up
    role: checkbox
    state: unchecked
    

    View Slide

96. role=“checkbox”
    aria-checked=“true”>
    
    Sign Up
    ✔ Sign Up
    role: checkbox
    state: checked
    

    View Slide

97. aria-label
    A string to be used as the
    accessible label. Overrides any
    other native labelling mechanism.
    “button”
    
    
    

    View Slide

98. aria-label
    A string to be used as the
    accessible label. Overrides any
    other native labelling mechanism.
    aria-label=“Main Menu”>
    
    “Main Menu, button”
    

    View Slide

99. aria-labelledby
    A reference to an element
    (or elements) which will act as
    an accessible label. Overrides
    any other labelling mechanism
    including aria-label.
    “Shop Now, button”
    Men’s Outerwear
    
    Shop Now
    
    

    View Slide

100. aria-labelledby
     A reference to an element
     (or elements) which will act as
     an accessible label. Overrides
     any other labelling mechanism
     including aria-label.
     “Men’s Outerwear, Shop Now, button”
     Men’s Outerwear
     aria-labelledby=“lbl btn”>
     Shop Now
     
     

     View Slide

101. role=“checkbox”
     aria-checked=“true”>
     
     Sign Up
     ✔ Sign Up
     role: checkbox
     state: checked
     

     View Slide

102. role=“checkbox”
     aria-checked=“true”
     aria-labelledby=“sign”>
     
     Sign Up
     ✔ Sign Up
     role: checkbox
     name: “Sign Up”
     state: checked
     

     View Slide

103. Accessibility
     Developer Tools
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. github.com/Polymer/shop
     

     View Slide

108. Review!
     

     View Slide

109. 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

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

     View Slide

111. Offer affordances
     Use native elements with built-
     in, rich semantics. Refer to
     ARIA Authoring Practices doc
     when you need to add your own
     custom semantics.
     

     View Slide

112. Good accessibility
     is good UX
     

     View Slide

113. g.co/WebA11yCourse
     

     View Slide

114. Accessibility talks
     Thu, 5pm - Hercules
     Google.org: Accelerating innovation for people w/ disabilities
     Fri, 11am - Ursa Minor
     Inclusive Design and Testing: Making your app accessible
     Sandbox
     Visit Access & Empathy sandbox for demos
     

     View Slide

115. 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 from
     the Noun project
     Credits
     

     View Slide