Accessibility is My Favorite Part of the Platform

95c3a3b33ea51545229c625bef42e343?s=47 Rob Dodson
May 19, 2016
500

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.

95c3a3b33ea51545229c625bef42e343?s=128

Rob Dodson

May 19, 2016
Tweet

Transcript

  1. None
  2. Accessibility is my favorite part of the platform + RobDodson

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

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

  5. Taxes. Wheeeeee…

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

  7. I ❤ Accessibility

  8. Why?

  9. Greenfield

  10. Benefits everyone

  11. Certainty

  12. Good accessibility is good UX

  13. But… is hard…

  14. None
  15. Diversity of users Focus Semantics

  16. Understanding the diversity of users

  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
  18. 1 Billion People

  19. visual auditory cognitive motor

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

    limited or low vision
  21. None
  22. None
  23. Motor Users may prefer not to use a mouse, have

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

    RSI, or physical paralysis and limited range of motion
  25. Auditory May be completely deaf or hard of hearing

  26. None
  27. Cognitive A broad range encompassing ADHD, dyslexia, and autism just

    to name a few
  28. None
  29. visual auditory cognitive motor

  30. WCAG 2.0 Web Content Accessibility Guidelines 2.0 provide a system

    for assessing the accessibility of any app w3.org/TR/WCAG20
  31. WebAIM WCAG 2.0 Checklist webaim.org/standards/wcag/checklist

  32. Nail the checklist

  33. Focus

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

  35. Tab Order The order in which DOM elements receive focus

    as the user presses the tab key
  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.
  37. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button>

    HTML Output
  38. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button>

    HTML Output tab
  39. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button>

    HTML Output tab
  40. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button>

    HTML Output tab
  41. <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML

    Output I Should Be Focused Last!
  42. I Should Be Focused Last! <button style=“float: right;”> I Should

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  43. I Should Be Focused Last! <button style=“float: right;”> I Should

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  44. I Should Be Focused Last! <button style=“float: right;”> I Should

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  45. None
  46. Don’t fight the platform Leverage the natural DOM order to

    create a good keyboard experience
  47. What can be focused?

  48. What can be focused? should

  49. Implicitly Focusable Native elements like input, button, and select get

    focusability for free! Click Me! Password Aisle Seat
  50. Not all elements are focusable

  51. Bop Beep Boop <button>Beep</button>
 <button>Bop</button>
 <button>Boop</button> HTML Output

  52. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output

    BOP
  53. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output

    BOP tab
  54. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output

    BOP tab
  55. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output

    BOP
  56. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output

    BOP tab
  57. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output

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

  59. tabindex Configure the focus behavior of an element

  60. tabindex=“0” In the natural tab order and can be programmatically

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

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

    focused by calling focus() <div id=“dropdown” tabindex=“0”> Settings </div> Settings
  63. tabindex=“-1” Not in the natural tab order but can be

    programmatically focused by calling focus(). Useful for “roving tabindex” <div tabindex=“-1”>Item 1</div> <div tabindex=“0”>Item 2</div> <div tabindex=“-1”>Item 3</div> Item 1 Item 2 Item 3
  64. tabindex=“-1” <div tabindex=“-1”>Item 1</div> <div tabindex=“-1”>Item 2</div> <div tabindex=“0”>Item 3</div>

    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”
  65. tabindex=“5” In the natural tab order and jumps ahead of

    everything else. Generally an anti-pattern.
  66. ARIA Design Patterns w3.org/TR/wai-aria-practices-1.1

  67. Use the keyboard patterns from the ARIA Authoring guide to

    ensure an accessible experience
  68. Extend the platform Turn useful patterns into Web Components

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

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

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

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

    be deleted! oh no! tab
  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
  74. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog>
  75. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Trap focus
  76. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Move focus into the modal
  77. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Dismiss or confirm and close modal
  78. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all

    will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Restore focus
  79. None
  80. Semantics

  81. Affordances Affordances offer or afford a person the opportunity to

    perform an action.
  82. Programmatic semantics <main> <div class="card"> <form> <div class="trip-selector"> <div class="row">

    <div class="inline-control col-2"> </div> <div class="inline-control submit-form col-1"> <button type="submit" id="submitBtn">Search</button> </div> </div> </div> </form> </div> </main> <label for=“seatType">Preferred seat type</label> <select name="seatType" id="seatType"> <option value="0">No preference</option> <option value="1">Aisle seat</option> <option value="2">Window seat</option> </select> pop-up button value: “No preference” name: “Preferred seat type” state: collapsed
  83. Programmatic semantics <main> <div class="card"> <form> <div class="trip-selector"> <div class="row">

    <div class="inline-control col-2"> </div> <div class="inline-control submit-form col-1"> <button type="submit" id="submitBtn">Search</button> </div> </div> </div> </form> </div> </main> <label for=“seatType">Preferred seat type</label> <select name="seatType" id="seatType"> <option value="0">No preference</option> <option value="1">Aisle seat</option> <option value="2">Window seat</option> </select> Role: “pop-up button” Name: “Preferred seat type” State: collapsed Value: “No preference”
  84. GUI accessibility tree assistive technology user application

  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”
  86. Generic elements have generic semantics <div class=“sign-up” tabindex=“0”> Sign Up

    </div> SIGN UP “group”
  87. Don’t fight the platform Use native elements for free programmatic

    semantics
  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
  89. ARIA does NOT change behavior

  90. <x-checkbox tabindex=“0”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up …

  91. ARIA. All of it…

  92. ARIA Design Patterns

  93. None
  94. <x-checkbox tabindex=“0”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up …

  95. <x-checkbox tabindex=“0” role=“checkbox”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up role:

    checkbox state: unchecked
  96. <x-checkbox tabindex=“0” role=“checkbox” aria-checked=“true”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up

    role: checkbox state: checked
  97. aria-label A string to be used as the accessible label.

    Overrides any other native labelling mechanism. “button” <button id=“hamburger”> </button>
  98. aria-label A string to be used as the accessible label.

    Overrides any other native labelling mechanism. <button id=“hamburger” aria-label=“Main Menu”> </button> “Main Menu, button”
  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” <div id=“lbl”>Men’s Outerwear</div> <shop-button id=“btn” role=“button”> Shop Now </shop-button>
  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” <div id=“lbl”>Men’s Outerwear</div> <shop-button id=“btn” role=“button” aria-labelledby=“lbl btn”> Shop Now </shop-button>
  101. <x-checkbox tabindex=“0” role=“checkbox” aria-checked=“true”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up

    role: checkbox state: checked
  102. <x-checkbox tabindex=“0” role=“checkbox” aria-checked=“true” aria-labelledby=“sign”> </x-checkbox> <span id=“sign”>Sign Up</span> ✔

    Sign Up role: checkbox name: “Sign Up” state: checked
  103. Accessibility Developer Tools

  104. None
  105. None
  106. None
  107. github.com/Polymer/shop

  108. Review!

  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.
  110. Ensure focus Leverage native elements like button for easy focus

    wins. Use tabindex to add keyboard support to custom elements.
  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.
  112. Good accessibility is good UX

  113. g.co/WebA11yCourse

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