1. Steve Faulkner & Hans Hillen The Paciello Group

2.  www.paciellogroup.com/training/CSUN2012 www.paciellogroup.com/training/CSUN2012  Examples: http://www.html5accessibility.com/CSUN12/ http://www.html5accessibility.com/CSUN12/

3. If you can avoid using: — JavaScript — CSS — ARIA — HTML5 DO IT! Now back to reality...

4. I am not an expert I know some things about HTML5 and WAI-ARIA I know some people who know some other things about HTML5 and WAI-ARIA I will hold up a virtual sign if you ask a question I cannot answer Consider it held up when you ask a question and I look vague

5. Hans or Gez or Leonie email or tweet

6. There’s a clue in the name: Accessible Rich Internet Applications

7. “This specification introduces features to HTML and the DOM that ease the authoring of Web-based applications.”

14. WAI-ARIA Introduction What is it? It’s a W3C Specification, like HTML, CSS etc.

15. ARIA is not so much about content ARIA is about interaction

16. Much of ARIA only makes sense in conjunction with scripting. Much of ARIA is about making sense of scripted interaction

17. ARIA Stuff that makes sense without scripting — Landmark roles — A few of the relationship attributes — A few of the document structure roles

20. ARIA can/could be used with any markup language. — HTML — SVG – ARIA in SVG 2ARIA in SVG 2 — MATHML — MXML — XUL

21. Firebug

22.  Issues with (accessible) rich internet applications o Number 1 is the problems associated with custom controls o Number 2 is all the other usual issues with the accessibility of web content  Number 1 can be helped by use of ARIA markup

23. WAI-ARIA Introduction WAI = Web Accessibility Initiative ARIA = Accessible Rich Internet Applications

24. source: Gmail This is the problem:

25. HTML:1, HEAD:1, META:7, TITLE:1, SCRIPT:103, STYLE:11, LINK:3, BODY:1, DIV:2160, H2:1, OL:2, LI:4, A:17, SPAN:596, IMG:6, TABLE:29, TBODY:29, TR:106, TD:572, NOSCRIPT:1, TEXTAREA:4, I:1, INPUT:2, svg:42, rect:158, g:2505, text:1263, path:135, tspan:45, defs:39, filter:39, feGaussianBlur:39, image:29, line:31, IFRAME:5, B:2, UL:1, TH:20, H3:10

26. What’s it do? OK link graphic OK

27. What’s it do? OK button OK To activate press spacebar

28. What’s gained? Correct role information: “Button” Usage instructions : “To activate press spacebar” ”

29. Highlight (on) Highlight (off) button Highlight pressed button Highlight aria-pressed="false"aria-pressed=“true"

30. What’s gained? state information: “pressed”

31. HTML:1, HEAD:1, META:7, TITLE:1, SCRIPT:103, STYLE:11, LINK:3, BODY:1, DIV:2160, H2:1, OL:2, LI:4, A:17, SPAN:596, IMG:6, TABLE:29, TBODY:29, TR:106, TD:572, NOSCRIPT:1, TEXTAREA:4, I:1, INPUT:2, svg:42, rect:158, g:2505, text:1263, path:135, tspan:45, defs:39, filter:39, feGaussianBlur:39, image:29, line:31, IFRAME:5, B:2, UL:1, TH:20, H3:10

32. Steps to make a custom button accessible

33. ARIA attributes rolearia-*

34. role widget Document structure ‘heading’ Landmark ‘main’ abstract

35. widget Simple ‘button’ Composite ‘menubar’ typically act as containers that manage other, contained widgets.

36. aria-* Widget ‘aria- checked’ Live Region ‘aria-live’ Drag & Drop ‘ aria-dragged’ Relationship ‘aria-labelledby’

37. ARIA roles- They are not magic! They do not (generally) add ANY interaction behaviours. Adding a role does not:  Make an element focusable  Provide keyboard events  Add properties

38.  There are conformance rules: o HTML5 – WAI-ARIA 3.2.7 HTML5 – WAI-ARIA 3.2.7  But they are difficult to decipher o Using ARIA in HTML Using ARIA in HTML

39.  ARIA validation Use of ARIA in HTML<5 is non conforming and probably always will be. It doesn’t make any difference, it still works The easiest method is to use the HTML5 DOCTYPE with ARIA markup and validate using the W3C Nu Markup Validation Service.HTML5 DOCTYPEW3C Nu Markup Validation Service

40. http://validator.w3.org/nu/

41. The following roles are regions of the page intended as navigational landmarks. banner banner = html5* complementarycomplementary = html5 contentinfo contentinfo = html5* form form = html4 main main = html5 navigation navigation = html5 Search Application = don’t use as a landmarkdon’t use

42. Using WAI -ARIA Landmark Roles Using WAI -ARIA Landmark Roles | Screen reader support for HTML5 sectionsScreen reader support for HTML5 sections

43. aria-* Widget ‘aria- checked’ Live Region ‘aria-live’ Drag & Drop ‘ aria-dragged’ Relationship ‘aria-labelledby’

44. Browsers with ARIA support: rough guiderough guide – Firefox 3+ – Internet Explorer 8+ – Safari 5 (Mac/iOS) – Chrome 17 Assistive Technology: – JAWS 8 and up – WindowEyes 5.5 and up – Free screen readers: NVDA, ORCA – VoiceOver – ChromeVox Libraries (support)support – ExtJs, Jquery, Dojo, GWT, YUI, Glow + others

46.  JQuery o http://hanshillen.github.com/jqtest/ http://hanshillen.github.com/jqtest/  Extjs GXT o http://dev.sencha.com/playpen/gxt/aria2/test.html http://dev.sencha.com/playpen/gxt/aria2/test.html  OpenAJAX examples o http://www.oaa-accessibility.org/examples/ http://www.oaa-accessibility.org/examples/ 46Accessibility in Tomorrows Web - WWW 220121204 / 16 / 12

47. If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

48. Under what circumstances may this not be possible?  If the visual design constraints rule out the use of a particular native element, because the element cannot be styled as required.  If the feature is not currently available in HTML.not currently available in HTML  If the feature is available in HTML but it is not implemented or it is implemented, but accessibility support is not. accessibility support

49. Do not change native semantics, unless you really have to. For example: Developer wants to build a heading that's a button. Do not do this: heading button Do this: heading button Or better, do this: heading button Note: it is OK to use native HTML elements, that have similar semantics to ARIA roles used, for fallback. For example using HTML list elements for the skeleton of an ARIA enabled, scripted tree widget.list elements tree widget

50. All interactive ARIA controls must be usable with the keyboard. If you create a widget that a user can click or tap or drag or drop or slide or scroll a user must also be able navigate to the widget and perform an equivalent action using the keyboard. All interactive widgets must be scripted to respond to standard key strokes or key stroke combinations where applicable. For example if using role=button the element must be able to recieve focus and a user just be able to activate the action associated with the element using both the enter and the space key. Refer to the keyboard and structural navigation and design patterns sections of the WAI-ARIA 1.0 Authoring Practiceskeyboard and structural navigationdesign patternsWAI-ARIA 1.0 Authoring Practices

51.  Accessibility support: www.HTML5accessibility.comwww.HTML5accessibility.com  New interactive elements: html5 interactive controls html5 interactive controls  Canvas: canvas examplecanvas example  Structural elements: HTML5 structural elementsHTML5 structural elements  Figure and figcaption: figures and figcaptionfigures and figcaption

52. FirefoxInternet ExplorerSafariChrome Windows, LinuxWindowsOSX + IOS Android + IOS + Chrome OS Zoom Keyboard CSS Zoom Keyboard CSS Zoom Keyboard Touch Zoom Keyboard Touch Browsers + Keyboard

53. FirefoxInternet ExplorerSafariChrome Windows OSX + IOS Android + IOS + Chrome OS shift+alt+print screen shift+alt+print screen Universal Access IOS OSX Contrast Extension Browsers + High Contrast Mode

54. FirefoxInternet ExplorerSafariChrome Windows, LinuxWindowsOSX + IOS Android + IOS + Chrome OS Web Developer DOM inspector Firebug Developer tools (F12) Developer tools (OSX) Developer tools (OSX + Chrome OS) Developer tools

55. Firefox – DOM InspectorDOM Inspector

56. Internet Explorer – Web Accessibility ToolbarWeb Accessibility Toolbar

57. aViewer

58. NVDANVDA – A free open source screen reader for Windows NVDA Screen Reader command key quick referencecommand key quick reference

59.  Aviewer (free desktop application for windows ) Aviewer  Dom Inspector (free Firefox extension) Dom Inspector  Inspect.exe (free desktop application for windows available as part of the Windows SDK) Inspect.exe  Accprobe (free open source cross platform app) Accprobe  Accessibility Inspector (free Mac app) Accessibility Inspector  Java ferret (free cross platform app) Java ferret  Accerciser (free gnome desktop app) Accerciser

60. www.twitter.com/stevefaulkner www.paciellogroup.com/blog www.html5accessibility.com sfaulkner@paciellogroup.com