1Yahoo! Confidential
Yahoo! Experiences with Accessibility, DHTML, and Ajax
in Rich Internet Applications
CSUN, March 23rd, 2006
Victor Tsaran – Accessibility Project Manager, Yahoo! Inc.Nate Koechley – Senior Engineer & Design Liaison, Yahoo! Inc.
2Yahoo! Confidential
Agenda
• Changing Landscape
• Definitions
• Four Approaches– Standards-based development
– Redundant interfaces
– Fortified, thorough interfaces
– “Accessible DHTML”
• Looking Ahead
3Yahoo! Confidential
About Us
• Victor Tsaran
– Accessibility Project Manager
• Nate Koechley
– Senior Frontend Engineer
– Technical Architect and Design Liaison
– Presentation Platform Team
4Yahoo! Confidential
What’s Happening?
5Yahoo! Confidential
Browser vs. Desktop
6Yahoo! Confidential
Web 1.0 vs. Web 2.0
7Yahoo! Confidential
Yahoo’s “Alan Cooper” Model
8Yahoo! Confidential
Definitions
9Yahoo! Confidential
Definitions:DHTML
• DHTML is – markup and style made interactive and
dynamic through script• Generally, DHTML is JavaScript modifying CSS,
HTML and the DOM
• DHTML is not – a specific technology
– inherently inaccessible
– new
10Yahoo! Confidential
Definitions:AJAX / Ajax
• Asynchronous JavaScript and XML• the ability to talk to the server without tearing down the
existing page
• the ability to update part of the page
• Ajax is not – a specific technology
– inherently inaccessible
– new
• No server requests = it’s not Ajax
• AJAX is a subset of Ajax
11Yahoo! Confidential
Definitions:Rich Internet Applications (RIAs)
• Rich Internet Applications are:
– web apps with features and functionality of traditional desktop applications
– usable from any internet terminal – no installation required
– can be created in various languages: Flash, JavaScript, Java
• today’s talk is focused on JavaScript RIAs
12Yahoo! Confidential
Definitions:Accessibility
• Accessibility is:
– “A general term used to describe the degree to which a system is usable by as many people as possible without modification”
(cite: wikipedia)
• Often, our focus is on enabling screen-readers specifically
– However, the resulting work in generally more far-reaching
13Yahoo! Confidential
What about Desktop Accessibility?
14Yahoo! Confidential
Accessibility on the Desktop
• Through various APIs…– Microsoft’s Active Accessibility (MSAA)
– Sun’s Java Access Bridge
– Accessibility Toolkit for Linux (ATK)
• …Software communicates to the operating system, which communicates with assistive technology.
• Highly effective, resulting in nearly omnipresent accessibility.
15Yahoo! Confidential
But what about web accessibility?
16Yahoo! Confidential
Accessibility on the Web (1)
• Some information is provided to the desktop API
– The Document Object Model (DOM) provides static information via semantic elements and attributes
• But…
17Yahoo! Confidential
Accessibility on the Web (2)
• … but the depth of necessary information is missing
– Role, state, actions, caret, selection, children, relations, changes…
• And so are inputs and outputs
– keyboard, focus, blur, change, updates.
18Yahoo! Confidential
So how can we move forward?
19Yahoo! Confidential
Four Techniques – Use ‘em All
1. Standards-based development
2. Redundant interfaces
3. Fortified, thorough interfaces
4. “Accessible DHTML”
20Yahoo! Confidential
Approach 1:Standards-based development
• Overview and Definition
• Subsequent layers enhance meaningful and structured markup
• Progressive and unobtrusive enhancement
• Make each layer a strong foundation
• Don’t corrupt neighboring layers
21Yahoo! Confidential
Approach 1:Standards-based development
• Examples
• Tab box is really anchored links and lists – well marked up content, available to all
• Unobtrusive JavaScript doesn’t Hijax links when it shouldn’t
• Stretching semantics to provide clues
• Microformats enrich date, and provide predictable hooks for add-ons
22Yahoo! Confidential
Approach 1:Standards-based development
• Example: Tab-Panel box: complete
23Yahoo! Confidential
Approach 1:Standards-based development
• Example: Tab-Panel box: no CSS
24Yahoo! Confidential
Approach 1:Standards-based development
• Example: Tab-Panel box: no JavaScript
25Yahoo! Confidential
Approach 1:Standards-based development
• Benefits
• Should be doing this regardless
• Truly available to all
• The foundation of better things
• Works “with the grain” of web technologies
• A step toward a semantic web
• Here to stay, more than 10 years
26Yahoo! Confidential
Approach 1:Standards-based development
• Drawbacks
• Doesn’t solve every problem
• Perceived overhead
• Unobtrusive JavaScript and Hijax are still less familiar techniques
• Be careful not to step on event handlers
• Only trap clicks when appropriate
• Server must reply to both partial and complete requests from the client
27Yahoo! Confidential
Approach 2:Redundant interfaces
• Overview and Definition
• Multiple means of input• GUI input vs. alphanumeric input
• Direct movement of objects vs. form-based movement
• Multiple means of manipulation• Keyboard vs. Mouse
• Esc vs. Cancel
• Drag-drop vs. form-based
28Yahoo! Confidential
Approach 2:Redundant interfaces
• Example, 1D Slider Input
• Simple support for vertical and horizontal sliders as a direct-manipulation alternative to input boxes
• Enhances the basic input box, but need not replace it.
29Yahoo! Confidential
Approach 2:Redundant interfaces
• Example, 2D Slider Input
30Yahoo! Confidential
Approach 2:Redundant interfaces
• Example: Calendar Date Selector
31Yahoo! Confidential
Approach 2:Redundant interfaces
• Benefits
• Better for everybody• Keyboard is important for ALL users
• Provide multiple familiar task paths
• Transfer the complete set of expectations from the desktop to the browser
• Works today
32Yahoo! Confidential
Approach 2:Redundant interfaces
• Drawbacks
• Cannot fully communicate with the desktop’s accessibility APIs
• Dual experiences challenge goal of parity
• Requires development of two experiences
33Yahoo! Confidential
Approach 3:Fortified, thorough interfaces
• Overview and Definition
• Now is the time to lay a new foundation
• Libraries and platforms must support all comers
• Not just the mouse, not just the keyboard• Not just one key, but all keys
• Must offer a faithful and complete experience
34Yahoo! Confidential
Approach 3:Fortified, thorough interfaces
• Examples: Menu fortified with keyboard
35Yahoo! Confidential
Approach 3:Fortified, thorough interfaces
• Example: Slider fortified with keyboard
36Yahoo! Confidential
Approach 3:Fortified, thorough interfaces
• Benefits
• More options for everybody
• Supports many working styles
• Establish the new platform• My prediction: new platform will last much longer
than the 10 years of the previous platform
37Yahoo! Confidential
Approach 3:Fortified, thorough interfaces
• Drawbacks
• Isn’t easy
• Clients don’t always notice• Requires personal integrity and commitment
• Seems more complete and heavy
38Yahoo! Confidential
Approach 4:“Accessible DHTML”
• Overview and Definition– IBM technology, now in W3C and open
• http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20060318.html
– Allows embedded role and state metadata in HTML documents
– Uses namespace extensions to XHTML 2, but• Techniques allow most functionality in HTML 4 documents,
as of today
– Communicate directly with the desktop API
39Yahoo! Confidential
Approach 4:“Accessible DHTML”
• Examples: XHTML 2
<html xmlns:wairole="/w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:waistate=“/w3.org/2005/07/aaa">
<span id="slider" class="myslider"role="wairole:slider"waistate:valuemin="0"waistate:valuemax="50"waistate:valuenow="33"> </span>
40Yahoo! Confidential
Approach 4:“Accessible DHTML”
• Examples: HTML 4
<script type="text/javascript" src="enable.js"></script>
<span id="slider" class="myslider myselector2 slider valuemin-0 valuemax-50 valuenow-33" tabindex="0" >
</span>
41Yahoo! Confidential
Approach 4:“Accessible DHTML”
• Benefits
– Utilizes powerful and well-understood desktop API
– Map controls, events, roles and states directly to powerful and well-understood desktop accessibility APIs
– Enriches markup in standard way
42Yahoo! Confidential
Approach 4:“Accessible DHTML”
• Drawbacks
– Requires recent-version of assistive technology software (e.g., screen reader)
– Only works in Mozilla’s Firefox 1.5+ today• Not in Microsoft’s IE 7, or others
– XHTML required for full power• HTML does not allow multiple states, for example
– Emerging technology
43Yahoo! Confidential
More Information
• Nate Koechley – – [email protected]
– http://nate.koechley.com/blog
• Victor Tsaran– [email protected]
• Yahoo! Developer Network and Y! UI Blog:– http://developer.yahoo.net
– http://developer.yahoo.net/yui
– http://developer.yahoo.net/ypatterns
– http://groups.yahoo.com/group/ydn-javascript
– http://www.yuiblog.com
44Yahoo! Confidential
END OF TALK
• NOTE: Remaining slides are candidates for inclusion, but will likely be dropped from the presentation.
45Yahoo! Confidential
Looking ahead…
• What is at risk if we don’t standardize on an accessible platform?
46Yahoo! Confidential
Open Questions
• Is there always an alternative to a mouse-based experience? (for example, with the mouse I can reorder the toolbars in MSWord. I’m not sure if this is possible without a mouse, or even necessary.)
• Partial-page updates remain difficult to communicate to the screen reader’s DOM buffer.
47Yahoo! Confidential
Slider
48Yahoo! Confidential
Calendar
<script> var myCal; function init() { myCal = new ygCalendar(‘myCal’,’myCalContainer’); myCal.render(); }</script><div id=‘myCalContainer’></div>
49Yahoo! Confidential
AutoComplete
50Yahoo! Confidential
TreeView