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

95c3a3b33ea51545229c625bef42e343?s=128

Rob Dodson

July 15, 2016
Tweet

Transcript

  1. 2.
  2. 4.
  3. 5.
  4. 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/
  5. 7.
  6. 8.
  7. 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
  8. 16.
  9. 17.
  10. 18.

    Motor Users may prefer not to use a mouse, have

    RSI, or physical paralysis and limited range of motion
  11. 19.

    Motor Users may prefer not to use a mouse, have

    RSI, or physical paralysis and limited range of motion
  12. 21.
  13. 23.
  14. 25.

    WCAG 2.0 Web Content Accessibility Guidelines 2.0 provide a system

    for assessing the accessibility of any app w3.org/TR/WCAG20
  15. 28.
  16. 29.

    Make sure you always include a meta viewport tag <meta

    name="viewport" content=“width=device-width, initial-scale=1">
  17. 31.
  18. 32.

    Touch targets Use a minimum of 48px for your touch

    target size. And provide 32px of margin around each touch target.
  19. 33.

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

    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.
  21. 35.
  22. 36.

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

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

    • 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
  25. 39.

    • 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
  26. 40.

    • 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
  27. 41.

    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
  28. 43.
  29. 45.

    Ensure proper contrast Make sure you meet minimum contrast ratios

    and audit your site when adding new content
  30. 46.
  31. 48.
  32. 49.

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

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

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  34. 56.

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

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  35. 57.

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

    </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
  36. 58.
  37. 59.
  38. 62.

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

    focusability for free! Click Me! Password Aisle Seat
  39. 73.

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

    focused by calling focus() Settings <div id=“dropdown”> Settings </div>
  40. 74.

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

    focused by calling focus() Settings <div id=“dropdown” tabindex=“0”> Settings </div>
  41. 75.

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

    focused by calling focus() <div id=“dropdown” tabindex=“0”> Settings </div> Settings
  42. 76.

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

    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”
  44. 78.

    tabindex=“5” In the natural tab order and jumps ahead of

    everything else. Generally an anti-pattern.
  45. 81.
  46. 82.

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

    Design for inclusivity Use a meta viewport tag and ensure

    proper touch target sizes. Make sure all text meets minimum contrast ratios.
  48. 84.

    Ensure focus Leverage native elements like button for easy focus

    wins. Use tabindex to add keyboard support to custom elements.
  49. 87.

    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