Page 1
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
Browser vs. DesktopBrowser vs. Desktop
Page 3
Web 1.0 vs. Web 2.0Web 1.0 vs. Web 2.0
Page 4
Sure, but how?Sure, but how?
Page 5
Study the History of the DesktopStudy the History of the Desktop
Adapted from Alan Cooper’s “About Face 2.0” Book
Page 6
[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
Some DefinitionsSome Definitions
Page 8
Definitions: DHTML / AjaxDefinitions: DHTML / Ajax
It’s NOT a specific technology
Page 9
Definitions: DHTML / AjaxDefinitions: DHTML / Ajax
It’s NOT a specific technology It’s NOT inherently inaccessible
Page 10
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
“Degree to which a system is usable without modification”
(wikipedia)
Accessibility is
Page 12
Accessibility = AvailabilityAccessibility = AvailabilityAccessibility is Availability
Page 13
Accessibility = AvailabilityAccessibility = AvailabilityAccessibility is Availability
Accessibility is Availability
Page 14
Accessibility = AvailabilityAccessibility = AvailabilityAccessibility is Availability
Accessibility is Availability
Page 15
How is “Richness” made accessible on the
desktop?
How is “Richness” made accessible on the
desktop?
Page 16
Accessibility on the DesktopAccessibility on the Desktop
OS API AT
Result: Nearly ubiquitous accessibility.
Page 17
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
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
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
So how do we move forward?
So how do we move forward?
Page 21
Characteristics of TechniquesCharacteristics of Techniques
Don’t make it worseProvide optionsUsing existing conventionsMove in the right directionSupport emerging a11y tech
Page 22
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
Standards-Based Development
Standards-Based Development
don’t miss the opportunity
Page 25
“Getting It Right The Second Time”
– matt sweeney
Page 26
““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
Approach 1:Approach 1:Standards-Based DevelopmentStandards-Based Development
Build a strong foundationProgressive enhancementUnobtrusive enhancementDon’t pollute
Best chance to be generous.
Page 28
Standards-Based DevelopmentStandards-Based Development
Example: Y!News Tab PanelExample: Y!News Tab Panel
Example: Tab-Panel box: complete
Page 29
Standards-Based DevelopmentStandards-Based Development
Example: Y!News Tab PanelExample: Y!News Tab Panel
Without CSS
Page 30
Standards-Based DevelopmentStandards-Based Development
Example: Y!News Tab PanelExample: Y!News Tab Panel
Without JavaScript
Page 31
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
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
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
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
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
Standards-Based DevelopmentStandards-Based Development
DrawbacksDrawbacks
Doesn’t solve every problem Perceived overhead Unobtrusive JavaScript and Hijax
are still less familiar techniques
Page 37
Redundant InterfacesRedundant Interfaces
offer flexible interaction
Page 38
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
Approach 2:Approach 2:
Redundant Interfaces Redundant Interfaces
Keyboard and mouse Esc. and Cancel Drag-drop and multi-page Ajax and HTTP
Page 40
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
Redundant InterfacesRedundant Interfaces
Example: 2D SliderExample: 2D Slider
http://developer.yahoo.com/yui/examples/slider/rgb2.html
Page 42
Redundant InterfacesRedundant Interfaces
Example: Date SelectorExample: Date Selector
http://developer.yahoo.com/yui/examples/calendar/intl_japan/
Page 43
http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html
Redundant InterfacesRedundant Interfaces
Example: YUI Menu from MarkupExample: YUI Menu from Markup
Page 44
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
http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/frontpage-nojs.avi
Redundant InterfacesRedundant Interfaces
Example: Yahoo! HomepageExample: Yahoo! Homepage
Page 46
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
Redundant InterfacesRedundant Interfaces
BenefitsBenefits
Better for everybody–Let users choose
–Keyboard is important for ALL users
Works today
Page 48
Redundant InterfacesRedundant Interfaces
DrawbacksDrawbacks
Insufficient communication Not “unified” Requires two experiences
•But not 2x effort!
•Can actually benefit development process
Page 49
Faithful and
Predictable Ports
Faithful and
Predictable Portsgive users all of what they expect
Page 50
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
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
Faithful and Predictable Ports:Faithful and Predictable Ports:
Example: Full Keyboard ControlExample: Full Keyboard Control
Page 53
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
Faithful and Predictable Ports:Faithful and Predictable Ports:
Example: Full Keyboard ControlExample: Full Keyboard Control
Click “close” or press Esc
Page 55
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
Faithful and Predictable Ports:Faithful and Predictable Ports:
DrawbacksDrawbacks
Isn’t always trivial –(but it’s build into YUI)
Page 57
WAI ARIAWAI ARIA
W3C: “Accessible DHTML”
Page 58
Rich Interfaces Require
Sophisticated Definitions
Rich Interfaces Require
Sophisticated Definitions
we can’t act on information we don’t have
Page 59
“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
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
What’s the Virtual Buffer?What’s the Virtual Buffer?
Page 62
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
ARIA Architecture OverviewARIA Architecture Overviewhttp://www.w3.org/WAI/PF/roadmap/http://www.w3.org/WAI/PF/roadmap/
Page 64
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
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
““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
““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
ARIA BenefitsARIA Benefits
Uses well-understood, powerful desktop API
Map controls, events, roles & states directly
Standard and predictable Progressive Enhancement
Page 69
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
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
Binary Browser SupportBinary Browser Support
Do I need to support ___ on this project?
Page 72
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
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
http://developer.yahoo.com/yui/articles/gbs/gbs.html
Page 75
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
http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html
Page 78
Final ThoughtsFinal Thoughts
It’s a win-win opportunity, and we’ll get there fastest together.
Page 79
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
We’re hiring!(Josie Arguada: [email protected] )
[email protected] ://nate.koechley.com/talks
Page 81
Questions?Questions?
[email protected] ://nate.koechley.com/talks
Page 82
I don’t know.I don’t know.
[email protected] ://nate.koechley.com/talks