yahoo! experiences with accessibility in dhtml and ria nate koechley senior engineer & designer,...

82
Yahoo! Experiences with Yahoo! Experiences with Accessibility in DHTML and RIA Accessibility in DHTML and RIA Nate Koechley Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo! Inc. Slides http://nate.koechley.com/talks/2006/12/webbuilder/ Contact http://yuiblog.com [email protected] http:// developer.yahoo.com/yui Web Builder 2.0 Las Vegas

Upload: sharlene-freeman

Post on 11-Jan-2016

220 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 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://[email protected]://developer.yahoo.com/yui

Web Builder 2.0 Las Vegas

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

Browser vs. DesktopBrowser vs. Desktop

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

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

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

Sure, but how?Sure, but how?

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

Study the History of the DesktopStudy the History of the Desktop

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

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

[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

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

Some DefinitionsSome Definitions

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

Definitions: DHTML / AjaxDefinitions: DHTML / Ajax

It’s NOT a specific technology

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

Definitions: DHTML / AjaxDefinitions: DHTML / Ajax

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

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

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

Features and functionality of desktop apps online

Built with Flash, JavaScript, Java, etc…

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

“Degree to which a system is usable without modification”

(wikipedia)

Accessibility is

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

Accessibility = AvailabilityAccessibility = AvailabilityAccessibility is Availability

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

Accessibility = AvailabilityAccessibility = AvailabilityAccessibility is Availability

Accessibility is Availability

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

Accessibility = AvailabilityAccessibility = AvailabilityAccessibility is Availability

Accessibility is Availability

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

How is “Richness” made accessible on the

desktop?

How is “Richness” made accessible on the

desktop?

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

Accessibility on the DesktopAccessibility on the Desktop

OS API AT

Result: Nearly ubiquitous accessibility.

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

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?

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

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)

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

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/

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

So how do we move forward?

So how do we move forward?

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

Characteristics of TechniquesCharacteristics of Techniques

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

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

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”)

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

Standards-Based Development

Standards-Based Development

don’t miss the opportunity

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

“Getting It Right The Second Time”

– matt sweeney

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

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

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

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

Build a strong foundationProgressive enhancementUnobtrusive enhancementDon’t pollute

Best chance to be generous.

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

Standards-Based DevelopmentStandards-Based Development

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

Example: Tab-Panel box: complete

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

Standards-Based DevelopmentStandards-Based Development

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

Without CSS

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

Standards-Based DevelopmentStandards-Based Development

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

Without JavaScript

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

Standards-Based DevelopmentStandards-Based Development

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

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

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

Standards-Based DevelopmentStandards-Based Development

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

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

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

Standards-Based DevelopmentStandards-Based Development

Example: Y!Games Example: Y!Games

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

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

Standards-Based DevelopmentStandards-Based Development

Example: Y! Home PageExample: Y! Home Page

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

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

Standards-Based DevelopmentStandards-Based Development

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)

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

Standards-Based DevelopmentStandards-Based Development

DrawbacksDrawbacks

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

are still less familiar techniques

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

Redundant InterfacesRedundant Interfaces

offer flexible interaction

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

Approach 2:Approach 2:

Redundant Interfaces Redundant Interfaces

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

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

Approach 2:Approach 2:

Redundant Interfaces Redundant Interfaces

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

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

Redundant InterfacesRedundant Interfaces

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

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

Redundant InterfacesRedundant Interfaces

Example: 2D SliderExample: 2D Slider

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

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

Redundant InterfacesRedundant Interfaces

Example: Date SelectorExample: Date Selector

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

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

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

Redundant InterfacesRedundant Interfaces

Example: YUI Menu from MarkupExample: YUI Menu from Markup

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

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 Interfaces

Example: YUI Panel from MarkupExample: YUI Panel from Markup

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

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

Redundant InterfacesRedundant Interfaces

Example: Yahoo! HomepageExample: Yahoo! Homepage

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

Redundant InterfacesRedundant Interfaces

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

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

Redundant InterfacesRedundant Interfaces

BenefitsBenefits

Better for everybody–Let users choose

–Keyboard is important for ALL users

Works today

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

Redundant InterfacesRedundant Interfaces

DrawbacksDrawbacks

Insufficient communication Not “unified” Requires two experiences

•But not 2x effort!

•Can actually benefit development process

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

Faithful and

Predictable Ports

Faithful and

Predictable Portsgive users all of what they expect

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

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

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

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

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

Faithful and Predictable Ports:Faithful and Predictable Ports:

Example: Full Keyboard ControlExample: Full Keyboard Control

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

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

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

Faithful and Predictable Ports:Faithful and Predictable Ports:

Example: Full Keyboard ControlExample: Full Keyboard Control

Click “close” or press Esc

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

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.

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

Faithful and Predictable Ports:Faithful and Predictable Ports:

DrawbacksDrawbacks

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

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

WAI ARIAWAI ARIA

W3C: “Accessible DHTML”

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

Rich Interfaces Require

Sophisticated Definitions

Rich Interfaces Require

Sophisticated Definitions

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

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

“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

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

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

ml

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

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

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

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

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

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

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

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

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

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/

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

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

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

““ARIA”ARIA”

Example: XHTMLExample: XHTML

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

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

““ARIA”ARIA”

Example: HTML 4Example: HTML 4

<script type="text/javascript" src="enable.js"></script>

<span id="slider" class=“foo bar slider valuemin-0 valuemax-50 valuenow-33" tabindex="0" >

</span>

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

ARIA BenefitsARIA Benefits

Uses well-understood, powerful desktop API

Map controls, events, roles & states directly

Standard and predictable Progressive Enhancement

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

ARIA DrawbacksARIA Drawbacks

Requires recent-versions of AT

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

XHTML required for full power

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

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

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

Binary Browser SupportBinary Browser Support

Do I need to support ___ on this project?

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

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

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

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

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

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

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

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

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%)

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

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

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

ok

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

Final ThoughtsFinal Thoughts

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

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

Thank you.Thank you.

[email protected]

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/

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

We’re hiring!(Josie Arguada: [email protected])

[email protected]://nate.koechley.com/talks

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

Questions?Questions?

[email protected]://nate.koechley.com/talks

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

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

[email protected]://nate.koechley.com/talks