accessible rich internet applications for the ou
DESCRIPTION
About how the W3C's draft "Accessible Rich Internet Applications" (WAI-ARIA) standard could be applied at the Open University. Presented at a technology coffee morning, Institute of Educational Technology, The Open University, in April 2008.TRANSCRIPT
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, [email protected]
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>