developer's guide to accessibility mechanics (fluent 2016)
TRANSCRIPT
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