1 / 59

ARIA + HTML5

Steve Faulkner & Hans Hillen The Paciello Group. ARIA + HTML5. foreward. If you can avoid using: JavaScript CSS ARIA HTML5 DO IT! Now back to reality. not an expert. I am not an expert I know some things about HTML5 and WAI-ARIA

aulii
Télécharger la présentation

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. Steve Faulkner & Hans Hillen The Paciello Group ARIA + HTML5

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

  3. 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

  4. the sign Hans or Gez or Leonie email or tweet

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

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

  7. Web application

  8. No JavaScript

  9. No CSS

  10. Web application

  11. No CSS

  12. No JavaScript

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

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

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

  16. ARIA? 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 2013

  18. 2013 <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 • SVG – ARIA in SVG 2 • MATHML • MXML • XUL

  20. ARIA+XUL Hans hillen Firebug

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

  22. ARIA and RIAs WAI-ARIA Introduction WAI= Web Accessibility Initiative ARIA = Accessible Rich Internet Applications

  23. ARIA and RIAs This is the problem: <div tabindex="0" act="20" class="T-I J-J5-Ji nu T-I-ax7 L3" style="-moz-user-select: none;" 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> source: Gmail

  24. 2013 – Google presentation app 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

  25. ARIA and RIAs What’s it do? OK link graphic OK

  26. ARIA role=“button" What’s it do? OK button OK To activate press spacebar

  27. ARIA role=“button" What’s gained? Correctroleinformation: “Button” Usage instructions: “To activate press spacebar””

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

  29. aria-pressed=“true|false" What’s gained? stateinformation: “pressed”

  30. 2013 – Google presentation app 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

  31. Custom button Steps to make a custom button accessible

  32. ARIA and RIAs <div role="banner"> <div aria-haspopup="true">

  33. ARIA and RIAs

  34. ARIA and RIAs typically act as containers that manage other, contained widgets.

  35. Properties (including states) attributes

  36. ARIA and RIAs 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

  37. ARIA and RIAs • There are conformance rules: • HTML5 – WAI-ARIA 3.2.7 • But they are difficult to decipher • Using ARIA in HTML

  38. ARIA and RIAs • 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. <!DOCTYPE html>

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

  40. Landmarks The following roles are regions of the page intended as navigational landmarks. form = <form> html4 main = <main> html5 navigation = <nav> html5 Search Application = don’t use as a landmark banner = <header> html5* complementary= <aside> html5 contentinfo = <footer> html5*

  41. Landmarks Using WAI -ARIA Landmark Roles| Screen reader support for HTML5 sections

  42. Properties (including states) attributes

  43. 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 • Free screen readers: NVDA, ORCA • VoiceOver • ChromeVox • Libraries (support) • ExtJs, Jquery, Dojo, GWT, YUI, Glow + others

  44. How well is ARIA supported?

  45. Accessible Widgets Examples • JQuery • http://hanshillen.github.com/jqtest/ • Extjs GXT • http://dev.sencha.com/playpen/gxt/aria2/test.html • OpenAJAX examples • http://www.oaa-accessibility.org/examples/ Accessibility in Tomorrows Web - WWW 2201212

  46. 1st rule of ARIA use 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.

  47. 1st rule of ARIA use 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. • If the feature is available in HTML but it is not implemented or it is implemented, but accessibility support is not.

  48. 2ndrule of ARIA use 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: <h1 role=button>heading button</h1> Dothis: <h1><span role=button>heading button</span></h1> Or better, do this: <h1><button>heading button</button></h1> 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.

  49. 3rd rule of ARIA use 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 Practices

  50. HTML5 • Accessibility support: www.HTML5accessibility.com • New interactive elements: html5 interactive controls • Canvas: canvas example • Structural elements: HTML5 structural elements • Figure and figcaption: figures and figcaption

More Related