ARIA + HTML5 Steve Faulkner & Hans Hillen The Paciello Group Course Material • www.paciellogroup.com/training/CSUN2012 • Examples: http://www.html5accessibility.com/CSUN12/
Download ReportTranscript ARIA + HTML5 Steve Faulkner & Hans Hillen The Paciello Group Course Material • www.paciellogroup.com/training/CSUN2012 • Examples: http://www.html5accessibility.com/CSUN12/
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 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 the sign Hans email or tweet What is the primary use case for ARIA? There’s a clue in the name: Accessible Rich Internet Applications What was the original name for HTML5? “This specification introduces features to HTML and the DOM that ease the authoring of Webbased applications.” Web application No JavaScript No CSS Web application No CSS No JavaScript ARIA is not so much about content ARIA is about interaction Much of ARIA only makes sense in conjunction with scripting. Much of ARIA is about making sense of scripted interaction 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 ARIA is a ‘bridging technology’ 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" datatooltip="Refresh"> <div class="asa"><span class="J-J5-Ji ask"> </span> <div class="asf T-I-J3 J-J5-Ji"></div> </div> </div> ARIA not just about HTML ARIA can/could be used with any markup language. —HTML —XHTML —SVG —MATHML —MXML —XUL In the begining ARIA attributes role aria-* In the begining abstract role widget Document structure ‘heading’ Landmark ‘main’ 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 widgets widget Simple Composite ‘button’ ‘menubar’ typically act as containers that manage other, contained widgets. Important stuff about roles • What do they do? • How do they do it? • What they don’t do (generally) 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> What do they do? Expose role information to accessibility APIs role=“button” IAccessible2 role UIA Control Pattern Type WAI-ARIA role MSAA role button ROLE_SYSTEM_P IA2_ROLE_TOGGL Button USHBUTTON. E_BUTTON ATK role MAC Accessibi lity Role ATK_ROLE_PUSH _BUTTON AXButton HTML to Platform Accessibility APIs Implementation Guide 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 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 Landmarks The following roles are regions of the page intended as navigational landmarks. application banner complementary html5 contentinfo demo form html4 main navigation html5 search Properties (including states) attributes aria-* Widget Live Region Drag & Drop Relationship ‘aria-checked’ ‘aria-live’ ‘ aria-dragged’ ‘aria-labelledby’ 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> HTML5+ARIA rules There are rules: HTML5 – WAI-ARIA 3.2.7 Conformance warning! You can use: —validator.w3.org/nu/ But some of the rules are out of date 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 How well is ARIA supported? Support score Chart Title 10 9 8 7 6 5 4 3 2 1 0 JAWS 13 NVDA 2012 VoiceOver Orca Window eyes 7.5 1 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 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) thank you www.twitter.com/stevefaulkner www.paciellogroup.com/blog www.html5accessibility.com [email protected]