yahoo! experiences with accessibility in dhtml and...

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 technologyIt’s NOT inherently inaccessible

Rich Internet Applications (Rich Internet Applications (RIAsRIAs) are:) 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 Four Techniques –– Use Them AllUse Them All

1. Standards-based Development2. Redundant Interfaces 3. Predictable Ports4. W3C’s WAI ARIA

(aka “Accessible DHTML”)

Standards-Based Development

Standards-Based Developmentdon’t miss the opportunity

“Getting It Right The Second Time”

– matt sweeney

““Getting it Right the Second TimeGetting 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 EvolvabilityEncapsulation, Flexibility, Mashups, Services, Portability

4. Preserve opportunity & availability

Approach 1:Approach 1:StandardsStandards--Based DevelopmentBased Development

Build a strong foundationProgressive enhancementUnobtrusive enhancementDon’t pollute

Best chance to be generous.

StandardsStandards--Based DevelopmentBased DevelopmentExample: Example: Y!NewsY!News Tab PanelTab 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

StandardsStandards--Based DevelopmentBased DevelopmentEx: Ex: Y!PhotosY!Photos Ratings & TagsRatings & Tags

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

StandardsStandards--Based DevelopmentBased DevelopmentExample: Example: Y!GamesY!Games

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

StandardsStandards--Based DevelopmentBased DevelopmentExample: Y! Home PageExample: Y! Home Page

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

StandardsStandards--Based DevelopmentBased DevelopmentBenefitsBenefits

Should be doing this regardless“With the grain” of web technologiesTruly available to allThe foundation of better thingsA step toward a semantic webHere to stay (10+ years)

StandardsStandards--Based DevelopmentBased DevelopmentDrawbacksDrawbacks

Doesn’t solve every problemPerceived overheadUnobtrusive 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 inputDirect and configuration-based Static entry and AutoCompleteTab and Arrow Keys

Approach 2:Approach 2:Redundant Interfaces Redundant Interfaces

Keyboard and mouseEsc. and CancelDrag-drop and multi-pageAjax and HTTP

Redundant InterfacesRedundant InterfacesExample: 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

Redundant InterfacesRedundant InterfacesExample: 2D SliderExample: 2D Slider

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

Redundant InterfacesRedundant InterfacesExample: Date SelectorExample: Date Selector

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

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

Redundant InterfacesRedundant InterfacesExample: 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

Redundant InterfacesRedundant InterfacesExample: YUI Panel from MarkupExample: YUI Panel from Markup

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

Redundant InterfacesRedundant InterfacesExample: Yahoo! HomepageExample: Yahoo! Homepage

Redundant InterfacesRedundant InterfacesEx: DragEx: Drag--nn--Drop vs. Edit FlowDrop vs. Edit Flow

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

Redundant InterfacesRedundant InterfacesBenefitsBenefits

Better for everybody–Let users choose –Keyboard is important for ALL users

Works today

Redundant InterfacesRedundant InterfacesDrawbacksDrawbacks

Insufficient communicationNot “unified”Requires two experiences• But not 2x effort!•Can actually benefit development process

Faithful and Predictable Ports

give 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

Faithful and Predictable Ports:Faithful and Predictable Ports:Example: Full Selection ModelExample: Full Selection Model

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

Faithful and Predictable Ports:Faithful and Predictable Ports: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

Faithful and Predictable Ports:Faithful and Predictable Ports:Example: Full Keyboard ControlExample: Full Keyboard Control

Click “close” or press Esc

Faithful and Predictable Ports:Faithful and Predictable Ports:BenefitsBenefits

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

Faithful and Predictable Ports:Faithful and Predictable Ports:DrawbacksDrawbacks

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

WAI ARIAWAI ARIA

W3C: “Accessible DHTML”

Rich Interfaces RequireSophisticated 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.html

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

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

WhatWhat’’s the Virtual Buffer?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/ariahttp://www.w3.org/TR/aria--role/role/

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

checkediconeddisabledreadonlymultiselectabledomactivezoomexpandedselectedpressedimportantrequiredhaseffectvalueNewvalueMaxvalueMin

stepinvaliddescribedbylabeledbyhasparenthaschildhaspopupalternatestyletabindexflowtoflowfromcontrolscontrolledbysubpageof

““ARIAARIA””Example: XHTMLExample: XHTML

</span>

““ARIAARIA””Example: HTML 4Example: HTML 4

</span>

ARIA BenefitsARIA Benefits

Uses well-understood, powerful desktop APIMap controls, events, roles & states directlyStandard and predictable Progressive Enhancement

ARIA DrawbacksARIA Drawbacks

Requires recent-versions of ATMozilla’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

Availability and Browser Support

Graded Browser Support

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.comhttp://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)

Questions?Questions?

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

yahoo! experiences with accessibility in dhtml and...

Documents

yahoo! experiences with accessibility in dhtml and ria nate...

accessibility: automated testing of ria (web5conf)

dhtml object

dhtml manual 2 desconocido

dhtml. what is dhtml? dhtml is the combination of several...

dhtml data binding with tdc

css & dhtml

using acceptance tests to validate accessibility...

javascript i dhtml. receptury

html and dhtml questions

curso de dhtml

dhtml and dom

client side technologies: dhtml -...

dhtml object model and collections

how to dhtml (tutorial)

6612160 dhtml tutorial

designing ria accessibility: a yahoo ui (yui) menu case...

dhtml utopia - chem1

yahoo! confidential1 yahoo! experiences with accessibility,...

html, dhtml & javascript