PowerPoint Presentation

Introduction to accessibility mechanicsAccessibility Camp, Toronto@LeonieWatson tink.uk1

1

HTML mechanics

@LeonieWatson tink.uk2

2

RolesMost HTML elements have default implicit roles@LeonieWatson tink.uk3

3

elementHas an implicit role of "graphic" or "image"

@LeonieWatson tink.uk4

4

elementHas an implicit landmark role of "main"

@LeonieWatson tink.uk5

5

& elementsHave weak roles, so are "semantically neutral"

This is textSo is this@LeonieWatson tink.uk6

NameMany HTML elements can have an accessible name@LeonieWatson tink.uk7

7

elementHas accessible name of tink.uk"

tink.uk@LeonieWatson tink.uk8

elementHas accessible name of "Chamuco's tequila"

@LeonieWatson tink.uk9

elementHas accessible name of "Yes"

Yes

@LeonieWatson tink.uk10

10

StatesSome elements have different states@LeonieWatson tink.uk11

Checked stateHas a state of "checked"

Agree

@LeonieWatson tink.uk12

12

Required stateHas a state of "required"

Colour*

@LeonieWatson tink.uk13

FocusAll interactive HTML elements have focus and keyboard support built-in@LeonieWatson tink.uk14

elementCan be focused on, and activated with the enter key

tink.uk@LeonieWatson tink.uk15

15

elementCan take keyboard focus, and be activated with the enter or space keys@LeonieWatson tink.uk16

Accessibility APIs

@LeonieWatson tink.uk17

Platform accessibility APIsWindows: MSAA UIAutomation IAccessible2Mac OS: NSAccessibility ProtocolLinux: IAccessible2 ATK/AT-ASPIiOS: UIAccessibilityAndroid: Accessibility Framework@LeonieWatson tink.uk18

[twitter]Accessibility APIs: a key to web accessibility http://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/[/twitter]

18

Platform controlRole is "checkbox"Name is "Bold"State is "Focused Checked Focusable"@LeonieWatson tink.uk19

19

Web controlRole is "checkbox"Name is "Bold"State is "Focused Checked Focusable"

Bold

@LeonieWatson tink.uk20

HTML accessibility API mappingsMappings between HTML elements and attributes and the platform accessibility APIshttp://www.w3.org/TR/html-aam-1.0/@LeonieWatson tink.uk21

[twitter].@W3C HTML accessibility API mappings http://www.w3.org/TR/html-aam-1.0/ [/twitter][twitter].@W3C HTML accessibility API mappings 1.0 http://www.w3.org/TR/html-aam-1.0/[/twitter]21

Browser mechanics

@LeonieWatson tink.uk22

Dom tree@LeonieWatson tink.uk23

23

Accessibility tree@LeonieWatson tink.uk24

24

Accessibility API access

@LeonieWatson tink.uk25

Using JavaScriptAccessibility APIs can't be accessed directly with JavaScript yetW3C Web Platforms WG will work on JavaScript access to accessibility APIs@LeonieWatson tink.uk26

Using ARIAARIA 1.0 (W3C Recommendation)ARIA 1.1 (W3C Working draft)@LeonieWatson tink.uk27

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

Roles30+ roles including:dialogslidertoolbartreetablist@LeonieWatson tink.uk28

28

alert roleImportant time-sensitive notifications

Email deleted

@LeonieWatson tink.uk29

29

note roleNote relevant to the main content

Loves cooking, dancing, and drinking tequila (although not necessarily in that order).

@LeonieWatson tink.uk30

30

States9 states including:aria-checkedaria-pressedaria-hiddenaria-invalid@LeonieWatson tink.uk31

Aria-pressed attributeIndicates whether a button is pressed

Mute@LeonieWatson tink.uk32

32

Aria-invalid attributeIndicates when a form field is invalid

Email

@LeonieWatson tink.uk33

33

Properties20+ properties including:aria-controlsaria-describedbyaria-labelAria-level@LeonieWatson tink.uk34

34

Aria-label attributeProvides an accessible name

@LeonieWatson tink.uk35

35

Aria-describedby attributeProvides an accessible description

Date of birth

Date must be DD/MM/YYYY@LeonieWatson tink.uk36

36

Aria-haspopup attributeIndicates that a popup menu is available

Account

@LeonieWatson tink.uk37

37

ARIA constraintsDoesn't change the DOM, only the accessibility treeIs only available to assistive technologiesDoesn't provide functionality or behaviour@LeonieWatson tink.uk38

38

Visual ARIABookmarklet tool for visualising ARIA in actionhttp://whatsock.com/training/matrices/visual-aria.htm@LeonieWatson tink.uk39

[twitter]Visual ARIA by @BryanEGaraventa http://whatsock.com/training/matrices/visual-aria.htm[/twitter]39

Disclosure design pattern

@LeonieWatson tink.uk40

Basic HTML

Tequila

Makes me happy@LeonieWatson tink.uk41

41

Using a mouse

42

Using a Keyboard

43

Add button role

Tequila

@LeonieWatson tink.uk44

44

Add tabindex attribute

Tequila

@LeonieWatson tink.uk45

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

46

Add keyboard event listenervar button = document.getElementById("button");button.addEventListener("click", toggleDisclosure);button.addEventListener("keydown", toggleDisclosure);@LeonieWatson tink.uk47

Add keyboard interactionfunction toggleDisclosure(event) {var type = event.type;if (type === "keydown" && (event.keyCode !== 13 && event.keyCode !== 32)) {return true;}event.preventDefault();}@LeonieWatson tink.uk48

Add aria-expanded attribute

Tequila

Makes me happy@LeonieWatson tink.uk52

Associate styles with statediv[aria-hidden="true] { display: none; }div[aria-hidden="false] {display: block;border: 1px #000 solid;padding: 1em;background: #555;color: #FFF;}@LeonieWatson tink.uk53

Add functionalityfunction toggleDisclosure(event) {var button = document.getElementById("button");var content = document.getElementById("content");

if(content.getAttribute("aria-hidden") == "true") {content.setAttribute("aria-hidden", "false");button.setAttribute("aria-expanded", "true");} else {content.setAttribute("aria-hidden", "true");button.setAttribute("aria-expanded", "false");}}@LeonieWatson tink.uk54

54

Using a screen reader

Thank you. Questions?

@LeonieWatson tink.uk56

null1097.1425null10266.117