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

Accessibility @ Cascade SF

Accessibility @ Cascade SF

Working with accessibility can be frustrating, especially when you feel like you’re fighting the platform instead of working with it. This talk 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 everyon

Rob Dodson

July 15, 2016
Tweet

More Decks by Rob Dodson

Other Decks in Technology

Transcript

  1. Accessibility @ Cascade SF
    + RobDodson
    @rob_dodson

    View full-size slide

  2. Perf is crucial for good UX

    View full-size slide

  3. 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/

    View full-size slide

  4. Accessibility is good UX

    View full-size slide

  5. Diversity of users
    Design
    Focus

    View full-size slide

  6. Understanding the
    diversity of users

    View full-size slide

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

  8. 1 Billion People

    View full-size slide

  9. visual
    auditory cognitive
    motor

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Auditory
    May be completely deaf or hard of hearing

    View full-size slide

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

    View full-size slide

  15. visual
    auditory cognitive
    motor

    View full-size slide

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

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

    View full-size slide

  18. Nail the checklist

    View full-size slide

  19. Make sure you always include a
    meta viewport tag
    initial-scale=1">

    View full-size slide

  20. initial-scale=1, user-scalable=no”>
    anti-pattern
    Make sure you always include a
    meta viewport tag

    View full-size slide

  21. Touch targets
    Use a minimum of 48px for your
    touch target size. And provide
    32px of margin around each
    touch target.

    View full-size slide

  22. 48
    40
    48
    24
    Touch targets
    Use a minimum of 48px for your
    touch target size. And provide
    32px of margin around each
    touch target.

    View full-size slide

  23. Ali Connors
    Brunch this weekend?
    I’ll be in your neighborhood doing errands …
    Summer BBQ
    Wish I could come, but I’m out of town this …
    Oui oui
    Do you have any recommendations? Have …
    Birthday gift
    Have any ideas about what to get Heidi for …
    me, Scott, Jennifer
    Sandra Adams
    Trevor Hansen
    15 min
    2 hr
    6 hr
    12 hr
    Inbox 32
    Touch targets
    Use a minimum of 48px for your
    touch target size. And provide
    32px of margin around each
    touch target.

    View full-size slide

  24. Size things appropriately
    Be sure to set your meta viewport and provide
    generous touch targets

    View full-size slide

  25. Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    15.9:1 5.7:1 3.5:1 1.6:1
    Ensure users can read your content with
    proper contrast ratios

    View full-size slide

  26. WCAG - 1.4.3 Contrast
    • Text and images of text have a contrast ratio of at
    least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a
    contrast ratio of at least 3:1

    View full-size slide

  27. • Text and images of text have a contrast ratio of at
    least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a
    contrast ratio of at least 3:1
    WCAG - 1.4.3 Contrast

    View full-size slide

  28. • Text and images of text have a contrast ratio of at
    least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a
    contrast ratio of at least 3:1
    WCAG - 1.4.3 Contrast

    View full-size slide

  29. • Text and images of text have a contrast ratio of at
    least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a
    contrast ratio of at least 3:1
    WCAG - 1.4.3 Contrast

    View full-size slide

  30. Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    Lorem ipsum dolor sit
    amet, consectetur
    adipisicing elit. Deleniti
    iusto inventore magni
    error, qui, eligendi sint
    pariatur dolorum.
    15.9:1 5.7:1 3.5:1 1.6:1
    Ensure users can read your content with
    proper contrast ratios

    View full-size slide

  31. Accessibility
    Developer Tools

    View full-size slide

  32. bit.ly/a11y-devtools

    View full-size slide

  33. Ensure proper contrast
    Make sure you meet minimum contrast ratios
    and audit your site when adding new content

    View full-size slide

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

    View full-size slide

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

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

  37. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output

    View full-size slide

  38. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

  39. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

  40. Be Focused
    I Should Last!
    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide


  41. I Should

    Be Focused

    Last!
    HTML Output
    I Should
    Be Focused Last!

    View full-size slide

  42. I Should
    Be Focused Last!

    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

  43. I Should
    Be Focused Last!

    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

  44. I Should
    Be Focused Last!

    I Should

    Be Focused

    Last!
    HTML Output
    tab

    View full-size slide

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

    View full-size slide

  46. What can be focused?

    View full-size slide

  47. What can be focused?
    should

    View full-size slide

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

    View full-size slide

  49. Not all elements are focusable

    View full-size slide

  50. Bop
    Beep Boop
    Beep

    Bop

    Boop
    HTML Output

    View full-size slide

  51. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP

    View full-size slide

  52. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP
    tab

    View full-size slide

  53. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP
    tab

    View full-size slide

  54. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP

    View full-size slide

  55. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP
    tab

    View full-size slide

  56. Beep Boop
    Beep


    Bop

    Boop
    HTML Output
    BOP
    tab

    View full-size slide

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

    View full-size slide

  58. tabindex
    Configure the focus behavior of an element

    View full-size slide

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

    Settings

    View full-size slide

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

    View full-size slide

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

    Settings

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

  68. Design for inclusivity
    Use a meta viewport tag and
    ensure proper touch target
    sizes. Make sure all text meets
    minimum contrast ratios.

    View full-size slide

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

    View full-size slide

  70. Good accessibility
    is good UX

    View full-size slide

  71. bit.ly/web-a11y

    View full-size slide

  72. 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,
    Amandine Vandesteene from the Noun project
    Credits

    View full-size slide