csun2006_v0.2.ppt

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.


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

1. Standards-based development

2. Redundant interfaces

3. Thorough, fortified interfaces

4. “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



• 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



• Example: Tab-Panel box: complete



• Example: Tab-Panel box: no CSS



• Example: Tab-Panel box: no JavaScript



• 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



• 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


• 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



• 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.



• Example, 2D Slider Input



• Example: Calendar Date Selector



• 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



• Drawbacks

• Cannot fully communicate with the desktop’s accessibility APIs


Approach 3:Thorough, fortified interfaces


• 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



• Examples

• Menu



• Example: Slider w/ Keyboard Controls

– keyboard in addition to mouse controls



• 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



• 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



• 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>



• 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>



• 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



• 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 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


END OF TALK

• 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

csun2006_v0.2.ppt

Documents

accessibility accessibility

web accessibility

desktop accessibility

redundant interfaces

redundant interfaces

redundant interfaces

omnipresent accessibility

dhtml dhtml