1. Yahoo! Experiences with Accessibility in DHTML and RIA Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo! Inc. Slides http://nate.koechley.com/talks/2006/12/webbuilder/ Contact http://yuiblog.com natek@yahoo-inc.com http://developer.yahoo.com/yui Web Builder 2.0 Las Vegas

2. Browser vs. Desktop

3. Web 1.0 vs. Web 2.0

4. Sure, but how?

5. Study the History of the Desktop Adapted from Alan Cooper’s “About Face 2.0” Book

6. [compounds] [idioms] Connection Manager (Ajax) Event Utility Dom Collection Drag & Drop Animation Logger Control Menu Control Slider Tree Control Calendar Control AutoComplete The Yahoo! User Interface (YUI) Library DHTML Windowing CSS Reset, Fonts, Grids TabView

7. Some Definitions

8. Definitions: DHTML / Ajax It’s NOT a specific technology

9. Definitions: DHTML / Ajax It’s NOT a specific technology It’s NOT inherently inaccessible

10. Rich Internet Applications (RIAs) are: Features and functionality of desktop apps online Built with Flash, JavaScript, Java, etc…

11. “Degree to which a system is usable without modification” (wikipedia)wikipedia Accessibility is

12. Accessibility = Availability Accessibility is Availability

13. Accessibility = Availability Accessibility is Availability Accessibility is Availability

14. Accessibility = Availability Accessibility is Availability Accessibility is Availability

15. How is “Richness” made accessible on the desktop?

16. Accessibility on the Desktop OS  API  AT Result: Nearly ubiquitous accessibility.

17. If it works on the desktop, what’s the problem on the Web?

18. The Bad News Only some info is passed to desktop API –Yes: Basic semantics (lists, headers) Basic i/o (page load, links) Basic interaction (form elements) –No: Compound elements (tab panels) Delayed and asynchronous i/o (ajax) Complex and detached interactions (drag-n-drop)

19. The Good News “One of W3C's primary goals is to make these benefits available to all people, whatever their... physical or mental ability. “ http://www.w3.org/Consortium/Points/

20. So how do we move forward?

21. Characteristics of Techniques Don’t make it worse Provide options Using existing conventions Move in the right direction Support emerging a11y tech

22. Four Techniques – Use Them All 1. Standards-based Development 2. Redundant Interfaces 3. Predictable Ports 4. W3C’s WAI ARIA (aka “Accessible DHTML”)

23. Standards-Based Development don’t miss the opportunity

25. “Getting It Right The Second Time” – matt sweeney

26. “Getting it Right the Second Time” 1. Use technology as designed H1, LI, P 2. Don’t corrupt layers of the stack Bad: class=“red-button” Bad: href=“#” and href=“javascript:” 3. Create platforms and EvolvabilityEvolvability Encapsulation, Flexibility, Mashups, Services, Portability 4. Preserve opportunity & availability

27. Approach 1: Standards-Based Development Build a strong foundation Progressive enhancement Unobtrusive enhancement Don’t pollute Best chance to be generous.

28. Standards-Based Development Example: Y!News Tab Panel Example: Tab-Panel box: complete

29. Standards-Based Development Example: Y!News Tab Panel Without CSS

30. Standards-Based Development Example: Y!News Tab Panel Without JavaScript

31. Standards-Based Development Example: Y!News Tab Panel Embrace simplicity: Anchored links and lists meaningful and available to all Links always work sometimes Hijax with Unobtrusive JSHijaxUnobtrusive JS Stretching semantics to provide clues; Microformats

32. Standards-Based Development Ex: Y!Photos Ratings & Tags http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/photos-nocss.avi

33. Standards-Based Development Example: Y!Games http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/games-nav.avi

34. Standards-Based Development Example: Y! Home Page http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/da11y-fp-searchtabs.avi

35. Standards-Based Development Benefits Should be doing this regardless “With the grain” of web technologies Truly available to all The foundation of better things A step toward a semantic web Here to stay (10+ years)

36. Standards-Based Development Drawbacks Doesn’t solve every problem Perceived overhead Unobtrusive JavaScript and Hijax are still less familiar techniques

37. Redundant Interfaces offer flexible interaction

38. Approach 2: Redundant Interfaces GUI and character input Direct and configuration-based Static entry and AutoComplete Tab and Arrow Keys

39. Approach 2: Redundant Interfaces Keyboard and mouse Esc. and Cancel Drag-drop and multi-page Ajax and HTTP

40. Redundant Interfaces Example: 1D Slider http://developer.yahoo.com/yui/examples/slider/index.html Sliders are redundant to text inputs. Progressively enhances direct manipulation. http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/Slider-basic.avi

41. Redundant Interfaces Example: 2D Slider http://developer.yahoo.com/yui/examples/slider/rgb2.html

42. Redundant Interfaces Example: Date Selector http://developer.yahoo.com/yui/examples/calendar/intl_japan/

43. http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html Redundant Interfaces Example: YUI Menu from Markup

44. Motion Protection –http://developer.yahoo.com/yui/examples/container/panel- aqua.htmlhttp://developer.yahoo.com/yui/examples/container/panel- aqua.html Drag and Drop Constrained to Viewport Technology Protection –http://yuiblog.com/blog/2006/09/22/yahoo-devday-schedule/http://yuiblog.com/blog/2006/09/22/yahoo-devday-schedule/ without JS and CSS without JS or CSS with Keyboard with Mouse Redundant Interfaces Example: YUI Panel from Markup

45. http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/frontpage-nojs.avi Redundant Interfaces Example: Yahoo! Homepage

46. Redundant Interfaces Ex: Drag-n-Drop vs. Edit Flow http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/my-change-layout.avi

47. Redundant Interfaces Benefits Better for everybody –Let users choose –Keyboard is important for ALL users Works today

48. Redundant Interfaces Drawbacks Insufficient communication Not “unified” Requires two experiences But not 2x effort! Can actually benefit development process

49. Faithful and Predictable Ports Faithful and Predictable Ports give users all of what they expect

50. Faithful and Predictable Ports: Faithful and Predictable Ports Support wholesale transfer of skills –Learnability –Discoverability Capture this moment in time –Completeness is critical

51. Faithful and Predictable Ports: Example: Full Selection Model http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/photos-selection.avi

52. Faithful and Predictable Ports: Example: Full Keyboard Control

53. Example: Slider with keyboard control http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/slider-keyboard.avi

54. Faithful and Predictable Ports: Example: Full Keyboard Control Click “close” or press Esc

55. Faithful and Predictable Ports: Benefits If we match users expectations, there’s a quantum leap in discoverability, comfort, and expectations for free.

56. Faithful and Predictable Ports: Drawbacks Isn’t always trivial –(but it’s build into YUI)

57. WAI ARIA W3C: “Accessible DHTML”

58. Rich Interfaces Require Sophisticated Definitions Rich Interfaces Require Sophisticated Definitions we can’t act on information we don’t have

59. “AT requires information about the semantics of specific portions of a document in order to present those portions in an accessible form.” http://www.w3.org/2006/09/aria-pressrelease.html

60. Approach 4: ARIA Communicate directly with desktop API IBM, now in W3C and open –http://www.w3.org/TR/aria-roadmap/http://www.w3.org/TR/aria-roadmap/ –http://www.w3.org/WAI/PF/adaptable/HTML4/embedding- 20060318.htmlhttp://www.w3.org/WAI/PF/adaptable/HTML4/embedding- 20060318.html Embeds “role” and “state” metadata –Uses namespace extensions to XHTML 2, but Techniques allow most functionality in HTML 4 documents, as of today

61. What’s the Virtual Buffer?

62. The Virtual Buffer and Script Handles basic script: –click, keypress, mouseover –For these, new content is exposed Ajax content isn’t natively exposed in reaction to these events For example, doesn’t know onreadystatechange

63. ARIA Architecture Overview http://www.w3.org/WAI/PF/roadmap/ http://www.w3.org/WAI/PF/roadmap/

64. Base Roles –Input, textbox, select, range, section, sectionhead, window Widget Roles –Link, combobox, option, checkbox, checkboxtristate, radio, radiogroup, button, menuitemradio, menuitemcheckbox, progressbar, secret, separator, slider, spinbutton, textarea, textfield, tree, treegroup, treeitem, status, alert, alertdialog, dialog Structural Roles –Presentation, application, document, group, imggroup, directory, region, liveregion, log, grid, gridcell, tabcontainer, tab, tabpanel, tablist, table, td, th, rowheader, columnheader, list, listitem, menu, toolbar, menubar, menuitem, breadcrumbs Role Taxonomy http://www.w3.org/TR/aria-role/ http://www.w3.org/TR/aria-role/

65. States and Adaptable Properties Module http://www.w3.org/WAI/PF/adaptable http://www.w3.org/WAI/PF/adaptable checked iconed disabled readonly multiselectable domactive zoom expanded selected pressed important required haseffect valueNew valueMax valueMin step invalid describedby labeledby hasparent haschild haspopup alternatestyle tabindex flowto flowfrom controls controlledby subpageof

66. “ARIA” Example: XHTML <span id="slider" class="myslider" role="wairole:slider" waistate:valuemin="0" waistate:valuemax="50" waistate:valuenow="33">

67. “ARIA” Example: HTML 4 <span id="slider" class=“foo bar slider valuemin-0 valuemax-50 valuenow-33" tabindex="0" >

68. ARIA Benefits Uses well-understood, powerful desktop API Map controls, events, roles & states directly Standard and predictable Progressive Enhancement

69. ARIA Drawbacks Requires recent-versions of AT Mozilla’s Firefox 1.5+ only today –But good things happening XHTML required for full power

70. We Need Your Help This is an important development –Thanks are due to IMB/Mozilla/W3C Becky Gibson Aaron Leventhal Our adoption –Multiplies their efforts –Reduces costs for small AT companies

71. Availability and Browser Support Availability and Browser Support Graded Browser Support

72. Binary Browser Support Do I need to support ___ on this project?

73. Graded Browser Support: Two Key Ideas (1) 1) We need a realistic definition of Support “Support” does not = “identical”. “Support” means “content is available” “Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web.”

74. Graded Browser Support: Two Key Ideas (2) 2) “Support” is not binary. There are grades of support.

75. http://developer.yahoo.com/yui/articles/gbs/gbs.html

76. Graded Browser Support: General Best Practice Three Grades of Browser Support C-grade support (core support, 2%) A-grade support (advanced support, 96%) X-grade support (the X-Factor, 2%)

77. http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html

78. ok

79. Final Thoughts It’s a win-win opportunity, and we’ll get there fastest together.

80. Thank you. natek@yahoo-inc.com http://nate.koechley.com/talks http://developer.yahoo.com/yui http://yuiblog.com http://nate.koechley.com/blog Photo Credits: –http://www.flickr.com/photos/jacqueline-w/56107224/http://www.flickr.com/photos/jacqueline-w/56107224/ –http://www.flickr.com/photos/grimreaperwithalawnmower/191890428/http://www.flickr.com/photos/grimreaperwithalawnmower/191890428/ –http://www.flickr.com/photos/jasonmichael/4126695/http://www.flickr.com/photos/jasonmichael/4126695/

81. We’re hiring! (Josie Arguada: jaguada@yahoo-inc.com ) jaguada@yahoo-inc.com natek@yahoo-inc.com http://nate.koechley.com/talks

82. Questions? natek@yahoo-inc.com http://nate.koechley.com/talks

83. I don’t know. natek@yahoo-inc.com http://nate.koechley.com/talks