1. An Introduction to the Accessibility API on Windows David MacDonald President, CanAdapt Solutions Inc. david@can-adapt.com www.can-adapt.com

2. Screen Reader & API Brief history 1990’s “read the screen” with video intercept OK for DOS Bad for a GUI GUI, off screen model, interim solution 1991 Byte “Making the GUI Talk,”Making the GUI Talk 1997 Windows MSAA API 2009 UIA augments Windows API 2009 IAccessible Linux/Win 2009 AXAP Mac, UI Accessible Protocol iOS 3

3. JavaScript changes the DOM

4. What is the DOM?

5. The DOM Representation of web page in browser A node map Browser builds the page from the DOM Sits in computer memory JavaScript manipulates the DOM WAI ARIA can inform screen reader users of changes to the DOM (i.e, innerhtml)

6. DOM Tree DOCTYPE: html html head #text: title #text: Sample page #text: body #text: h1 #text: Sample page #text: p #text: This is a aa href="demo.html"

7. What is the Accessibility Tree? Subset of the DOM trims out things not necessary. Talks to a11y API

8. API is like a stock broker

9. API and the Browser DOM

10. Simple Form Field Code Date of Birth: (MM-DD-YYYY)

11. Let’s put it to practice Try it live: http://davidmacd.com/test/text-field-for-talk.html

12. Accessibility Viewer

13. Checkbox has no value, just state

14. Checkbox (continued)

15. How the API Works

16. Why use WAI ARIA Provide information to the Accessibility API Custom simple interactive controls like radio buttons and drop downs Custom components such as menus Announce important changes to the content Add structure to a page

17. Hamburger Menu 1.User HTML Menu (keep label visual if possible) 2.Ensure the menu has visible focus avoid ::focus {outline: none} 3.Sub menus work with a keyboard 4.Sub menus are not in the “DOM” if closed 5.Code for the menu follows the button (or focus managed via JS) 6.Open/closed menu is announced to AT (ex. aria-expanded=false )

18. Hamburger If its not a add: 1.Label (e.g. alt=menu ) 2.Add role=button 3.Tab stop, for keyboard (ex. tabindex=0) 4.Open and close with keyboard (activate JavaScript with keyboard AND mouse)

19. How to contact us David MacDonald CanAdapt Solutions Inc. 613-235-4902 www.can-adapt.com david@can-adapt.com