Steve Faulkner & Hans Hillen The Paciello Group

  Examples:

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

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

Hans or Gez or Leonie or tweet

There’s a clue in the name: Accessible Rich Internet Applications

“This specification introduces features to HTML and the DOM that ease the authoring of Web-based applications.”

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

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

ARIA Stuff that makes sense without scripting — Landmark roles — A few of the relationship attributes — A few of the document structure roles

ARIA can/could be used with any markup language. — HTML — SVG – ARIA in SVG 2ARIA in SVG 2 — MATHML — MXML — XUL

Firebug

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

WAI-ARIA Introduction WAI = Web Accessibility Initiative ARIA = Accessible Rich Internet Applications

source: Gmail This is the problem:

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

What’s it do? OK link graphic OK

What’s it do? OK button OK To activate press spacebar

What’s gained? Correct role information: “Button” Usage instructions : “To activate press spacebar” ”

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

What’s gained? state information: “pressed”

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

Steps to make a custom button accessible

ARIA attributes rolearia-*

role widget Document structure ‘heading’ Landmark ‘main’ abstract

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

aria-* Widget ‘aria- checked’ Live Region ‘aria-live’ Drag & Drop ‘ aria-dragged’ Relationship ‘aria-labelledby’

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

 There are conformance rules: o HTML5 – WAI-ARIA HTML5 – WAI-ARIA  But they are difficult to decipher o Using ARIA in HTML Using ARIA in HTML

 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.HTML5 DOCTYPEW3C Nu Markup Validation Service

The following roles are regions of the page intended as navigational landmarks. banner banner = html5* complementarycomplementary = html5 contentinfo contentinfo = html5* form form = html4 main main = html5 navigation navigation = html5 Search Application = don’t use as a landmarkdon’t use

Using WAI -ARIA Landmark Roles Using WAI -ARIA Landmark Roles | Screen reader support for HTML5 sectionsScreen reader support for HTML5 sections

aria-* Widget ‘aria- checked’ Live Region ‘aria-live’ Drag & Drop ‘ aria-dragged’ Relationship ‘aria-labelledby’

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

 JQuery o  Extjs GXT o  OpenAJAX examples o Accessibility in Tomorrows Web - WWW / 16 / 12

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.

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.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. accessibility support

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: heading button Do this: heading button Or better, do this: heading button 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.list elements tree widget

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 Practiceskeyboard and structural navigationdesign patternsWAI-ARIA 1.0 Authoring Practices

 Accessibility support:  New interactive elements: html5 interactive controls html5 interactive controls  Canvas: canvas examplecanvas example  Structural elements: HTML5 structural elementsHTML5 structural elements  Figure and figcaption: figures and figcaptionfigures and figcaption

FirefoxInternet ExplorerSafariChrome Windows, LinuxWindowsOSX + IOS Android + IOS + Chrome OS Zoom Keyboard CSS Zoom Keyboard CSS Zoom Keyboard Touch Zoom Keyboard Touch Browsers + Keyboard

FirefoxInternet ExplorerSafariChrome Windows OSX + IOS Android + IOS + Chrome OS shift+alt+print screen shift+alt+print screen Universal Access IOS OSX Contrast Extension Browsers + High Contrast Mode

FirefoxInternet ExplorerSafariChrome Windows, LinuxWindowsOSX + IOS Android + IOS + Chrome OS Web Developer DOM inspector Firebug Developer tools (F12) Developer tools (OSX) Developer tools (OSX + Chrome OS) Developer tools

Firefox – DOM InspectorDOM Inspector

Internet Explorer – Web Accessibility ToolbarWeb Accessibility Toolbar

aViewer

NVDANVDA – A free open source screen reader for Windows NVDA Screen Reader command key quick referencecommand key quick reference

 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