1. Yahoo! Confidential1 Yahoo! Experiences with Accessibility, DHTML, and Ajax in Rich Internet Applications CSUN, March 23 rd, 2006 Victor TsaranVictor Tsaran – Accessibility Project Manager, Yahoo! Inc. Nate KoechleyNate Koechley – Senior Engineer & Design Liaison, Yahoo! Inc.

2. Yahoo! Confidential2 Agenda Changing Landscape Definitions Four Approaches –Standards-based development –Redundant interfaces –Fortified, thorough interfaces –“Accessible DHTML” Looking Ahead

3. Yahoo! Confidential3 About Us Victor Tsaran –Accessibility Project Manager Nate Koechley –Senior Frontend Engineer –Technical Architect and Design Liaison –Presentation Platform Team

4. Yahoo! Confidential4 What’s Happening?

5. Yahoo! Confidential5 Browser vs. Desktop

6. Yahoo! Confidential6 Web 1.0 vs. Web 2.0

7. Yahoo! Confidential7 Yahoo’s “Alan Cooper” Model

8. Yahoo! Confidential8 Definitions

9. Yahoo! Confidential9 Definitions: DHTML DHTML is –markup and style made interactive and dynamic through script Generally, DHTML is JavaScript modifying CSS, HTML and the DOMDHTMLCSS HTMLDOM DHTML is not –a specific technology –inherently inaccessible –new

10. Yahoo! Confidential10 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

11. Yahoo! Confidential11 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

12. Yahoo! Confidential12 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)wikipedia Often, our focus is on enabling screen- readers specifically –However, the resulting work in generally more far-reaching

13. Yahoo! Confidential13 What about Desktop Accessibility?

14. Yahoo! Confidential14 Accessibility on the Desktop Through various APIs… –Microsoft’s Active Accessibility (MSAA)MSAA –Sun’s Java Access BridgeAccess Bridge –Accessibility Toolkit for Linux (ATK)ATK …Software communicates to the operating system, which communicates with assistive technology.assistive technology Highly effective, resulting in nearly omnipresent accessibility.

15. Yahoo! Confidential15 But what about web accessibility?

16. Yahoo! Confidential16 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…

17. Yahoo! Confidential17 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.

18. Yahoo! Confidential18 So how can we move forward?

19. Yahoo! Confidential19 Four Techniques – Use ‘em All 1.Standards-based development 2.Redundant interfaces 3.Fortified, thorough interfaces 4.“Accessible DHTML”

20. Yahoo! Confidential20 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

21. Yahoo! Confidential21 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’tUnobtrusive JavaScriptHijax Stretching semantics to provide clues Microformats enrich date, and provide predictable hooks for add-onsMicroformats

22. Yahoo! Confidential22 Approach 1: Standards-based development Example: Tab-Panel box: complete

23. Yahoo! Confidential23 Approach 1: Standards-based development Example: Tab-Panel box: no CSS

24. Yahoo! Confidential24 Approach 1: Standards-based development Example: Tab-Panel box: no JavaScript

25. Yahoo! Confidential25 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

26. Yahoo! Confidential26 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

27. Yahoo! Confidential27 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

28. Yahoo! Confidential28 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.

29. Yahoo! Confidential29 Approach 2: Redundant interfaces Example, 2D Slider Input

30. Yahoo! Confidential30 Approach 2: Redundant interfaces Example: Calendar Date Selector

31. Yahoo! Confidential31 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

32. Yahoo! Confidential32 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

33. Yahoo! Confidential33 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

34. Yahoo! Confidential34 Approach 3: Fortified, thorough interfaces Examples: Menu fortified with keyboard

35. Yahoo! Confidential35 Approach 3: Fortified, thorough interfaces Example: Slider fortified with keyboard

36. Yahoo! Confidential36 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

37. Yahoo! Confidential37 Approach 3: Fortified, thorough interfaces Drawbacks Isn’t easy Clients don’t always notice Requires personal integrity and commitment Seems more complete and heavy

38. Yahoo! Confidential38 Approach 4: “Accessible DHTML” Overview and Definition –IBM technology, now in W3C and open http://www.w3.org/WAI/PF/adaptable/HTML4/embedding- 20060318.htmlhttp://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

39. Yahoo! Confidential39 Approach 4: “Accessible DHTML” Examples: XHTML 2

40. Yahoo! Confidential40 Approach 4: “Accessible DHTML” Examples: HTML 4 <span id="slider" class="myslider myselector2 slider valuemin-0 valuemax-50 valuenow-33" tabindex="0" >

41. Yahoo! Confidential41 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

42. Yahoo! Confidential42 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

43. Yahoo! Confidential43 More Information Nate Koechley – –natek@yahoo-inc.comnatek@yahoo-inc.com –http://nate.koechley.com/bloghttp://nate.koechley.com/blog Victor Tsaran –vtsaran@yahoo-inc.comvtsaran@yahoo-inc.com Yahoo! Developer Network and Y! UI Blog: –http://developer.yahoo.nethttp://developer.yahoo.net –http://developer.yahoo.net/yuihttp://developer.yahoo.net/yui –http://developer.yahoo.net/ypatternshttp://developer.yahoo.net/ypatterns –http://groups.yahoo.com/group/ydn-javascripthttp://groups.yahoo.com/group/ydn-javascript –http://www.yuiblog.comhttp://www.yuiblog.com

44. Yahoo! Confidential44 END OF TALK NOTE: Remaining slides are candidates for inclusion, but will likely be dropped from the presentation.

45. Yahoo! Confidential45 Looking ahead… What is at risk if we don’t standardize on an accessible platform?

46. Yahoo! Confidential46 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.

47. Yahoo! Confidential47 Slider

48. Yahoo! Confidential48 Calendar var myCal; function init() { myCal = new ygCalendar(‘myCal’,’myCalContainer’); myCal.render(); }

49. Yahoo! Confidential49 AutoComplete

50. Yahoo! Confidential50 TreeView