yahoo! confidential1 yahoo! experiences with accessibility, dhtml, and ajax in rich internet...

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

– Fortified, thorough 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. Fortified, thorough 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

• Here to stay, more than 10 years



• 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

• Works today



• Drawbacks

• Cannot fully communicate with the desktop’s accessibility APIs

• Dual experiences challenge goal of parity

• Requires development of two experiences


Approach 3:Fortified, thorough 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 fortified with keyboard



• Example: Slider fortified with keyboard



• 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


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.


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.


Slider


Calendar

<script> var myCal; function init() { myCal = new ygCalendar(‘myCal’,’myCalContainer’); myCal.render(); }</script><div id=‘myCalContainer’></div>


AutoComplete


TreeView

yahoo! confidential1 yahoo! experiences with accessibility, dhtml, and ajax in rich internet...

Documents