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
680

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. Accessibility is my favorite part
    of the platform
    + RobDodson
    @rob_dodson

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Taxes. Wheeeeee…

    View full-size slide

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

    View full-size slide

  6. I ❤
    Accessibility

    View full-size slide

  7. Benefits
    everyone

    View full-size slide

  8. Good accessibility
    is good UX

    View full-size slide

  9. But… is hard…

    View full-size slide

  10. Diversity of users
    Focus
    Semantics

    View full-size slide

  11. Understanding the
    diversity of users

    View full-size 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 full-size slide

  13. 1 Billion People

    View full-size slide

  14. visual
    auditory cognitive
    motor

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Auditory
    May be completely deaf or hard of hearing

    View full-size slide

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

    View full-size slide

  20. visual
    auditory cognitive
    motor

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Nail the checklist

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output

    View full-size slide

  28. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

  29. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

  30. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide


  31. I Should

    Be Focused

    Last!
    HTML Output
    I Should
    Be Focused Last!

    View full-size slide

  32. I Should
    Be Focused Last!

    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

  33. I Should
    Be Focused Last!

    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

  34. I Should
    Be Focused Last!

    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

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

    View full-size slide

  36. What can be focused?

    View full-size slide

  37. What can be focused?
    should

    View full-size slide

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

    View full-size slide

  39. Not all elements are focusable

    View full-size slide

  40. Bop
    Beep Boop
    Beep

    Bop

    Boop
    HTML Output

    View full-size slide

  41. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP

    View full-size slide

  42. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP
    tab

    View full-size slide

  43. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP
    tab

    View full-size slide

  44. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP

    View full-size slide

  45. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP
    tab

    View full-size slide

  46. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP
    tab

    View full-size slide

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

    View full-size slide

  48. tabindex
    Configure the focus behavior of an element

    View full-size slide

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

    Settings

    View full-size slide

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

    View full-size slide

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

    Settings

    View full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. Extend the platform
    Turn useful patterns into Web Components

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. // 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 full-size slide


  63. Would you like to save?
    Otherwise all will be deleted!

    Decline
    Accept


    View full-size slide


  64. Would you like to save?
    Otherwise all will be deleted!

    Decline
    Accept


    Trap focus

    View full-size slide


  65. Would you like to save?
    Otherwise all will be deleted!

    Decline
    Accept

    Move focus into
    the modal

    View full-size slide


  66. Would you like to save?
    Otherwise all will be deleted!

    Decline
    Accept

    Dismiss or confirm
    and close modal

    View full-size slide


  67. Would you like to save?
    Otherwise all will be deleted!

    Decline
    Accept


    Restore focus

    View full-size slide

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

    View full-size slide

  69. 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 full-size slide

  70. 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 full-size slide

  71. GUI accessibility
    tree
    assistive
    technology
    user
    application

    View full-size slide

  72. 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 full-size slide

  73. Generic elements have generic semantics
    tabindex=“0”>
    Sign Up

    SIGN UP
    “group”

    View full-size slide

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

    View full-size slide

  75. 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 full-size slide

  76. ARIA does NOT change behavior

    View full-size slide



  77. Sign Up
    ✔ Sign Up

    View full-size slide

  78. ARIA. All of it…

    View full-size slide

  79. ARIA Design Patterns

    View full-size slide



  80. Sign Up
    ✔ Sign Up

    View full-size slide

  81. role=“checkbox”>

    Sign Up
    ✔ Sign Up
    role: checkbox
    state: unchecked

    View full-size slide

  82. role=“checkbox”
    aria-checked=“true”>

    Sign Up
    ✔ Sign Up
    role: checkbox
    state: checked

    View full-size slide

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


    View full-size slide

  84. 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 full-size slide

  85. 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 full-size slide

  86. 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 full-size slide

  87. role=“checkbox”
    aria-checked=“true”>

    Sign Up
    ✔ Sign Up
    role: checkbox
    state: checked

    View full-size slide

  88. role=“checkbox”
    aria-checked=“true”
    aria-labelledby=“sign”>

    Sign Up
    ✔ Sign Up
    role: checkbox
    name: “Sign Up”
    state: checked

    View full-size slide

  89. Accessibility
    Developer Tools

    View full-size slide

  90. github.com/Polymer/shop

    View full-size slide

  91. 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 full-size slide

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

    View full-size slide

  93. 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 full-size slide

  94. Good accessibility
    is good UX

    View full-size slide

  95. g.co/WebA11yCourse

    View full-size slide

  96. 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 full-size slide

  97. 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 full-size slide