• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Accessible Rich Internet Applications for the OU
 

Accessible Rich Internet Applications for the OU

on

  • 3,387 views

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.

Statistics

Views

Total Views
3,387
Views on SlideShare
3,382
Embed Views
5

Actions

Likes
0
Downloads
18
Comments
0

2 Embeds 5

http://www.slideshare.net 4
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Accessible Rich Internet Applications for the OU Accessible Rich Internet Applications for the OU Presentation Transcript

  • Accessible Rich Internet Applications for the OU WAI-ARIA N 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=&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>
  • 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 &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 )
    • Nick Freear , Application/Web Developer, Institute of Educational Technology, [email_address]
    • http:// kn.open.ac.uk/tech_coffee_mornings
    • ? ? ? ?
  • 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>