introduction to accessibility mechanics (fronttalks 2015)
TRANSCRIPT
PowerPoint Presentation
Introduction to accessibility mechanicsFrontTalks, Yekaterinburg@LeonieWatson tink.uk1
1
HTML mechanics
@LeonieWatson tink.uk2
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
@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