PowerPoint Presentation

Developers guide to accessibility mechanicsFluent 2016

1

Accessibility mechanics

@LeonieWatson tink.uk

2

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

3

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

Bold

@LeonieWatson tink.uk4

4

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

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

5

Heading semantics

6

Landmark semantics

7

Dom tree

8

Accessibility tree

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

Neutral semantics and are semantically neutral and @LeonieWatson tink.uk

10

Link design patternLjwatson.github.io/design-patterns/link1/link.html@LeonieWatson tink.uk

11

Link demo

@LeonieWatson tink.uk

12

Link keyboard demo

@LeonieWatson tink.uk

13

HTML

Tink UK

@LeonieWatson tink.uk

14

Add tabindex attribute

Tink UK

@LeonieWatson tink.uk

Add focus stylesspan:hover, span:focus, span:active { color:#000; background-color: #fc0;cursor: pointer;}

@LeonieWatson tink.uk

16

Add role attribute

Tink UK

@LeonieWatson tink.uk

Add event listenerslink.addEventListener("click", fetchResource);link.addEventListener("keydown", fetchResource);@LeonieWatson tink.uk

18

Add functionalityvar fetchResource = function (e) { e.preventDefault(); window.location.href = e.target.dataset.link;};

@LeonieWatson tink.uk

19

Add keyboard functionalityvar fetchResource = function (e) { if (e.type === "keydown" && e.keyCode !== 13) { return false; }

e.preventDefault(); window.location.href = e.target.dataset.link;};

@LeonieWatson tink.uk

20

Link screen reader demo

@LeonieWatson tink.uk

21

ToggleTip design patternLjwatson.github.io/design-patterns/toggletip2/toggletip.html@LeonieWatson tink.uk

22

ToggleTip demo@LeonieWatson tink.uk

23

ToggleTip keyboard demo

@LeonieWatson tink.uk

HTMLTequila

@LeonieWatson tink.uk

25

Add tabindex attributeTequila

@LeonieWatson tink.uk

26

Add focus stylesspan[id="button"]:hover, span[id="button"]:focus { background-color: #fc0;color: #555;}

@LeonieWatson tink.uk

27

Add role attributesTequila

@LeonieWatson tink.uk

28

Add aria-expanded attributeTequila

@LeonieWatson tink.uk

Add aria-describedby attributeTequila

@LeonieWatson tink.uk

Add hidden attributeTequila

@LeonieWatson tink.uk

Add aria-live attributeTequila

@LeonieWatson tink.uk

Add event listenersbutton.addEventListener('click', toggleTip, false);

button.addEventListener('keydown', function(e) { if (e.keyCode == 13 || e.keycode == 32) { toggleTip(); }});@LeonieWatson tink.uk

Add more keyboard interactiondocument.addEventListener('keydown', function(e) { if (e.keyCode == 27) { toggleTip(); }});@LeonieWatson tink.uk

If toggletip is hiddenbutton.setAttribute('aria-expanded', 'true');content.innerHTML = "Makes me happy!";tip.removeAttribute('hidden');@LeonieWatson tink.uk

35

If toggletip is not hiddenbutton.setAttribute('aria-expanded', 'false');content.innerHTML = '';tip.setAttribute('hidden', true);@LeonieWatson tink.uk

36

ToggleTip screen reader demo

@LeonieWatson tink.uk

ToggleTip screen reader demo

@LeonieWatson tink.uk

Tab panels design patternLjwatson.github.io/design-patterns/tabpanels1/tabpanel.html@LeonieWatson tink.uk

39

HTML

Blanco

Reposado

@LeonieWatson tink.uk

More HTMLBlanco tequila

Reposado tequila@LeonieWatson tink.uk

HTML screen reader demo

@LeonieWatson tink.uk

42

Add role attributes

Blanco

Blanco tequila@LeonieWatson tink.uk

45

Add aria-selected attribute

Blanco

Reposado

@LeonieWatson tink.uk

Add hidden attributeBlanco tequila

Reposado tequila@LeonieWatson tink.uk

Add aria-labelledby attribute

Blanco tequila

Reposado tequila

@LeonieWatson tink.uk

Add keyboard interactionListen for keydown, capture keycodes:

Left 37Right 38Up 39Down 40@LeonieWatson tink.uk

50

Tab panels screen reader demo

@LeonieWatson tink.uk

Quick & dirty accessibility mechanicsUse the right HTML (let the browser do the work)Provide focus and keyboard supportProvide accessible names and descriptionsCommunicate state@LeonieWatson tink.uk

52

Thank youLjwatson.github.io/design-patterns/@LeonieWatson tink.uk

53