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

Transcript

1. Accessibility @ Cascade SF + RobDodson @rob_dodson
3. Perf is crucial for good UX
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/
9. Accessibility is good UX
10. Diversity of users Design Focus
11. Understanding the 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
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
22. Cognitive A broad range encompassing ADHD, dyslexia, and autism just to name a few
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. Design
29. Make sure you always include a meta viewport tag <meta name="viewport" content=“width=device-width, initial-scale=1">
30. <meta name="viewport" content=“width=device-width, initial-scale=1, user-scalable=no”> anti-pattern Make sure you always include a meta viewport tag
32. Touch targets Use a minimum of 48px for your touch target size. And provide 32px of margin around each touch target.
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.
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.
35. Size things appropriately Be sure to set your meta viewport and provide generous touch targets
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
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
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
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
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
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
42. Accessibility Developer Tools
44. bit.ly/a11y-devtools
45. Ensure proper contrast Make sure you meet minimum contrast ratios and audit your site when adding new content
46. Focus
47. Focus determines where keyboard events go in the page.
48. Tab Order The order in which DOM elements receive focus as the user presses the tab key
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.
50. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output
51. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
52. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
53. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
54. <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output I Should Be Focused Last!
55. I Should Be Focused Last! <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
56. I Should Be Focused Last! <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
57. I Should Be Focused Last! <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
59. Don’t fight the platform Leverage the natural DOM order to create a good keyboard experience
60. What can be focused?
61. What can be focused? should
62. Implicitly Focusable Native elements like input, button, and select get focusability for free! Click Me! Password Aisle Seat
63. Not all elements are focusable
64. Bop Beep Boop <button>Beep</button>
 <button>Bop</button>
 <button>Boop</button> HTML Output
65. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output BOP
66. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output BOP tab
67. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output BOP tab
68. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output BOP
69. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output BOP tab
70. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output BOP tab
71. Don’t fight the platform Use native elements whenever possible
72. tabindex Configure the focus behavior of an element
73. tabindex=“0” In the natural tab order and can be programmatically focused by calling focus() Settings <div id=“dropdown”> Settings </div>
74. tabindex=“0” In the natural tab order and can be programmatically focused by calling focus() Settings <div id=“dropdown” tabindex=“0”> Settings </div>
75. tabindex=“0” In the natural tab order and can be programmatically focused by calling focus() <div id=“dropdown” tabindex=“0”> Settings </div> Settings
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
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”
78. tabindex=“5” In the natural tab order and jumps ahead of everything else. Generally an anti-pattern.
79. ARIA Design Patterns w3.org/TR/wai-aria-practices-1.1
80. Use the keyboard patterns from the ARIA Authoring guide to ensure an accessible experience
81. Review!
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.
83. Design for inclusivity Use a meta viewport tag and ensure proper touch target sizes. Make sure all text meets minimum contrast ratios.
84. Ensure focus Leverage native elements like button for easy focus wins. Use tabindex to add keyboard support to custom elements.
85. Good accessibility is good UX
86. bit.ly/web-a11y
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