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.

Transcript

2. Accessibility is my favorite part of the platform + RobDodson @rob_dodson
3. #GAAD #io16 Happy Global Accessibly Awareness Day! Tweet this!
4. g.co/WebA11yCourse Oh snap! Check this out!!!
5. Taxes. Wheeeeee…
6. (˽°□°)˽Ɨ ˍʓˍ
7. I ❤ Accessibility
8. Why?
9. Greenfield
10. Benefits everyone
11. Certainty
12. Good accessibility is good UX
13. But… is hard…
15. Diversity of users Focus Semantics
16. Understanding the diversity of users
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
18. 1 Billion People
19. visual auditory cognitive motor
20. Visual A broad range from no vision (total blindness) to limited or low vision
23. Motor Users may prefer not to use a mouse, have RSI, or physical paralysis and limited range of motion
24. Motor Users may prefer not to use a mouse, have RSI, or physical paralysis and limited range of motion
25. Auditory May be completely deaf or hard of hearing
27. Cognitive A broad range encompassing ADHD, dyslexia, and autism just to name a few
29. visual auditory cognitive motor
30. WCAG 2.0 Web Content Accessibility Guidelines 2.0 provide a system for assessing the accessibility of any app w3.org/TR/WCAG20
31. WebAIM WCAG 2.0 Checklist webaim.org/standards/wcag/checklist
32. Nail the checklist
33. Focus
34. Focus determines where keyboard events go in the page.
35. Tab Order The order in which DOM elements receive focus as the user presses the tab key
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.
37. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output
38. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
39. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
40. Be Focused I Should Last! <button>I Should</button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
41. <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output I Should Be Focused Last!
42. I Should Be Focused Last! <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
43. I Should Be Focused Last! <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
44. I Should Be Focused Last! <button style=“float: right;”> I Should </button>
 <button>Be Focused</button>
 <button>Last!</button> HTML Output tab
46. Don’t fight the platform Leverage the natural DOM order to create a good keyboard experience
47. What can be focused?
48. What can be focused? should
49. Implicitly Focusable Native elements like input, button, and select get focusability for free! Click Me! Password Aisle Seat
50. Not all elements are focusable
51. Bop Beep Boop <button>Beep</button>
 <button>Bop</button>
 <button>Boop</button> HTML Output
52. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output BOP
53. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output BOP tab
54. Beep Boop <button>Beep</button>
 <div class=“fancy-btn”> Bop </div>
 <button>Boop</button> HTML Output BOP tab
55. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output BOP
56. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output BOP tab
57. Beep Boop <button>Beep</button>
 <button class=“fancy-btn”> Bop </button>
 <button>Boop</button> HTML Output BOP tab
58. Don’t fight the platform Use native elements whenever possible
59. tabindex Configure the focus behavior of an element
60. tabindex=“0” In the natural tab order and can be programmatically focused by calling focus() Settings <div id=“dropdown”> Settings </div>
61. tabindex=“0” In the natural tab order and can be programmatically focused by calling focus() Settings <div id=“dropdown” tabindex=“0”> Settings </div>
62. tabindex=“0” In the natural tab order and can be programmatically focused by calling focus() <div id=“dropdown” tabindex=“0”> Settings </div> Settings
63. 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
64. 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”
65. tabindex=“5” In the natural tab order and jumps ahead of everything else. Generally an anti-pattern.
66. ARIA Design Patterns w3.org/TR/wai-aria-practices-1.1
67. Use the keyboard patterns from the ARIA Authoring guide to ensure an accessible experience
68. Extend the platform Turn useful patterns into Web Components
69. DECLINE ACCEPT Would you like to save? Otherwise all will be deleted!
70. DECLINE ACCEPT Would you like to save? Otherwise all will be deleted! tab
71. DECLINE ACCEPT Would you like to save? Otherwise all will be deleted! tab
72. DECLINE ACCEPT Would you like to save? Otherwise all will be deleted! oh no! tab
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
74. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog>
75. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Trap focus
76. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Move focus into the modal
77. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Dismiss or confirm and close modal
78. <paper-dialog modal restore-focus-on-close> <h2>Would you like to save?</h2> <p>Otherwise all will be deleted!</p> <div class="buttons"> <button dialog-dismiss>Decline</button> <button dialog-confirm autofocus>Accept</button> </div> </paper-dialog> Restore focus
80. Semantics
81. Affordances Affordances offer or afford a person the opportunity to perform an action.
82. Programmatic semantics <main> <div class="card"> <form> <div class="trip-selector"> <div class="row"> <div class="inline-control col-2"> </div> <div class="inline-control submit-form col-1"> <button type="submit" id="submitBtn">Search</button> </div> </div> </div> </form> </div> </main> <label for=“seatType">Preferred seat type</label> <select name="seatType" id="seatType"> <option value="0">No preference</option> <option value="1">Aisle seat</option> <option value="2">Window seat</option> </select> pop-up button value: “No preference” name: “Preferred seat type” state: collapsed
83. Programmatic semantics <main> <div class="card"> <form> <div class="trip-selector"> <div class="row"> <div class="inline-control col-2"> </div> <div class="inline-control submit-form col-1"> <button type="submit" id="submitBtn">Search</button> </div> </div> </div> </form> </div> </main> <label for=“seatType">Preferred seat type</label> <select name="seatType" id="seatType"> <option value="0">No preference</option> <option value="1">Aisle seat</option> <option value="2">Window seat</option> </select> Role: “pop-up button” Name: “Preferred seat type” State: collapsed Value: “No preference”
84. GUI accessibility tree assistive technology user application
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”
86. Generic elements have generic semantics <div class=“sign-up” tabindex=“0”> Sign Up </div> SIGN UP “group”
87. Don’t fight the platform Use native elements for free programmatic semantics
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
89. ARIA does NOT change behavior
90. <x-checkbox tabindex=“0”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up …
91. ARIA. All of it…
92. ARIA Design Patterns
94. <x-checkbox tabindex=“0”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up …
95. <x-checkbox tabindex=“0” role=“checkbox”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up role: checkbox state: unchecked
96. <x-checkbox tabindex=“0” role=“checkbox” aria-checked=“true”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up role: checkbox state: checked
97. aria-label A string to be used as the accessible label. Overrides any other native labelling mechanism. “button” <button id=“hamburger”> </button>
98. aria-label A string to be used as the accessible label. Overrides any other native labelling mechanism. <button id=“hamburger” aria-label=“Main Menu”> </button> “Main Menu, button”
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” <div id=“lbl”>Men’s Outerwear</div> <shop-button id=“btn” role=“button”> Shop Now </shop-button>
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” <div id=“lbl”>Men’s Outerwear</div> <shop-button id=“btn” role=“button” aria-labelledby=“lbl btn”> Shop Now </shop-button>
101. <x-checkbox tabindex=“0” role=“checkbox” aria-checked=“true”> </x-checkbox> <span>Sign Up</span> ✔ Sign Up role: checkbox state: checked
102. <x-checkbox tabindex=“0” role=“checkbox” aria-checked=“true” aria-labelledby=“sign”> </x-checkbox> <span id=“sign”>Sign Up</span> ✔ Sign Up role: checkbox name: “Sign Up” state: checked
103. Accessibility Developer Tools
107. github.com/Polymer/shop
108. Review!
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.
110. Ensure focus Leverage native elements like button for easy focus wins. Use tabindex to add keyboard support to custom elements.
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.
112. Good accessibility is good UX
113. g.co/WebA11yCourse
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
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