Open Source Accessibility
Open Source Accessibility
FOSDEM, Brussels 2017
Open accessibility stack
- The screen reader
- The code
- The browser
- The API
Non-Visual Desktop Access (NVDA)
Screen reader demo: Headings
Screen reader demo: Reading
Implicit semantics
Most HTML elements have implicit semantics (role and state)
Links
<a href="http://tink.uk">Tink.UK</a>
- Role = "link"
- Accessible name = "Tink.UK"
- State = focusable
Images
<img src="chamucos.png"
alt="A bottle of Chamucos tequila with the dancing devil logo">
- Role = "image"
- Accessible name = "A bottle of Chamucos tequila with the dancing devil logo"
Inputs
<input type="checkbox" id="tequila" checked>
<label for="tequila">Tequila makes me happy</label>
- Role = "checkbox"
- Accessible name = "Tequila makes me happy"
- State = "focusable checked"
Keyboard focus
HTML has interactive elements that receive focus, including:
- <a href>
- <button>
- <input>
Expected interactions
Interactive elements have expected interactions provided by the browser:
- A link is activated by click, tap or the Enter key
- A button is activated by click, tap or the Enter or Space key
- An input is activated by click, tap or the Enter key
HTML code
<input type="checkbox" id="bold" checked>
<label for="bold">Bold</label>
DOM tree
Accessibility tree
Manipulating the DOM
- Browser parses the HTML and builds the DOM
- Browser uses the DOM to build the accessibility tree
- Browser updates the DOM in response to user interaction or scripted events
- Browser responds to changes in the DOM and updates the accessibility tree
- Assistive technologies listen for changes in the accessibility tree and respond accordingly
Accessibility Object Model (AOM)
Accessibility APIs
- UIA, MSAA and IAccessible2 on Windows
- IAccessible2 and ATK on Linux
- Accessibility API on OSX and iOS
- Accessibility Framework on Android
Platform controls
- Role is "checkbox"
- Accessible name is "Bold"
- State is focused, checked, focusable
Web control
<input type="checkbox" id="bold">
<label for="bold">Bold</label>
- Role is "checkbox"
- Accessible name is "Bold"
- State is focused, checked, focusable
HTML Accessibility API Mappings (AAM)
The relationship between platform objects and web objects is documented in the HTML AAM: www.w3.org/TR/html-aam-1.0/
AOM objectives
- Modify the semantic properties of an accessibility node corresponding to a DOM node
- Create virtual accessibility nodes that do not correspond to DOM nodes
- Enable exploration of the accessibility tree and access the properties of accessibility nodes