Accessible Rich Internet Applications for the OU

WAI-ARIAN Freear 10 April 2008

Agenda• What is the problem?• Solution• Timeline/ roadmap• Support• Implementation• Examples• OU applications – ideas?• Tools/ links• Conclusion/ discussion

What is this? (A: html+code imitating a tree view)

What is the problem?• Accessibility of composite form & UI widgets: recognition• Keyboard support, focus• Event-driven pages/applications, Javascript, AJAX

• Particularly keyboard & screen reader accessibility• Pace of Web development versus standards

WAI-ARIA components• Make any HTML element focusable

– tabindex="-1" focus only ; "0" focus + tab• Roles taxonomy, predefined +, role="slider"• States eg. 'hidden' ( aria-hidden="true" )• Properties eg. 'valuenow' ( aria-valuenow="6" ) • Keyboard support – Javascript

Role types• (Taxonomy roles: roletype, widget, composite …)• User input: checkbox, listbox, option …• User interface: tree, treeitem, tabpanel, menu …• Document structure: section, sectionhead, presentation

...• Specialised regions: alert, log …• Landmark roles: main, navigation, search …

Timeline• Rich Schwerdtfeger IBM/W3C, CSUN 2005…

• 2nd/3rd W3C working draft February 2008– specification, primer, best practice, roadmap…– prefer no namespace/ Firefox 3 B

…

• W3C Recommendation 2008/09 ?

Use it now – no harm!

Support• Firefox (1.5 to) 3.0 beta 5: most roles, not Landmark ones

• Internet Explorer 8 beta 1: incomplete?

• Opera 9.5 beta "Basic implementation of …ARIA"

• JAWS 7.0, 7.1, 8.0+• Window-Eyes 5.5+• ZoomText 9.1+• Gnome Orca 2.20+• Fire Vox/ clc-4-tts bundle 3.6: live regions only

API mappings• Windows: Microsoft Active Accessibility (MSAA)• UNIX/ Linux/ Gnome: ATK/ AT-SPI• IBM/ Windows: IAccessible2, complements MSAA

• Mozilla document the mappings

Implementation• No namespace: preferred (aria-X_PROP_OR_STATE)

– "… implementation without namespaces may be used even in languages that support namespaces … SVG supports namespace extensions but it is preferred to use ARIA without namespaces …" ARIA WD Feb '08

– Works in Firefox 3 (beta)• Inline: won't validate w/o customised DTD/schema• Javascript: class="axs slider tabindex-1 valuenow-50 …"

Best practice• Prefer native markup, eg. NOT role="checkbox"• Define roles, groups, relationships• Use states, properties – keyboard, mouse events• CSS [aria-hidden=true] {visibility: hidden} • Semantics, prefer <li> to <div>• Prefer foreground images, for high contrast settings• Progressive enhancement, for no Javascript

Live region

<div role="log" aria-atomic="false" aria-busy="false" aria-channel="main" aria-labelledby="l_label" aria-live="polite" aria-relevant="additions" ></div>

Example slider in Inspect32

Slider in Windows high-contrast

OU applications• Mozilla pretty slider +

• OUVLE/ OpenLearn/ Moodle– Chat, form validation, forms (survey module)

• Knowledge Network– Forms, AJAX ?

• Social:Learn

? ?

Links 1• WAI-ARIA, http://w3.org/TR/wai-aria

• Overview, http://w3.org/WAI/intro/aria • Mozilla, http://developer.mozilla.org/en/docs/Accessible_DHTML

• UIUC tests, http://test.cita.uiuc.edu/aria • Live regions, http://accessibleajax.clcworld.net • A List Apart, http://alistapart.com/articles/waiaria • IBM, http://www.csun.edu/cod/conf/2005/proceedings/2524.htm

Links 2 tools• Firefox 3b, http://mozilla.com/en-US/firefox/all-beta.html • Accessibility extension 1.4+, http://firefox.cita.uiuc.edu • Fire Vox, http://firevox.clcworld.net • Inspect32, http://microsoft.com/downloads - search "MSAA"

• JAWS trial, http://freedomscientific.com • Dojo AJAX, http://dojotoolkit.org/projects/core • Reefchat, http://reefchat.overscore.com • (Opera 9b, http://opera.com/docs/changelogs/windows/950b1 )• (IE 8b, http://code.msdn.microsoft.com/ie8whitepapers - browse)• (DTD, http://freear.org.uk/dtd/xhtml-role-state-n.dtd )

Nick Freear, Application/Web Developer, Institute of Educational Technology, N.D.Freear@open.ac.uk

http://kn.open.ac.uk/tech_coffee_mornings

? ? ? ?

Questions, NotesThank you for the questions. Para-phrasing:

• S.Marshall, Q: what is the situation with (X)HTML 5 & ARIA?

– Nick, A: I think ARIA is a stop gap, but not necessarily a short-term one – it extends legacy HTML, which accounts for most of the Web, and is likely to for some years.

• C.Colwell, Q: will WAI-ARIA break sites in older assistive tech.?

– Nick, A: no, it is backwards compatible. In reality, older screen readers without ARIA support (particularly live-region support) will be in use for a while.

• Accessibility extension currently only works up to Firefox 3 beta 4.

• Fire Vox extension currently only works with Firefox 2.x.

In conclusion, use roles states & properties, now.<div role="slider" tabindex="0" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" …></div>