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
@LeonieWatson tink.uk
More HTMLBlanco tequila
Reposado tequila@LeonieWatson tink.uk
HTML screen reader demo
@LeonieWatson tink.uk
42
Add role attributes
Blanco tequila@LeonieWatson tink.uk
45
Add aria-selected attribute
@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
