Accessibility in the Platform

95c3a3b33ea51545229c625bef42e343?s=47 Rob Dodson
November 03, 2016

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

November 03, 2016
Tweet

Transcript

  1. Accessibility @ Modern Web + RobDodson @rob_dodson

  2. None
  3. Perf is crucial for good UX

  4. None
  5. None
  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/
  7. None
  8. None
  9. Accessibility is good UX

  10. Diversity of users Focus Semantics

  11. Diversity of users

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

  14. visual auditory cognitive motor

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

    limited or low vision
  16. None
  17. None
  18. Motor Users may prefer not to use a mouse, have

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

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

  21. None
  22. Cognitive A broad range encompassing ADHD, dyslexia, and autism just

    to name a few
  23. None
  24. visual auditory cognitive motor

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

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

  27. Nail the checklist

  28. Focus

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

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

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

  32. <nav> <div class=“menu-btn"></div> <span class=“title"> PWAwesome </span> <a href="#">Overview</a> <a

    href="#">Features</a> <a href="#">Start</a> <a href="#">Contact</a> </nav>
  33. <nav> <button class=“menu-btn"></button> <span class=“title"> PWAwesome </span> <a href="#">Overview</a> <a

    href="#">Features</a> <a href="#">Start</a> <a href="#">Contact</a> </nav>
  34. Don’t fight the platform!

  35. tabindex Configure the focus behavior of an element

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

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

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

    focused by calling focus() <div id=“dropdown” tabindex=“0”> Settings </div> Settings
  39. 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
  40. 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”
  41. tabindex=“5” In the natural tab order and jumps ahead of

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

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

    ensure an accessible experience
  44. Semantics

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

    perform an action.
  46. 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
  47. 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”
  48. GUI accessibility tree assistive technology user application

  49. Implicit Semantics Similar to focus, native elements get rich semantics

    for free Click Me! Password Aisle Seat “pop-up button” “button” “secure edit text”
  50. Generic elements have generic semantics <div class=“sign-up” tabindex=“0”> Sign Up

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

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

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

  55. ARIA. All of it…

  56. ARIA Design Patterns

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

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

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

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

    Overrides any other native labelling mechanism. “button” <button id=“hamburger”> </button>
  62. 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”
  63. 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>
  64. 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>
  65. <x-checkbox tabindex=“0” role=“checkbox” aria-checked=“true”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up

    role: checkbox state: checked
  66. <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
  67. None
  68. Review!

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

    wins. Use tabindex to make controls operable and to manage focus in your app.
  71. 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.
  72. bit.ly/web-a11y

  73. @rob_dodson Rob Dodson Thank You Images created by Julien Deveaux,

    Co-Effect Creative, Michael Wohlwend, Maico Amorim, Yu Luck, Andrey Vasiliev, Till Teenck, Gregor Črešnar, Wes Breazell, Blaise Sewell, Dustin’s Words from the Noun project