1. ARIA + HTML5 Steve Faulkner & Hans Hillen The Paciello Group

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

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

4. not an expert 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. the sign Hans email or tweet

6. What is the primary use case for ARIA? There’s a clue in the name: Accessible Rich Internet Applications

7. What was the original name for HTML5? “This specification introduces features to HTML and the DOM that ease the authoring of Web- based applications.”

8. Web application

9. No JavaScript

10. No CSS

11. Web application

12. No CSS

13. No JavaScript

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

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

16. Small subset not scripting related ARIA Stuff that makes sense without scripting —Landmark roles —A few of the relationship attributes —A few of the document structure roles

17. ARIA is a ‘bridging technology’

18. 2012

19. ARIA not just about HTML ARIA can/could be used with any markup language. —HTML —XHTML —SVG —MATHML —MXML —XUL

20. ARIA+XUL Firebug

21. In the begining ARIA attributes rolearia-*

22. In the begining role widget Document structure ‘heading’ Landmark ‘main’ abstract

23. ABSTRACT ROLES Don’t use them command (abstract role) composite (abstract role) input (abstract role) landmark (abstract role) range (abstract role) roletype (abstract role) section (abstract role) sectionhead (abstract role) select (abstract role) structure (abstract role) widget (abstract role) window (abstract role)

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

25. Important stuff about roles What do they do? How do they do it? What they don’t do (generally)

26. What roles do Override native html roles If you want the native semantic to be used Do not add a role! BAD heading text GOOD heading text

27. What do they do? role=“button” Expose role information to accessibility APIs

28. A tool to look inder the hood Aviewer

29. WAI-ARIA role MSAA role IAccessible2 role UIA Control Pattern Type ATK role MAC Accessibi lity Role button ROLE_SYSTEM_P USHBUTTON. IA2_ROLE_TOGGL E_BUTTON Button ATK_ROLE_PUSH _BUTTON AXButton HTML to Platform Accessibility APIs Implementation Guide

30. Widget roles What do they do? role=“button” “to activate press space bar” http://www.paciellogroup.com/blog/aria-tests/user-input-widgets.html demo

31. Widget roles What they don’t do? 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 Button example

32. Landmarks The following roles are regions of the page intended as navigational landmarks. application banner complementarycomplementary html5 contentinfo form form html4 main navigation navigation html5 search demo

33. aria-* Widget ‘aria-checked’ Live Region ‘aria-live’ Drag & Drop ‘ aria-dragged’ Relationship ‘aria-labelledby’ Properties (including states) attributes

34. conformance —Use of ARIA in HTML<5 is non conforming and probably always will be. —It doesn’t make any difference —Simple solution – use the HTML5 doctype

35. HTML5+ARIA rules There are rules: HTML5 – WAI-ARIA 3.2.7

36. Conformance warning! You can use: —validator.w3.org/nu/validator.w3.org/nu/ But some of the rules are out of date

37. How well is ARIA supported? 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 –Zoomtext –Free screen readers: NVDA, ORCA –VoiceOver –ChromeVox Libraries (support)support –ExtJs, Jquery, Dojo, GWT, YUI, Glow + others

38. How well is ARIA supported?

39. HTML5 Accessibility support: www.HTML5accessibility.com www.HTML5accessibility.com New interactive elements: html5 interactive controls html5 interactive controls Text alternatives: long descriptionslong descriptions Canvas: canvas examplecanvas example Structural elements: HTML5 structural elementsHTML5 structural elements Figure and figcaption: figures and figcaptionfigures and figcaption

40. tools 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

41. thank you www.twitter.com/stevefaulkner www.paciellogroup.com/blog www.html5accessibility.com sfaulkner@paciellogroup.com