Upload
leonie-watson
View
186
Download
0
Embed Size (px)
Citation preview
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