PowerPoint Presentation

Introduction to ARIABay Area AccessibilityLJWatson.co.uk @LeonieWatson1

1

Accessibility mechanics

LJWatson.co.uk @LeonieWatson2

[twitter]Test[/twitter]2

Platform accessibility APIsExpose semantic information to assistive technologiesLJWatson.co.uk @LeonieWatson3

[twitter]Accessibility APIs: A key to web accessibility, by @Chaals & @LeonieWatson http://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/[/twitter]

3

Cross-platformMSAA/UIAutomationWindowsIAccessible2Windows LinuxAT-SPILinuxNSAccessibilityOSXUIAccessibilityiOSAccessibility FrameworkAndroid

LJWatson.co.uk @LeonieWatson

4

HTML to platform mappingMost HTML elements and attributes map to their platform counterpartsLJWatson.co.uk @LeonieWatson5

[twitter]HTML Accessibility Mappings 1.0 from @W3C http://www.w3.org/TR/html-aam-1.0/[/twitter]

5

Dom tree

6

Accessibility tree

[twitter]The accessibility tree (advanced developer's guide), by @BryanEGaraventa http://whatsock.com/training/[/twitter]7

Role

Tequila

LJWatson.co.uk @LeonieWatson

State

Tequila

LJWatson.co.uk @LeonieWatson

Properties

Tequila

LJWatson.co.uk @LeonieWatson

Accessibility APIs & JavaScriptAccessibility APIs cant be queried using JavaScriptLJWatson.co.uk @LeonieWatson11

11

Accessibility APIs & ARIAARIA 1.0 W3C RecommendationARIA 1.1 W3C Working draftLJWatson.co.uk @LeonieWatson12

[twitter] .@W3C ARIA 1.0 http://www.w3.org/TR/wai-aria/ & ARIA 1.1 Working draft http://www.w3.org/TR/wai-aria-1.1/[/twitter]

12

ARIA roles30+ roles including:checkboxdialogmenubartoolbartabtreeLJWatson.co.uk @LeonieWatson13

[twitter].@W3C ARIA 1.0 Roles taxonomy http://www.w3.org/TR/wai-aria/roles[/twitter]13

ARIA states9 states including:aria-checkedaria-pressedaria-hiddenaria-invalidLJWatson.co.uk @LeonieWatson14

14

ARIA properties20+ properties including:aria-controlsaria-describedbyaria-labelaria-requiredLJWatson.co.uk @LeonieWatson15

[twitter].@W3C ARIA states and properties http://www.w3.org/TR/wai-aria/states_and_properties[/twitter]15

Building a custom disclosure widget

LJWatson.co.uk @LeonieWatson16

16

Skeleton HTML

Tequila

Makes me happy...LJWatson.co.uk @LeonieWatson

17

Using a mouse

LJWatson.co.uk @LeonieWatson

18

Using a Keyboard

LJWatson.co.uk @LeonieWatson

19

Add role

Tequila

LJWatson.co.uk @LeonieWatson

21

Add focus visuals[role="button"]:hover, [role="button"]:focus {background-color: #333;color: #fff;text-shadow: 0 -1px 0 #444;box-shadow: 0 1px 0 #666;}LJWatson.co.uk @LeonieWatson

22

Add event listenersdocument.getElementById("button").addEventListener("click", toggleDisclosure);

document.getElementById("button").addEventListener("keydown", toggleDisclosure);LJWatson.co.uk @LeonieWatson

23

Add Keyboard interactionfunction toggleDisclosure(event){var type = event.type; if (type === "keydown" && (event.keyCode !== 13 && event.keyCode !== 32)){return true}event.preventDefault();}LJWatson.co.uk @LeonieWatson

24

Add aria-expanded