Yahoo! Experiences with Accessibility in DHTML and RIA Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering.

Yahoo! Experiences withYahoo! Experiences with Accessibility in DHTML and RIAAccessibility in DHTML and RIA

Nate KoechleyNate KoechleySenior Engineer & Designer, Yahoo! User Interface (YUI) Library TeamPlatform Engineering Group Yahoo! Inc.

Slideshttp://nate.koechley.com/talks/2006/12/webbuilder/

Contacthttp://yuiblog.comnatek@yahoo-inc.comhttp://developer.yahoo.com/yui

Web Builder 2.0 Las Vegas

Browser vs. DesktopBrowser vs. Desktop

Web 1.0 vs. Web 2.0Web 1.0 vs. Web 2.0

Sure, but how?Sure, but how?

Study the History of the DesktopStudy the History of the Desktop

Adapted from Alan Cooper’s “About Face 2.0” Book

[compounds]

[idioms]

Connection Manager (Ajax)Connection Manager (Ajax) Event UtilityEvent Utility

Dom CollectionDom Collection

Drag & DropDrag & DropAnimationAnimation

Logger ControlLogger Control

Menu ControlMenu Control

SliderSliderTree ControlTree Control

Calendar ControlCalendar Control

AutoCompleteAutoComplete

The Yahoo! User Interface (YUI) Library

DHTML WindowingDHTML Windowing

CSS Reset, Fonts, GridsCSS Reset, Fonts, Grids

TabViewTabView

Some DefinitionsSome Definitions

Definitions: DHTML / AjaxDefinitions: DHTML / Ajax

It’s NOT a specific technology

Definitions: DHTML / AjaxDefinitions: DHTML / Ajax

It’s NOT a specific technology It’s NOT inherently inaccessible

Rich Internet Applications (RIAs) are:Rich Internet Applications (RIAs) are:

Features and functionality of desktop apps online

Built with Flash, JavaScript, Java, etc…

“Degree to which a system is usable without modification”

(wikipedia)

Accessibility is

Accessibility = AvailabilityAccessibility = AvailabilityAccessibility is Availability

Accessibility is Availability

Accessibility = AvailabilityAccessibility = AvailabilityAccessibility is Availability

Accessibility is Availability

How is “Richness” made accessible on the

desktop?

How is “Richness” made accessible on the

desktop?

Accessibility on the DesktopAccessibility on the Desktop

OS API AT

Result: Nearly ubiquitous accessibility.

If it works on the desktop, what’s the

problem on the Web?

If it works on the desktop, what’s the

problem on the Web?

The Bad NewsThe Bad News

Only some info is passed to desktop API–Yes:

Basic semantics (lists, headers)Basic i/o (page load, links)Basic interaction (form elements)

–No:Compound elements (tab panels)Delayed and asynchronous i/o (ajax)Complex and detached interactions

(drag-n-drop)

The Good NewsThe Good News

“One of W3C's primary goals is to make these benefits available to all people, whatever their . . . physical or mental ability. “

http://www.w3.org/Consortium/Points/

So how do we move forward?

Characteristics of TechniquesCharacteristics of Techniques

Don’t make it worseProvide optionsUsing existing conventionsMove in the right directionSupport emerging a11y tech

Four Techniques – Use Them AllFour Techniques – Use Them All

1. Standards-based Development

2. Redundant Interfaces

3. Predictable Ports

4. W3C’s WAI ARIA (aka “Accessible DHTML”)

Standards-Based Development

don’t miss the opportunity

“Getting It Right The Second Time”

– matt sweeney

““Getting it Right the Second Time”Getting it Right the Second Time”

1. Use technology as designedH1, LI, P

2. Don’t corrupt layers of the stackBad: class=“red-button”

Bad: href=“#” and href=“javascript:”

3. Create platforms and Evolvability Encapsulation, Flexibility, Mashups, Services, Portability

4. Preserve opportunity & availability

Approach 1:Approach 1:Standards-Based DevelopmentStandards-Based Development

Build a strong foundationProgressive enhancementUnobtrusive enhancementDon’t pollute

Best chance to be generous.

Standards-Based DevelopmentStandards-Based Development

Example: Y!News Tab PanelExample: Y!News Tab Panel

Example: Tab-Panel box: complete

Without CSS

Without JavaScript

Embrace simplicity:

•Anchored links and lists meaningful and available to all

•Links always work sometimes Hijax with Unobtrusive JS

•Stretching semantics to provide clues; Microformats

Ex: Y!Photos Ratings & TagsEx: Y!Photos Ratings & Tags

http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/photos-nocss.avi

Example: Y!Games Example: Y!Games

http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/games-nav.avi

Example: Y! Home PageExample: Y! Home Page

http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/da11y-fp-searchtabs.avi

BenefitsBenefits

Should be doing this regardless “With the grain” of web

technologies Truly available to all The foundation of better things A step toward a semantic web Here to stay (10+ years)

DrawbacksDrawbacks

Doesn’t solve every problem Perceived overhead Unobtrusive JavaScript and Hijax

are still less familiar techniques

Redundant InterfacesRedundant Interfaces

offer flexible interaction

Approach 2:Approach 2:

Redundant Interfaces Redundant Interfaces

GUI and character input Direct and configuration-based Static entry and AutoComplete Tab and Arrow Keys

Approach 2:Approach 2:

Redundant Interfaces Redundant Interfaces

Keyboard and mouse Esc. and Cancel Drag-drop and multi-page Ajax and HTTP

Example: 1D SliderExample: 1D Slider

http://developer.yahoo.com/yui/examples/slider/index.html

Sliders are redundant to text inputs. Progressively enhances direct

manipulation.

http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/Slider-basic.avi

Example: 2D SliderExample: 2D Slider

http://developer.yahoo.com/yui/examples/slider/rgb2.html

Example: Date SelectorExample: Date Selector

http://developer.yahoo.com/yui/examples/calendar/intl_japan/

http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html

Example: YUI Menu from MarkupExample: YUI Menu from Markup

Motion Protection– http://developer.yahoo.com/yui/examples/container/

panel-aqua.html

Drag and Drop Constrained to Viewport

Technology Protection– http://yuiblog.com/blog/2006/09/22/yahoo-devday-

schedule/

without JS and CSSwithout JS or CSSwith Keyboardwith Mouse

Example: YUI Panel from MarkupExample: YUI Panel from Markup

http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/frontpage-nojs.avi

Example: Yahoo! HomepageExample: Yahoo! Homepage

Ex: Drag-n-Drop vs. Edit FlowEx: Drag-n-Drop vs. Edit Flow

http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/my-change-layout.avi

BenefitsBenefits

Better for everybody–Let users choose

–Keyboard is important for ALL users

Works today

DrawbacksDrawbacks

Insufficient communication Not “unified” Requires two experiences

•But not 2x effort!

•Can actually benefit development process

Faithful and

Predictable Ports

Faithful and

Predictable Portsgive users all of what they expect

Faithful and Predictable Ports:Faithful and Predictable Ports:

Faithful and Predictable PortsFaithful and Predictable Ports

Support wholesale transfer of skills–Learnability

–Discoverability

Capture this moment in time–Completeness is critical

Example: Full Selection ModelExample: Full Selection Model

http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/photos-selection.avi

Example: Full Keyboard ControlExample: Full Keyboard Control

Example:

Slider with

keyboard control

http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/slider-keyboard.avi

Click “close” or press Esc

BenefitsBenefits

If we match users expectations, there’s a quantum leap in discoverability, comfort, and expectations for free.

DrawbacksDrawbacks

Isn’t always trivial –(but it’s build into YUI)

WAI ARIAWAI ARIA

W3C: “Accessible DHTML”

Rich Interfaces Require

Sophisticated Definitions

Rich Interfaces Require

Sophisticated Definitions

we can’t act on information we don’t have

“AT requires information about the semantics of specific portions of a document in order to present those portions in an accessible form.”

http://www.w3.org/2006/09/aria-pressrelease.html

Approach 4: Approach 4: ARIAARIA

Communicate directly with desktop API

IBM, now in W3C and open– http://www.w3.org/TR/aria-roadmap/– http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20060318.ht

Embeds “role” and “state” metadata–Uses namespace extensions to XHTML 2, but

Techniques allow most functionality in HTML 4 documents, as of today

What’s the Virtual Buffer?What’s the Virtual Buffer?

The Virtual Buffer and ScriptThe Virtual Buffer and Script

Handles basic script: –click, keypress, mouseover

–For these, new content is exposed

Ajax content isn’t natively exposed in reaction to these events

For example, doesn’t know onreadystatechange

ARIA Architecture OverviewARIA Architecture Overviewhttp://www.w3.org/WAI/PF/roadmap/http://www.w3.org/WAI/PF/roadmap/

Base Roles– Input, textbox, select, range, section, sectionhead, window

Widget Roles– Link, combobox, option, checkbox, checkboxtristate, radio,

radiogroup, button, menuitemradio, menuitemcheckbox, progressbar, secret, separator, slider, spinbutton, textarea, textfield, tree, treegroup, treeitem, status, alert, alertdialog, dialog

Structural Roles– Presentation, application, document, group, imggroup,

directory, region, liveregion, log, grid, gridcell, tabcontainer, tab, tabpanel, tablist, table, td, th, rowheader, columnheader, list, listitem, menu, toolbar, menubar, menuitem, breadcrumbs

Role Taxonomy Role Taxonomy http://www.w3.org/TR/aria-role/http://www.w3.org/TR/aria-role/

States and Adaptable Properties ModuleStates and Adaptable Properties Modulehttp://www.w3.org/WAI/PF/adaptablehttp://www.w3.org/WAI/PF/adaptable

checked iconed disabled readonly multiselectable domactive zoom expanded selected pressed important required haseffect valueNew valueMax valueMin

step invalid describedby labeledby hasparent haschild haspopup alternatestyle tabindex flowto flowfrom controls controlledby subpageof

““ARIA”ARIA”

Example: XHTMLExample: XHTML

</span>

““ARIA”ARIA”

Example: HTML 4Example: HTML 4

</span>

ARIA BenefitsARIA Benefits

Uses well-understood, powerful desktop API

Map controls, events, roles & states directly

Standard and predictable Progressive Enhancement

ARIA DrawbacksARIA Drawbacks

Requires recent-versions of AT

Mozilla’s Firefox 1.5+ only today–But good things happening

XHTML required for full power

We Need Your HelpWe Need Your Help

This is an important development–Thanks are due to IMB/Mozilla/W3C

Becky Gibson Aaron Leventhal

Our adoption –Multiplies their efforts

–Reduces costs for small AT companies

Binary Browser SupportBinary Browser Support

Do I need to support ___ on this project?

Graded Browser Support:Graded Browser Support:Two Key Ideas (1)Two Key Ideas (1)

1) We need a realistic definition of Support

“Support” does not = “identical”.

“Support” means “content is available”

“Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web.”

Graded Browser Support:Graded Browser Support:Two Key Ideas (2)Two Key Ideas (2)

2) “Support” is not binary. There are grades of support.

http://developer.yahoo.com/yui/articles/gbs/gbs.html

Graded Browser Support:Graded Browser Support:General Best PracticeGeneral Best Practice

Three Grades of Browser SupportC-grade support (core support, 2%)A-grade support (advanced support,

96%)X-grade support (the X-Factor, 2%)

http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html

Final ThoughtsFinal Thoughts

It’s a win-win opportunity, and we’ll get there fastest together.

Thank you.Thank you.

natek@yahoo-inc.com

http://nate.koechley.com/talks

http://developer.yahoo.com/yuihttp://yuiblog.comhttp://nate.koechley.com/blog

Photo Credits:– http://www.flickr.com/photos/jacqueline-w/56107224/– http://www.flickr.com/photos/grimreaperwithalawnmower/191890428/– http://www.flickr.com/photos/jasonmichael/4126695/

We’re hiring!(Josie Arguada: jaguada@yahoo-inc.com)

natek@yahoo-inc.comhttp://nate.koechley.com/talks

Questions?Questions?

I don’t know.I don’t know.

Yahoo! Experiences with Accessibility in DHTML and RIA Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering.

Documents

Nate koechley the yui css foundation

DHTML - Dynamic HTML

Yahoo! Experiences with Accessibility (a11y), DHTML, and...

Dhtml Final

Accessible DHTML

HTML, DHTML & JAVASCRIPT

Dhtml manual 2 desconocido

Dhtml chapter2

1 Yahoo! User Interface Library Nate Koechley @ Oracle User....

HTML and DHTML Questions

DHTML and DOM

INTRODUCTION TO DHTML

How to DHTML (Tutorial)

Yahoo! Confidential1 Yahoo! Experiences with Accessibility,....

Javascript DHTML

Client Side Technologies: DHTML -...