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

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

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 …

(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!

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

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

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 …"

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=&quot;checkbox&quot; 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

Prefer native markup, eg. NOT role=&quot;checkbox&quot;

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>

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

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

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 )

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

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>

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>