1 / 39

ARIA + HTML5

ARIA + HTML5. Steve Faulkner & Hans Hillen The Paciello Group. Course Material. www.paciellogroup.com/training/CSUN2012 Examples: http://www.html5accessibility.com/CSUN12/. foreward. If you can avoid using: JavaScript CSS ARIA HTML5 DO IT! Now back to reality. not an expert.

deacon-cline
Download Presentation

ARIA + HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Course Material • www.paciellogroup.com/training/CSUN2012 • Examples: 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’ HTML- 2.0 1995 button HTML- 5 2012

  18. 2012 <div tabindex="0" role="button" act="20" class="T-I J-J5-Ji nu T-I-ax7 L3" style="-moz-user-select: none;" aria-label="Refresh" data-tooltip="Refresh"> <div class="asa"><span class="J-J5-Ji ask">&nbsp;</span> <div class="asf T-I-J3 J-J5-Ji"></div> </div> </div>

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

  20. In the begining

  21. In the begining

  22. ABSTRACT ROLES 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) Don’t use them

  23. widgets typically act as containers that manage other, contained widgets.

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

  25. What roles do Override native html roles If you want the native semantic to be used Do not add a role! BAD <h1 role=“button”>heading text</h1> GOOD <h1> <span role=“button”>heading text</span> </h1>

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

  27. HTML to Platform Accessibility APIs Implementation Guide

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

  29. Widget rolesWhat 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

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

  31. Properties (including states) attributes

  32. 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 <!DOCTYPE html>

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

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

  35. How well is ARIA supported? • Browsers with ARIA support: rough 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) • ExtJs, Jquery, Dojo, GWT, YUI, Glow + others

  36. How well is ARIA supported?

  37. HTML5 • Accessibility support: www.HTML5accessibility.com • New interactive elements: html5 interactive controls • Text alternatives: long descriptions • Canvas: canvas example • Structural elements: HTML5 structural elements • Figure and figcaption: figures and figcaption

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

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

More Related