ARIA + HTML5 Steve Faulkner & Hans Hillen The Paciello Group

Course Material Examples:

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 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 Web- based 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

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

ARIA+XUL Firebug

In the begining ARIA attributes rolearia-*

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

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)

widgets widget Simple ‘button’ Composite ‘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 heading text GOOD heading text

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

A tool to look inder the hood Aviewer

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

Widget roles What do they do? role=“button” “to activate press space bar” 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 complementarycomplementary html5 contentinfo form form html4 main navigation navigation html5 search demo

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

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

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

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

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

How well is ARIA supported?

HTML5 Accessibility support: 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

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

thank you