csun2006_v0.2.ppt
-
Upload
sampetruda -
Category
Documents
-
view
307 -
download
2
Transcript of csun2006_v0.2.ppt
![Page 1: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/1.jpg)
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.
![Page 2: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/2.jpg)
2Yahoo! Confidential
Agenda
• Changing Landscape
• Definitions
• Four Approaches– Standards-based development
– Redundant interfaces
– Thorough, fortified interfaces
– “Accessible DHTML”
• Looking Ahead
![Page 3: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/3.jpg)
3Yahoo! Confidential
About Us
• Victor Tsaran
– Accessibility Project Manager
• Nate Koechley
– Senior Frontend Engineer
– Technical Architect and Design Liaison
– Presentation Platform Team
![Page 4: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/4.jpg)
4Yahoo! Confidential
What’s Happening?
![Page 5: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/5.jpg)
5Yahoo! Confidential
Browser vs. Desktop
![Page 6: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/6.jpg)
6Yahoo! Confidential
Web 1.0 vs. Web 2.0
![Page 7: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/7.jpg)
7Yahoo! Confidential
Yahoo’s “Alan Cooper” Model
![Page 8: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/8.jpg)
8Yahoo! Confidential
Definitions
![Page 9: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/9.jpg)
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
![Page 10: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/10.jpg)
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
![Page 11: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/11.jpg)
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
![Page 12: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/12.jpg)
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
![Page 13: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/13.jpg)
13Yahoo! Confidential
What about Desktop Accessibility?
![Page 14: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/14.jpg)
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.
![Page 15: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/15.jpg)
15Yahoo! Confidential
But what about web accessibility?
![Page 16: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/16.jpg)
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…
![Page 17: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/17.jpg)
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.
![Page 18: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/18.jpg)
18Yahoo! Confidential
So how can we move forward?
![Page 19: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/19.jpg)
19Yahoo! Confidential
Four Techniques – Use ‘em All
1. Standards-based development
2. Redundant interfaces
3. Thorough, fortified interfaces
4. “Accessible DHTML”
![Page 20: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/20.jpg)
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
![Page 21: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/21.jpg)
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
![Page 22: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/22.jpg)
22Yahoo! Confidential
Approach 1:Standards-based development
• Example: Tab-Panel box: complete
![Page 23: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/23.jpg)
23Yahoo! Confidential
Approach 1:Standards-based development
• Example: Tab-Panel box: no CSS
![Page 24: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/24.jpg)
24Yahoo! Confidential
Approach 1:Standards-based development
• Example: Tab-Panel box: no JavaScript
![Page 25: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/25.jpg)
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
![Page 26: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/26.jpg)
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
![Page 27: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/27.jpg)
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
![Page 28: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/28.jpg)
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.
![Page 29: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/29.jpg)
29Yahoo! Confidential
Approach 2:Redundant interfaces
• Example, 2D Slider Input
![Page 30: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/30.jpg)
30Yahoo! Confidential
Approach 2:Redundant interfaces
• Example: Calendar Date Selector
![Page 31: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/31.jpg)
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
![Page 32: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/32.jpg)
32Yahoo! Confidential
Approach 2:Redundant interfaces
• Drawbacks
• Cannot fully communicate with the desktop’s accessibility APIs
![Page 33: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/33.jpg)
33Yahoo! Confidential
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
![Page 34: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/34.jpg)
34Yahoo! Confidential
Approach 3:Thorough, fortified interfaces
• Examples
• Menu
![Page 35: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/35.jpg)
35Yahoo! Confidential
Approach 3:Thorough, fortified interfaces
• Example: Slider w/ Keyboard Controls
– keyboard in addition to mouse controls
![Page 36: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/36.jpg)
36Yahoo! Confidential
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
![Page 37: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/37.jpg)
37Yahoo! Confidential
Approach 3:Thorough, fortified interfaces
• Drawbacks
• Isn’t easy
• Clients don’t always notice• Requires personal integrity and commitment
• Seems more complete and heavy
![Page 38: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/38.jpg)
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
![Page 39: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/39.jpg)
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>
![Page 40: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/40.jpg)
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>
![Page 41: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/41.jpg)
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
![Page 42: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/42.jpg)
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
![Page 43: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/43.jpg)
43Yahoo! Confidential
Looking ahead…
• What is at risk if we don’t standardize on an accessible platform?
![Page 44: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/44.jpg)
44Yahoo! 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.
![Page 45: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/45.jpg)
45Yahoo! 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
![Page 46: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/46.jpg)
46Yahoo! Confidential
END OF TALK
• NOTE: Remaining slides are candidates for inclusion, but will likely be dropped from the presentation.
![Page 47: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/47.jpg)
47Yahoo! Confidential
Slider
• Slider Control– Simple support for vertical and horizontal sliders as a direct-
manipulation alternative to input boxes
– Simple API to script onChange 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)
![Page 48: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/48.jpg)
48Yahoo! Confidential
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
![Page 49: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/49.jpg)
49Yahoo! Confidential
Slider
![Page 50: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/50.jpg)
50Yahoo! Confidential
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 two-up 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
![Page 51: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/51.jpg)
51Yahoo! Confidential
Calendar
<script> var myCal; function init() { myCal = new ygCalendar(‘myCal’,’myCalContainer’); myCal.render(); }</script><div id=‘myCalContainer’></div>
![Page 52: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/52.jpg)
52Yahoo! Confidential
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, ygCalendar_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
![Page 53: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/53.jpg)
53Yahoo! Confidential
AutoComplete
• AutoComplete– 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
• JavaScript Array literals
![Page 54: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/54.jpg)
54Yahoo! Confidential
AutoComplete
![Page 55: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/55.jpg)
55Yahoo! Confidential
TreeView
• TreeView 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
![Page 56: csun2006_v0.2.ppt](https://reader035.fdocuments.in/reader035/viewer/2022062514/55843cf3d8b42a56178b4da4/html5/thumbnails/56.jpg)
56Yahoo! Confidential
TreeView