Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility is My Favorite Part of the Platform

Rob Dodson
May 19, 2016
660

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.

Rob Dodson

May 19, 2016
Tweet

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