Accessible Rich Internet Applications for the OU WAI-ARIA N Freear 10 April 2008
Agenda <ul><li>What is the problem? </li></ul><ul><li>Solution </li></ul><ul><li>Timeline/ roadmap </li></ul><ul><li>Suppo...
What is this?  (A: html+code imitating a tree view)
What is the problem? <ul><li>Accessibility of composite form & UI widgets:  recognition </li></ul><ul><li>Keyboard support...
WAI-ARIA components <ul><li>Make any HTML element focusable </li></ul><ul><ul><li>tabindex=&quot;-1&quot;  focus only ;  &...
Role types <ul><li>(Taxonomy roles:  roletype, widget, composite …) </li></ul><ul><li>User input:  checkbox, listbox, opti...
Timeline <ul><li>Rich Schwerdtfeger IBM/W3C, CSUN 2005 </li></ul><ul><li>… </li></ul><ul><li>2nd/3rd W3C working draft Feb...
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...
API mappings <ul><li>Windows: Microsoft Active Accessibility (MSAA) </li></ul><ul><li>UNIX/ Linux/ Gnome: ATK/ AT-SPI </li...
Implementation <ul><li>No namespace: preferred ( aria- X_PROP_OR_STATE ) </li></ul><ul><ul><li>&quot;… implementation with...
Best practice <ul><li>Prefer native markup, eg. NOT role=&quot;checkbox&quot; </li></ul><ul><li>Define roles, groups, rela...
Live region <ul><li><div </li></ul><ul><li>role=&quot;log&quot; </li></ul><ul><li>aria-atomic =&quot;false&quot; </li></ul...
Example slider in Inspect32
Slider in Windows high-contrast
OU applications <ul><li>Mozilla pretty slider + </li></ul><ul><li>OUVLE/ OpenLearn/ Moodle </li></ul><ul><ul><li>Chat, for...
Links 1 <ul><li>WAI-ARIA,  http://w3.org/TR/wai-aria   </li></ul><ul><li>Overview,  http://w3.org/WAI/intro/aria   </li></...
Links 2 tools <ul><li>Firefox 3b,  http://mozilla.com/en-US/firefox/all-beta.html   </li></ul><ul><li>Accessibility extens...
<ul><li>Nick Freear , Application/Web Developer, Institute of Educational Technology,  [email_address] </li></ul><ul><li>h...
Questions, Notes <ul><li>Thank you for the questions. Para-phrasing: </li></ul><ul><li>S.Marshall, Q: what is the situatio...
Upcoming SlideShare
Loading in...5
×

Accessible Rich Internet Applications for the OU

2,180

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,180
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
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, &amp;quot;aria-&amp;quot; prefix – explained later!
  • RDF/OWL taxonomy, Landmark roles - XHTML Role Attribute Module (XHTML 1.1), Parent/ child roles: roletype &gt; widget, Parent/child elements: tree &gt; treeitem, Multiple roles: space-separated.
  • MSAA 1995 Java Accessibility API Mac OS X Accessibility Protocol/ framework/ API
  • A slider widget, based on Mozilla&apos;s test, Added progressive enhancement … For javascript disabled, For alternative styles, eg. Windows high contrast mode.
  • Examples: Live region? Open.ac.uk 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, http://microsoft.com/downloads/details.aspx?FamilyID=3755582a-a707-460a-bf21-1373316e13f0 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, http://w3.org/TR/wai-aria </li></ul><ul><li>Overview, http://w3.org/WAI/intro/aria </li></ul><ul><li>Mozilla, http://developer.mozilla.org/en/docs/Accessible_DHTML </li></ul><ul><li>UIUC tests, http://test.cita.uiuc.edu/aria </li></ul><ul><li>Live regions, http://accessibleajax.clcworld.net </li></ul><ul><li>A List Apart, http://alistapart.com/articles/waiaria </li></ul><ul><li>IBM, http://www.csun.edu/cod/conf/2005/proceedings/2524.htm </li></ul>
    17. 17. Links 2 tools <ul><li>Firefox 3b, http://mozilla.com/en-US/firefox/all-beta.html </li></ul><ul><li>Accessibility extension 1.4+, http://firefox.cita.uiuc.edu </li></ul><ul><li>Fire Vox, http://firevox.clcworld.net </li></ul><ul><li>Inspect32, http://microsoft.com/downloads - search &quot;MSAA&quot; </li></ul><ul><li>JAWS trial, http://freedomscientific.com </li></ul><ul><li>Dojo AJAX, http://dojotoolkit.org/projects/core </li></ul><ul><li>Reefchat, http://reefchat.overscore.com </li></ul><ul><li>(Opera 9b, http://opera.com/docs/changelogs/windows/950b1 ) </li></ul><ul><li>(IE 8b, http://code.msdn.microsoft.com/ie8whitepapers - browse ) </li></ul><ul><li>(DTD, http://freear.org.uk/dtd/xhtml-role-state-n.dtd ) </li></ul>
    18. 18. <ul><li>Nick Freear , Application/Web Developer, Institute of Educational Technology, [email_address] </li></ul><ul><li>http:// kn.open.ac.uk/tech_coffee_mornings </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>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×