Open Source Accessibility

Open Source Accessibility

FOSDEM, Brussels 2017



Inclusive design

Open accessibility stack

Non-Visual Desktop Access (NVDA)

Screen reader demo: Headings

Screen reader demo: Reading

HTML

Implicit semantics

Most HTML elements have implicit semantics (role and state)

Links


<a href="http://tink.uk">Tink.UK</a>

Images


<img src="chamucos.png"
     alt="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>

Firefox

Keyboard focus

HTML has interactive elements that receive focus, including:

Expected interactions

Interactive elements have expected interactions provided by the browser:

HTML code


<input type="checkbox" id="bold" checked>
<label for="bold">Bold</label>

DOM tree

DOM information for an HTML checkbox

Accessibility tree

Accessibility tree information for an HTML checkbox

Manipulating the DOM

Accessibility Object Model (AOM)

Accessibility APIs

Platform controls

Bold checkbox in Windows 10

Web control


<input type="checkbox" id="bold">
<label for="bold">Bold</label>

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

Open accessibility stack

Thank you