Transcript EnablingWeb20A11y

IBM Emerging Technologies
Enabling Web 2.0 Accessibility
Becky Gibson
Web Accessibility Architect
© 2007 IBM Corporation
IBM Emerging Technologies
Agenda




Web 2.0 Overview
Web 2.0 Accessibility Concerns
Current Web 2.0 Best Practices
Addressing Web 2.0 Accessibility
– Technologies
– Tooling
– Testing




2
Accessible Rich Internet Applications (ARIA)
Dojo JavaScript Open Source Toolkit
Demos Throughout
Summary
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
What is Web 2.0?
 Dynamic
– Incremental updates, multimedia
 Interactive
– Maps, web services
 Collaborative
– Wikis, blogs
– Crowdsourcing – http://www.istockphoto.com
– Collective intelligence
– Amazon Mechanical Turk - http://www.mturk.com/mturk/welcome
– Digg - http://www.digg.com/news
– del.icio.us - http://del.icio.us/
“Thus, mastery of architectures of participation to create real value will be essential to success in the
Web of the future.” Dion Hinchcliffe
3
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Google Maps
4
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
iStockPhoto
5
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Web 2.0 Technologies




JavaScript
CSS – Cascading Style Sheets
Ajax – Asynchronous JavaScript and XML
Multimedia
Change in Web Technology Usage
70
60
% Usage
50
JavaScript
CSS
Iframes
Frames
40
30
20
10
0
2001 2002 2003 2004 2005 2006 2007
6
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Yahoo! – February 29, 2000
7
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Yahoo! – May 2, 2007
8
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Fidelity March 1, 2000
9
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Fidelity June 14, 2007
10
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Web 2.0 Accessibility Concerns
 Rich Interface controls
– Reliance on Mouse
– Lack of Semantics




Incremental Updates via Ajax
Changes in focus
Excessive Navigation
Multimedia
– Lack of captioning
– Interaction issues
11
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Issues with Incremental Updates
 Assistive Technology users are not aware of updates
 Updates occur on a different section of the page than the user is
currently interacting with
 Clicking a link updates a different section of the page
 Auto-complete fields or generated options not available to assistive
technology
 User has no idea how to find new or updated content
 Changes in focus prohibit complete review of the page
 Changes in focus cause disorientation and additional navigation
 Paradigm shift for all users
12
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Current Web 2.0 Accessibility Best Practices
 Tell the user what to expect
 Make updates noticeable
 Help users find information
13
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Tell the User What to Expect
 Explain the interaction to the user
– Before accessing the Ajax enabled page
– Within the Ajax enabled page
 Where possible, provide a manual update option
– Necessary for WCAG 2.0 Guideline 2.2
2.2.5 Interruptions: Interruptions, such as updated content, can be postponed or
suppressed by the user, except interruptions involving an emergency. (Level AAA)
 Save the user’s update preference
14
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Make Updates Noticeable
 Change the background color of updated data
– Use a subtle color
– Change only for a few seconds
– Best for small areas of the page
 Briefly blink the updated data
– Blink for 3 seconds or less (WCAG 2.0 Guideline 2.2)
2.2.2 Blinking: Content does not blink for more than three seconds, or a method is
available to stop all blinking content in the Web page. (Level AA)
– Avoid the flash threshold (WCAG 2.0 Guideline 2.3)
2.3.1 Three Flashes or Below Threshold: Content does not contain anything that
flashes more than three times in any one second period, or the flash is below the
general flash and red flash thresholds. (Level A)
15
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Help Users Find Information
 Add new information after the trigger event, later in reading order
 Update an existing element with new data rather than creating new
elements in the DOM
 Provide update options
– via a JavaScript alert*
– offer to set focus to new data*
 Use HTML header tags to mark sections with updated content.
 Implement Accessible Rich Internet Applications (ARIA) Techniques
– alert role in conjunction with a floating pop-up box
– describedby property to describe new content
– live regions (when available)
*Use with caution – overuse can make a page unusable by assistive technology!
16
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Note: There is no one size fits all solution!
Methods of notification and navigation depend upon the task at
hand. Remember the old adage, “Do no harm.”
17
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Ajax Demo
Available at:
http://www.weba11y.com/AjaxDemo/stockhome.html
http://www.weba11y.com/AjaxDemo/search.html
18
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Addressing Web 2.0 Accessibility
 Updated Web Technologies
– Accessible Rich Internet Applications (ARIA)
– IAccessible2
 Development Tools
– Integrated Development Environments
– Toolkits - Dojo
 Testing Tools
– Rule-based Accessibility Validation Environment (RAVEN)
– Functional Web Accessibility Evaluator (FAE)
 Assistive Technologies
19
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Updated Web Technologies - ARIA




20
Allows creation of rich user interface components
Full keyboard navigation
Non-intrusive notification of updated content
Under development in W3C via Web Accessibility Initiative
(WAI) Protocols & Formats Working Group
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Need for ARIA
 Navigation
– All components must be keyboard Accessible
– Remove reliance on tab key navigation
 Notification of updated content
 Assistive Technology (AT) Support
– AT work via platform accessibility APIs
– Only basic HTML elements are supported
– Scripted Web content is not supported
– Assistive Technology needs to:
– Know active roles of scripted user interface components
– Monitor states of scripted user interface components
21
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
ARIA Overview




Add role semantics to scripted user interface (UI) elements
Update state information dynamically
Make items focusable via tabindex attribute
Add keyboard event handling
– Mimic the keyboard behavior of the rich client UI
– Minimize tab key navigation
 Add live region information and notification behavior*
*Live region support coming in Firefox 3
22
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Role Examples
 link
 combobox, option
 checkbox
 radio, radiogroup
 button
 progressbar
 slider
 spinbutton
 tree, treeitem
 alert
23
Enabling Web 2.0 Accessibility | June 2007
 application
 presentation
 group
 grid, gridcell
 tab, tabcontainer,
tablist, tabpanel
 list, listitem
 menubar, menu
 toolbar
 more……
© 2007 IBM Corporation
IBM Emerging Technologies
State Examples
24
State
Values
checked
true | false | mixed
disabled
true | false
readonly
true | false
expanded
true | false
valuemin, valuemax,
valuenow
CDATA
owns, haspopup
IDREF
describedby. labelledby
IDREF
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
ARIA Support
 Support for HTML and XHTML
 Implemented in Firefox 1.5 and later versions
 Supported by Window-Eyes and Jaws
– Window-Eyes 5.5 or later
– Partial support in JAWS 7.1, more in JAWS 8.0
25
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
ARIA Demo
Available at http://www.weba11y.com/AjaxDemo/sample.html
26
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
ARIA Implementation Details
27
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Setting Focus - Use of tabindex attribute
28
tabindex Attribute
Focusable with
Mouse or JavaScript via
element.focus()
Tab Key Navigable
not present
Follows default behavior of
element
(yes for form controls, links, etc.)
Follows default behavior of element
<0
Yes
No, author must focus it with
element.focus() as a result of arrow or
other key press
0
Yes
In tab order relative to element's position in
document
>0
Yes
Enabling Web 2.0 Accessibility | June 2007
Tabindex value manually changes where
this element is positioned in the tab order.
These elements will be positioned in the
tab order before elements that have
tabindex="0" or that are naturally in the tab
order.
© 2007 IBM Corporation
IBM Emerging Technologies
Assigning tabindex
 The element in component to receive initial focus gets tabindex=0
 Generally only one element within the component has tabindex=0
at any one time
 When an element receives focus
– set tabindex=0
– Element is added to the tab order and is tab navigable
 When an element loses focus
– set tabindex=-1
– Element is removed from the tab order but can receive focus via the
mouse or programmatically
29
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Setting Focus
 Keyboard and mouse interaction must be kept in-sync
 Set focus to elements, do NOT simulate focus via CSS
– Screen reader will speak the element when it receives focus
 Element should implement onfocus handler to respond to
focus via
– Keyboard
– Mouse
– Programmatically
– Speech or other input
30
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Determining Keyboard Behavior
 Where possible follow the conventions of the Operating
System
 DHTML Style Guide is in-progress
– Representatives from several companies working to define
behavior of common Web components
– Discussions occur at http://lists.w3.org/Archives/Public/wai-xtech/
– Final results will be donated to W3C
31
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
XHTML Coding Details - Role
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:x2="http://www.w3.org/TR/xhtml2"
xmlns:wairole="http://www.w3.org/2005/01/wairdf/GUIRoleTaxonomy#"
xmlns:waistate="http://www.w3.org/2005/07/aaa">
…..
<table tabindex="0" id="grid" x2:role="wairole:spreadsheet"
onkeydown=" return doTableKeys(event);" >
<thead><tr >
.....
<th tabindex="-1" x2:role="wairole:columnheader">Type</th>
......
</tr></thead><tbody>
<tr>
<td tabindex="-1" x2:role="wairole:rowheader"
waistate:readonly="true"
onclick="doClick(event);" ondblclick="doEdit(this);"
onkeydown="doEdit(this);">1</td>
.....
<td tabindex="-1"
x2:role="wairole:gridcell" ...event handlers... >credit</td>
</tr>
.......</table>
32
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
XHTML Coding Details – State via Scripting
<script type="text/javascript">
//<![CDATA[
........
if (theElem.getAttributeNS("http://www.w3.org/2005/07/aaa",
"disabled") !="true")
{
; // do something
}
//]]>
</script>
.........
<table>
……..
<tr>
<td tabindex="-1" x2:role="wairole:gridcell"
waistate:disabled="true" id=“Luc"
onclick="doClick(event,2,2);" >$2.35</td>
</tr>
</table>
33
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
HTML Coding Details - Role
 Set role via scripting
– Assign role and state when generate component
– Assign role/state via class attribute in markup and parse and set in an
onload event handler
<span id="slider" class="myslider myselector2"
asx slider valuemin-0 valuemax-50 valuenow-33”> </span>
see http://www.w3.org/WAI/PF/adaptable/HTML4/embedding20061212.html
 Wrapper setAttribute() and setAttributeNS() functions
– IE does not support setAttributeNS() so call setAttribute() to put
information into the DOM
34
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
HTML Wrapper Function to Set Attributes
// method to set the attribute values based on the capability of the browser.
// Use setAttributeNS if it is availaible, otherwise append a namespace indicator
// string to the attribute and set its value.
function setAttrNS(elemObj, theAttr, theValue){
if (typeof document.documentElement.setAttributeNS !=
'undefined') {
elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa",
theAttr, theValue);
}else{
elemObj.setAttribute("aaa:" + theAttr, theValue);
}
}
Usage Examples:
setAttrNS(treeItemObj, “role”, “treeitem”);
setAttrNS(treeItemObj, “expanded”, “true”);
35
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Updated Web Technologies – Accessibility APIs
 Each platform has Accessibility API to communicate with AT
– Accessibility ToolKit (ATK) for GNOME
– Java Accessibility API
– Microsoft Active Accessibility (MSAA) for Windows
– UI Automation for Vista
 MSAA created many years ago
– No access to advanced functionality
– ATs rely on off-screen models and private application APIs
36
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Updated Web Technologies – IAccessible2
 Extends MSAA to add missing functionality
– rich text, tables, relations
– ARIA Live Regions




37
Harmonizes with newer APIs of Java and Linux
Interface donated to The Linux Foundation as Open Standard
Will be implemented in Firefox 3
Being integrated into Eclipse
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Development Tools
 Web Toolkits
– Dojo
– Scriptaculous
– Prototype
– Google Web Toolkit (GWT)
– Yahoo! User Interface (YUI)
– More…..
 Integrated Development Environments
– Rational Web Developer
– Ajax Toolkit Framework
– More…..
38
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Dojo
 Open Source JavaScript Toolkit
– “Easy” Ajax
– Data Binding
– Full event system
– Browser abstraction layer
– User Interface Widgets
– Dual Licensed
– Academic Free License v2.1
– BSD License
39
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Dojo Schedule and Plans
 Current Dojo Release is 0.43
 Next release is 0.9 in Summer 2007
– 0.9 beta target date – June 27
 Dojo 1.0 planned for August/September 2007
 Focus of 1.0
 Performance, performance, performance
 Base Dojo
 Core Widgets
 Package size
40
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Dojo Base
 Core set of extremely common functions that are always
available to developers
 Provided within updated, lightweight (<50kb) dojo.js






41
Module Loader
Lang Utils & Array Extras
Cookie functions
Query, Node & Style Utils
I/O (XHR in Base)
Json serialization
Enabling Web 2.0 Accessibility | June 2007





Events (simple connect)
Effects
 fade, slide, anim props
Color functions
Browser detection
Url functions
© 2007 IBM Corporation
IBM Emerging Technologies
Core Libraries
 Modules that are common to most Ajax applications
 Optionally included using dojo.require()




Drag N Drop
Undo
Rpc
I18n



42
Date
Number
Currency
Enabling Web 2.0 Accessibility | June 2007






String functions
Topics
Data Access
Debug
Build System
HTML & Style Extras
© 2007 IBM Corporation
IBM Emerging Technologies
Dojo 1.0 Core Widgets (Dijit)




Fully Accessible via ARIA Techniques
Internationalized
Standard Look and Feel
Developer Documentation
– API
– User Manual
 Supported Browsers
– Firefox 2.0
– IE 6+
– Safari (latest)
 Data Binding
– Tree, Grid, Select
43
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Dojo Core Widgets
 Form Widgets
 Layout Widgets
 Advanced Widgets
44
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Form Widgets










45
Button, Dropdown Button, Combo Button
Checkbox, Radio
ComboBox, Filtering Select
Textbox
Currency & Integer Validation Textboxes
Resizable Textarea
Slider
Integer Spinner
Inline Editbox
Dropdown Calendar
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Layout Widgets








46
Accordion Container
Content Pane
Dialog
Layout Container
Page Container
Split Container
Tab Container
Title Pane
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Advanced Widgets
 Color Palette
 Context Menu
 Grid
 Rich Text Editor
 Progress Bar
 Toggler
 Toolbar
 Tooltip, Tooltip Dialog
 Tree
47
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Dojo Demo
48
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Accessibility Testing Tools
 Test against published standards
 Many tools evaluate the “over the wire” HTML
– Bobby from Watchfire
– WebKing from Parasoft
– More …
 Difficult to evaluate server side technologies
 Issues with dynamic Web 2.0 content
 Need more interactive solutions
49
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
RAVEN
Rule-based Accessibility Validation ENvironment
 Set of Eclipse plug-ins
 Originally developed for validating Java GUIs
– Java AWT and Swing
– Eclipse SWT
 Integrates accessibility testing into development environment
 Operates via an XML based set of rules
 Supports Validation of Dynamic HTML
– Uses IAccessible2
 Being updated to support ARIA
50
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Additional Web 2.0 Accessibility Challenges




ARIA spec not yet a standard – planned for early 2008
No ARIA support in Internet Explorer
No tabindex support in Safari (yet) – thus no keyboard support
Assistive Technology support needs to evolve
– Issues with virtual browsing and interactive mode in screen readers
– Additional support for live regions
“The journey of a thousand miles starts with a single step. “
51
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Summary
 Web 2.0 is dynamic and constantly evolving
 Accessibility of Web 2.0 is possible through
– Best practices and thoughtful design
– Updated Technologies such a ARIA
– Accessibility integrated into toolkits such as Dojo
– Embracing of Accessibility technologies by key Web players
52
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation
IBM Emerging Technologies
Resources
 Becky’s Accessibility Presentations and Papers
http://www.weba11y.com/Presentations/presentations.html
 ARIA Roadmap
http://www.w3.org/TR/aria-roadmap/
 Mozilla Developer Center - Firefox ARIA Information
http://developer.mozilla.org/en/docs/Accessible_DHTML
 Mailing list for ARIA issues - [email protected]
 Dojo Home http://www.dojotoolkit.org/
 Accessibility Section of Dojo Book
– (current) http://www.dojotoolkit.org/book/dojo-book-0-4/part-8internationalization-and-accessiblity/accessibility-0
– (future) http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/a11y
53
Enabling Web 2.0 Accessibility | June 2007
© 2007 IBM Corporation