Yahoo Experiences with Accessibility DHTML and Ajax in
Yahoo! Experiences with Accessibility, DHTML, and Ajax in Rich Internet Applications CSUN, March 23 rd, 2006 Victor Tsaran – Accessibility Project Manager, Yahoo! Inc. Nate Koechley – Senior Engineer & Design Liaison, Yahoo! Inc. Yahoo! Confidential 1
Agenda • Changing Landscape • Definitions • Four Approaches – Standards-based development – Redundant interfaces – Thorough, fortified interfaces – “Accessible DHTML” • Looking Ahead Yahoo! Confidential 2
About Us • Victor Tsaran – Accessibility Project Manager • Nate Koechley – Senior Frontend Engineer – Technical Architect and Design Liaison – Presentation Platform Team Yahoo! Confidential 3
What’s Happening? Yahoo! Confidential 4
Browser vs. Desktop Yahoo! Confidential 5
Web 1. 0 vs. Web 2. 0 Yahoo! Confidential 6
Yahoo’s “Alan Cooper” Model Yahoo! Confidential 7
Definitions Yahoo! Confidential 8
Definitions: DHTML • DHTML is – markup and style made interactive and dynamic through script • Generally, DHTML is Java. Script modifying CSS, HTML and the DOM • DHTML is not – a specific technology – inherently inaccessible – new Yahoo! Confidential 9
Definitions: AJAX / Ajax • Asynchronous Java. Script 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 Yahoo! Confidential 10
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, Java. Script, Java • today’s talk is focused on Java. Script RIAs Yahoo! Confidential 11
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 screenreaders specifically – However, the resulting work in generally more far-reaching Yahoo! Confidential 12
What about Desktop Accessibility? Yahoo! Confidential 13
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. Yahoo! Confidential 14
But what about web accessibility? Yahoo! Confidential 15
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… Yahoo! Confidential 16
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. Yahoo! Confidential 17
So how can we move forward? Yahoo! Confidential 18
Four Techniques – Use ‘em All 1. Standards-based development 2. Redundant interfaces 3. Thorough, fortified interfaces 4. “Accessible DHTML” Yahoo! Confidential 19
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 Yahoo! Confidential 20
Approach 1: Standards-based development • Examples • Tab box is really anchored links and lists – well marked up content, available to all • Unobtrusive Java. Script doesn’t Hijax links when it shouldn’t • Stretching semantics to provide clues • Microformats enrich date, and provide predictable hooks for add-ons Yahoo! Confidential 21
Approach 1: Standards-based development • Example: Tab-Panel box: complete Yahoo! Confidential 22
Approach 1: Standards-based development • Example: Tab-Panel box: no CSS Yahoo! Confidential 23
Approach 1: Standards-based development • Example: Tab-Panel box: no Java. Script Yahoo! Confidential 24
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 Yahoo! Confidential 25
Approach 1: Standards-based development • Drawbacks • Doesn’t solve every problem • Perceived overhead • Unobtrusive Java. Script 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 Yahoo! Confidential 26
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 Yahoo! Confidential 27
Approach 2: Redundant interfaces • Example, 1 D 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. Yahoo! Confidential 28
Approach 2: Redundant interfaces • Example, 2 D Slider Input Yahoo! Confidential 29
Approach 2: Redundant interfaces • Example: Calendar Date Selector Yahoo! Confidential 30
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 Yahoo! Confidential 31
Approach 2: Redundant interfaces • Drawbacks • Cannot fully communicate with the desktop’s accessibility APIs Yahoo! Confidential 32
Approach 3: Thorough, fortified 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 Yahoo! Confidential 33
Approach 3: Thorough, fortified interfaces • Examples • Menu Yahoo! Confidential 34
Approach 3: Thorough, fortified interfaces • Example: Slider w/ Keyboard Controls – keyboard in addition to mouse controls Yahoo! Confidential 35
Approach 3: Thorough, fortified 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 Yahoo! Confidential 36
Approach 3: Thorough, fortified interfaces • Drawbacks • Isn’t easy • Clients don’t always notice • Requires personal integrity and commitment • Seems more complete and heavy Yahoo! Confidential 37
Approach 4: “Accessible DHTML” • Overview and Definition – IBM technology, now in W 3 C and open • http: //www. w 3. org/WAI/PF/adaptable/HTML 4/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 Yahoo! Confidential 38
Approach 4: “Accessible DHTML” • Examples: XHTML 2 <html xmlns: wairole="/w 3. org/2005/01/wairdf/GUIRole. Taxonomy#" xmlns: waistate=“/w 3. org/2005/07/aaa"> <span id="slider" class="myslider" role="wairole: slider" waistate: valuemin="0" waistate: valuemax="50" waistate: valuenow="33"> </span> Yahoo! Confidential 39
Approach 4: “Accessible DHTML” • Examples: HTML 4 <script type="text/javascript" src="enable. js"></script> <span id="slider" class="myslider myselector 2 slider valuemin-0 valuemax-50 valuenow-33" tabindex="0" > </span> Yahoo! Confidential 40
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 Yahoo! Confidential 41
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 Yahoo! Confidential 42
Looking ahead… • What is at risk if we don’t standardize on an accessible platform? Yahoo! Confidential 43
Open Questions • Is there always an alternative to a mousebased 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. Yahoo! Confidential 44
More Information • Nate Koechley – – natek@yahoo-inc. com – http: //nate. koechley. com/blog • Victor Tsaran – vtsaran@yahoo-inc. com • Yahoo! Developer Network and Y! UI Blog: – – – Yahoo! Confidential http: //developer. yahoo. net/yui http: //developer. yahoo. net/ypatterns http: //groups. yahoo. com/group/ydn-javascript http: //www. yuiblog. com 45
END OF TALK • NOTE: Remaining slides are candidates for inclusion, but will likely be dropped from the presentation. Yahoo! Confidential 46
Slider • Slider Control – Simple support for vertical and horizontal sliders as a directmanipulation alternative to input boxes – Simple API to script on. Change behavior – Support for smooth or graduated slider action – Built-in support for click-to animation of slider – Builds on top of: • Drag and Drop Utility • Position Utility • Animation Utility (optional) Yahoo! Confidential 47
Slider • Slider: Beyond the Obvious – Look to desktop applications for inspiration for slider applications – Generally, consider a slider as an alternative to entering values that run along a continuum; for example: • RGB values for color selection • Amplitude of different variables in a prioritization algorithm • Simple integer continuum Yahoo! Confidential 48
Slider Yahoo! Confidential 49
Calendar • Calendar – Simple date selection widget that can be implemented with only a few lines of code – Fully client-side calendar navigation – Built-in multi-select or single-select capability, in single or twoup views – Out-of-the-box rich UED-approved look-and-feel standard across the Yahoo! Network – Support for advanced implementations such as: • localization • blacked-out date sets • custom holiday formatting Yahoo! Confidential 50
Calendar <script> var my. Cal; function init() { my. Cal = new yg. Calendar(‘my. Cal’, ’my. Cal. Container’); my. Cal. render(); } </script> <div id=‘my. Cal. Container’></div> Yahoo! Confidential 51
Calendar • Calendar: Beyond the Obvious – Highly adaptable API allows you to use the Calendar Widget as visual container for any data that can be organized by date — • Flickr photo album • Upcoming. org events • Blog posts and comments – CSS styles can be overridden to develop custom styling for specific properties – The calendar’s advanced render stack allows the content of any given date cell to be dynamically altered by extending the base class, yg. Calendar_Core, and using one or more callback functions – Other advanced options like minimum and maximum selection dates, week numbers, and which day the week begins on can be changed using the built-in configuration options Yahoo! Confidential 52
Auto. Complete • Auto. Complete – Provides “as-you-type” list of matching items – List navigable via the mouse or keyboard – Configurable dropdown styles and animation – Data subset cache – Configurable delay prior to lookup – “Starts with” or “Contains” matching patterns – Limit-to-list feature (combo box vs. select box) – Common and custom data formats supported: • Delimited text • Java. Script Array literals Yahoo! Confidential 53
Auto. Complete Yahoo! Confidential 54
Tree. View • Tree. View Control – Flexible support for hierarchical information views: • Table of contents • Threaded discussion • Hierarchical Menus – API gives you easy scripting access to interesting moments: • When nodes are clicked • When nodes expand • When nodes contract – Support for dynamic loading of node contents – Styling driven entirely by CSS Yahoo! Confidential 55
Tree. View Yahoo! Confidential 56
- Slides: 56