Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • What changes are taking place in the web industry, and what is the impact on accessibility of these new directions?
  • On the left side of this image is a screenshot of a plain text-based web page. On the right are screenshots of various rich desktop apps, including Apple’s iTunes and iPhoto, as well as Microsoft Word and Yahoo! Messenger. The two sides of the image contrast the low-fidelity of what’s common and expected on the web, with the richness and high-interactiveness of what’s possible, common and expected on the desktop.
  • This slide highlights the shift well-underway in web design and development. There are two images on this slide. On the left is a picture of the Yahoo! front page circa 1996. It’s a simple text-link based web directory, a place to click-and-leave. On the right is a screenshot of the new Yahoo! Mail Beta, a very rich internet application. In the mail screenshot, the user is seen sorting their mail with drag and drop, and making use of the live-preview functionality.
  • One of the primary reasons that GUIs are easy to use is that they enforce a restricted interaction vocabulary that builds complex idioms from a very small set of primitives: pointing, clicking, dragging. These primitives can build a larger set of simple compounds, which in turn can be assembled into a wide variety of complex, domain-specific idioms, all of which are based on the same small set of easily learned actions. Cooper, About Face 2.0 (2003), Chapter 20 This graphic shows an inverted pyramid with three layers. The bottom layer, at the small tip of the inverted pyramid, is what Alan Cooper calls “primitives” and what we call “utilities”. These utilities are foundational tools for processing browser primitives. There are event-sensitive and in-page, and include event management, drag and drop management, connection and system-communication management, and animation. The middle layer of the pyramid, what Cooper called “compounds” are referred to by us as “widgets”. There are generic input/output interacton patterns for common tasks, and provide smarter and faster network-wide interfaces. Examples include sliders, date-pickers, auto-complete, and treeviews. The final layer, the broad top of the inverter pyramid, are called idioms by both Cooper and us. There are property-specific, application-level user interface innovations in commands and feedback mechanisms.
  • This slide has a picture of a bookshelf full of English dictionaries. In the following slides we will define the terms used in this presentation.
  • How has the richness of the desktop been made accessible?
  • What changes are taking place in the web industry, and what is the impact on accessibility of these new directions?
  • The screenshot image on this slide shows a “tab panel box” widget from Yahoo! News, where 8 news sources are tabs across the top of the module, and the body of the module is the top 5 stories from whichever source-tab is selected.
  • This image shows the underlying meaningful markup structure of the tab panel box, specifically H elements for headers and unordered lists for the sources and stories. Each story is further marked up to indicate the title, source and dateline of each story.
  • This shows the raw markup of the tab panel box widget. It shows that the core experience contains traditional href’s pointing to specific resources without the need for JavaScript.
  • This example, from Yahoo! Travel in Japan, shows a standard three-select-box form-based date selector familiar from any travel site. It also has a calendar icon behind which a dhtml-based date selector.

csun2006_v0.2.ppt csun2006_v0.2.ppt Presentation Transcript

  • 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.
  • Agenda
    • Changing Landscape
    • Definitions
    • Four Approaches
      • Standards-based development
      • Redundant interfaces
      • Thorough, fortified interfaces
      • “Accessible DHTML”
    • Looking Ahead
  • About Us
    • Victor Tsaran
      • Accessibility Project Manager
    • Nate Koechley
      • Senior Frontend Engineer
      • Technical Architect and Design Liaison
      • Presentation Platform Team
  • What’s Happening?
  • Browser vs. Desktop
  • Web 1.0 vs. Web 2.0
  • Yahoo’s “Alan Cooper” Model
  • Definitions
  • 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
  • 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
  • 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
  • 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
  • What about Desktop Accessibility?
  • 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.
  • But what about web accessibility?
  • 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…
  • 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.
  • So how can we move forward?
  • Four Techniques – Use ‘em All
    • Standards-based development
    • Redundant interfaces
    • Thorough, fortified interfaces
    • “Accessible DHTML”
  • 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
  • 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
  • Approach 1: Standards-based development
    • Example: Tab-Panel box: complete
  • Approach 1: Standards-based development
    • Example: Tab-Panel box: no CSS
  • Approach 1: Standards-based development
    • Example: Tab-Panel box: no JavaScript
  • 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
  • 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
  • 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
  • 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.
  • Approach 2: Redundant interfaces
    • Example, 2D Slider Input
  • Approach 2: Redundant interfaces
    • Example: Calendar Date Selector
  • 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
  • Approach 2: Redundant interfaces
    • Drawbacks
      • Cannot fully communicate with the desktop’s accessibility APIs
  • 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
  • Approach 3: Thorough, fortified interfaces
    • Examples
      • Menu
  • Approach 3: Thorough, fortified interfaces
    • Example: Slider w/ Keyboard Controls
      • keyboard in addition to mouse controls
  • 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
  • Approach 3: Thorough, fortified interfaces
    • Drawbacks
      • Isn’t easy
      • Clients don’t always notice
        • Requires personal integrity and commitment
      • Seems more complete and heavy
  • 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
  • Approach 4: “Accessible DHTML”
    • Examples: XHTML 2
    <html xmlns: wairole =&quot;/w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#&quot; xmlns: waistate =“/w3.org/2005/07/aaa&quot; > <span id=&quot;slider&quot; class=&quot;myslider&quot; role=&quot; wairole :slider&quot; waistate :valuemin=&quot;0&quot; waistate :valuemax=&quot;50&quot; waistate :valuenow=&quot;33&quot; > </span>
  • Approach 4: “Accessible DHTML”
    • Examples: HTML 4
    <script type=&quot;text/javascript&quot; src=&quot; enable.js &quot;></script> <span id=&quot;slider&quot; class=&quot;myslider myselector2 slider valuemin-0 valuemax-50 valuenow-33 &quot; tabindex=&quot;0&quot; > </span>
  • 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
  • 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
  • Looking ahead…
    • What is at risk if we don’t standardize on an accessible platform?
  • 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.
  • More Information
    • Nate Koechley –
      • [email_address]
      • http://nate.koechley.com/blog
    • Victor Tsaran
      • [email_address]
    • 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
    • NOTE: Remaining slides are candidates for inclusion, but will likely be dropped from the presentation.
  • 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)
  • 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
  • Slider
  • 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
  • Calendar <script> var myCal; function init() { myCal = new ygCalendar(‘myCal’,’myCalContainer’); myCal.render(); } </script> <div id=‘myCalContainer’></div>
  • 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
  • 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
  • AutoComplete
  • 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
  • TreeView