Accessible Rich Internet Applications for the OU


Published on

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.

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Admin menu in Moodle – a ‘treeview’
  • tabindex on any element, a property – breaks previous standards, controversial – Joe Clark. Namespace, "aria-" prefix – explained later!
  • RDF/OWL taxonomy, Landmark roles - XHTML Role Attribute Module (XHTML 1.1), Parent/ child roles: roletype > widget, Parent/child elements: tree > treeitem, Multiple roles: space-separated.
  • MSAA 1995 Java Accessibility API Mac OS X Accessibility Protocol/ framework/ API
  • A slider widget, based on Mozilla's test, Added progressive enhancement … For javascript disabled, For alternative styles, eg. Windows high contrast mode.
  • Examples: Live region? home page ?
  • UIUC, Jon Gunderson, Live region tests/ Fire Vox, Charles Chen (Aaron Leventhal), A List Apart article, Martin Kliehm, IBM, Rich Schwerdtfeger, Becky Gibson.
  • Fire Vox, Charles Chen (Google) Inspect32, Reefchat for Fire Vox, Peter Thiessen, Charles Silverman
  • Accessible Rich Internet Applications for the OU

    1. 1. Accessible Rich Internet Applications for the OU WAI-ARIA N Freear 10 April 2008
    2. 2. Agenda <ul><li>What is the problem? </li></ul><ul><li>Solution </li></ul><ul><li>Timeline/ roadmap </li></ul><ul><li>Support </li></ul><ul><li>Implementation </li></ul><ul><li>Examples </li></ul><ul><li>OU applications – ideas? </li></ul><ul><li>Tools/ links </li></ul><ul><li>Conclusion/ discussion </li></ul>
    3. 3. What is this? (A: html+code imitating a tree view)
    4. 4. What is the problem? <ul><li>Accessibility of composite form & UI widgets: recognition </li></ul><ul><li>Keyboard support, focus </li></ul><ul><li>Event-driven pages/applications, Javascript, AJAX </li></ul><ul><li>Particularly keyboard & screen reader accessibility </li></ul><ul><li>Pace of Web development versus standards </li></ul>
    5. 5. WAI-ARIA components <ul><li>Make any HTML element focusable </li></ul><ul><ul><li>tabindex=&quot;-1&quot; focus only ; &quot;0&quot; focus + tab </li></ul></ul><ul><li>Roles taxonomy, predefined +, role=&quot;slider&quot; </li></ul><ul><li>States eg. 'hidden' ( aria-hidden =&quot;true&quot; ) </li></ul><ul><li>Properties eg. 'valuenow' ( aria-valuenow =&quot;6&quot; ) </li></ul><ul><li>Keyboard support – Javascript </li></ul>
    6. 6. Role types <ul><li>(Taxonomy roles: roletype, widget, composite …) </li></ul><ul><li>User input: checkbox, listbox, option … </li></ul><ul><li>User interface: tree, treeitem, tabpanel, menu … </li></ul><ul><li>Document structure: section, sectionhead, presentation ... </li></ul><ul><li>Specialised regions: alert, log … </li></ul><ul><li>Landmark roles: main, navigation, search … </li></ul>
    7. 7. Timeline <ul><li>Rich Schwerdtfeger IBM/W3C, CSUN 2005 </li></ul><ul><li>… </li></ul><ul><li>2nd/3rd W3C working draft February 2008 </li></ul><ul><ul><li>specification, primer, best practice, roadmap… </li></ul></ul><ul><ul><li>prefer no namespace/ Firefox 3 B </li></ul></ul><ul><li>… </li></ul><ul><li>W3C Recommendation 2008/09 ? </li></ul><ul><li>Use it now – no harm! </li></ul>
    8. 8. Support <ul><li>Firefox (1.5 to) 3.0 beta 5: most roles, not Landmark ones </li></ul><ul><li>Internet Explorer 8 beta 1: incomplete? </li></ul><ul><li>Opera 9.5 beta &quot; Basic implementation of …ARIA &quot; </li></ul><ul><li>JAWS 7.0, 7.1, 8.0+ </li></ul><ul><li>Window-Eyes 5.5+ </li></ul><ul><li>ZoomText 9.1+ </li></ul><ul><li>Gnome Orca 2.20+ </li></ul><ul><li>Fire Vox/ clc-4-tts bundle 3.6: live regions only </li></ul>
    9. 9. API mappings <ul><li>Windows: Microsoft Active Accessibility (MSAA) </li></ul><ul><li>UNIX/ Linux/ Gnome: ATK/ AT-SPI </li></ul><ul><li>IBM/ Windows: IAccessible2, complements MSAA </li></ul><ul><li>Mozilla document the mappings </li></ul>
    10. 10. Implementation <ul><li>No namespace: preferred ( aria- X_PROP_OR_STATE ) </li></ul><ul><ul><li>&quot;… 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 …&quot; ARIA WD Feb '08 </li></ul></ul><ul><ul><li>Works in Firefox 3 (beta) </li></ul></ul><ul><li>Inline: won't validate w/o customised DTD/schema </li></ul><ul><li>Javascript: class=&quot;axs slider tabindex-1 valuenow-50 …&quot; </li></ul>
    11. 11. Best practice <ul><li>Prefer native markup, eg. NOT role=&quot;checkbox&quot; </li></ul><ul><li>Define roles, groups, relationships </li></ul><ul><li>Use states, properties – keyboard, mouse events </li></ul><ul><li>CSS [aria-hidden=true] {visibility: hidden} </li></ul><ul><li>Semantics, prefer <li> to <div> </li></ul><ul><li>Prefer foreground images, for high contrast settings </li></ul><ul><li>Progressive enhancement, for no Javascript </li></ul>
    12. 12. Live region <ul><li><div </li></ul><ul><li>role=&quot;log&quot; </li></ul><ul><li>aria-atomic =&quot;false&quot; </li></ul><ul><li>aria-busy =&quot;false&quot; </li></ul><ul><li>aria-channel=&quot;main&quot; </li></ul><ul><li>aria-labelledby=&quot;l_label&quot; </li></ul><ul><li>aria-live=&quot;polite&quot; </li></ul><ul><li>aria-relevant=&quot;additions&quot; ></div> </li></ul>
    13. 13. Example slider in Inspect32
    14. 14. Slider in Windows high-contrast
    15. 15. OU applications <ul><li>Mozilla pretty slider + </li></ul><ul><li>OUVLE/ OpenLearn/ Moodle </li></ul><ul><ul><li>Chat, form validation, forms (survey module) </li></ul></ul><ul><li>Knowledge Network </li></ul><ul><ul><li>Forms, AJAX ? </li></ul></ul><ul><li>Social:Learn </li></ul><ul><li>? ? </li></ul>
    16. 16. Links 1 <ul><li>WAI-ARIA, </li></ul><ul><li>Overview, </li></ul><ul><li>Mozilla, </li></ul><ul><li>UIUC tests, </li></ul><ul><li>Live regions, </li></ul><ul><li>A List Apart, </li></ul><ul><li>IBM, </li></ul>
    17. 17. Links 2 tools <ul><li>Firefox 3b, </li></ul><ul><li>Accessibility extension 1.4+, </li></ul><ul><li>Fire Vox, </li></ul><ul><li>Inspect32, - search &quot;MSAA&quot; </li></ul><ul><li>JAWS trial, </li></ul><ul><li>Dojo AJAX, </li></ul><ul><li>Reefchat, </li></ul><ul><li>(Opera 9b, ) </li></ul><ul><li>(IE 8b, - browse ) </li></ul><ul><li>(DTD, ) </li></ul>
    18. 18. <ul><li>Nick Freear , Application/Web Developer, Institute of Educational Technology, [email_address] </li></ul><ul><li>http:// </li></ul><ul><li>? ? ? ? </li></ul>
    19. 19. Questions, Notes <ul><li>Thank you for the questions. Para-phrasing: </li></ul><ul><li>S.Marshall, Q: what is the situation with (X)HTML 5 & ARIA? </li></ul><ul><ul><li>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. </li></ul></ul><ul><li>C.Colwell, Q: will WAI-ARIA break sites in older assistive tech.? </li></ul><ul><ul><li>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. </li></ul></ul><ul><li>Accessibility extension currently only works up to Firefox 3 beta 4. </li></ul><ul><li>Fire Vox extension currently only works with Firefox 2.x. </li></ul><ul><li>In conclusion, use roles states & properties, now. </li></ul><ul><ul><li><div role=&quot;slider&quot; tabindex=&quot;0&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; …></div> </li></ul></ul>