An Introduction to the Accessibility API on Windows David MacDonald President, CanAdapt Solutions Inc.

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

JavaScript changes the DOM

What is the DOM?

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)

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"

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

API is like a stock broker

API and the Browser DOM

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

Let’s put it to practice Try it live:

Accessibility Viewer

Checkbox has no value, just state

Checkbox (continued)

How the API Works

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

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 )

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)

How to contact us David MacDonald CanAdapt Solutions Inc