Accessible Rich Internet Applications for the OU

  • 2,067 views
Uploaded 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 …

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.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,067
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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? 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

Transcript

  • 1. Accessible Rich Internet Applications for the OU WAI-ARIA N Freear 10 April 2008
  • 2. Agenda
    • What is the problem?
    • Solution
    • Timeline/ roadmap
    • Support
    • Implementation
    • Examples
    • OU applications – ideas?
    • Tools/ links
    • Conclusion/ discussion
  • 3. What is this? (A: html+code imitating a tree view)
  • 4. 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
  • 5. 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
  • 6. 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 …
  • 7. 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!
  • 8. 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
  • 9. API mappings
    • Windows: Microsoft Active Accessibility (MSAA)
    • UNIX/ Linux/ Gnome: ATK/ AT-SPI
    • IBM/ Windows: IAccessible2, complements MSAA
    • Mozilla document the mappings
  • 10. 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 …"
  • 11. 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
  • 12. Live region
    • <div
    • role=&quot;log&quot;
    • aria-atomic =&quot;false&quot;
    • aria-busy =&quot;false&quot;
    • aria-channel=&quot;main&quot;
    • aria-labelledby=&quot;l_label&quot;
    • aria-live=&quot;polite&quot;
    • aria-relevant=&quot;additions&quot; ></div>
  • 13. Example slider in Inspect32
  • 14. Slider in Windows high-contrast
  • 15. OU applications
    • Mozilla pretty slider +
    • OUVLE/ OpenLearn/ Moodle
      • Chat, form validation, forms (survey module)
    • Knowledge Network
      • Forms, AJAX ?
    • Social:Learn
    • ? ?
  • 16. 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
  • 17. 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 &quot;MSAA&quot;
    • 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 )
  • 18.
    • Nick Freear , Application/Web Developer, Institute of Educational Technology, [email_address]
    • http:// kn.open.ac.uk/tech_coffee_mornings
    • ? ? ? ?
  • 19. Questions, Notes
    • Thank 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=&quot;slider&quot; tabindex=&quot;0&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; …></div>