Upload
sharlene-freeman
View
217
Download
0
Embed Size (px)
Citation preview
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
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 = 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?
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
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
Standards-Based DevelopmentStandards-Based Development
Example: Y!News Tab PanelExample: Y!News Tab Panel
Without CSS
Standards-Based DevelopmentStandards-Based Development
Example: Y!News Tab PanelExample: Y!News Tab Panel
Without JavaScript
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
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
Standards-Based DevelopmentStandards-Based Development
Example: Y!Games Example: Y!Games
http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/games-nav.avi
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
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)
Standards-Based DevelopmentStandards-Based Development
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
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
Redundant InterfacesRedundant Interfaces
Example: 2D SliderExample: 2D Slider
http://developer.yahoo.com/yui/examples/slider/rgb2.html
Redundant InterfacesRedundant Interfaces
Example: Date SelectorExample: Date Selector
http://developer.yahoo.com/yui/examples/calendar/intl_japan/
http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html
Redundant InterfacesRedundant Interfaces
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
Redundant InterfacesRedundant Interfaces
Example: YUI Panel from MarkupExample: YUI Panel from Markup
http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/frontpage-nojs.avi
Redundant InterfacesRedundant Interfaces
Example: Yahoo! HomepageExample: Yahoo! Homepage
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
Redundant InterfacesRedundant Interfaces
BenefitsBenefits
Better for everybody–Let users choose
–Keyboard is important for ALL users
Works today
Redundant InterfacesRedundant Interfaces
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
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
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 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
ml
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
<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>
““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>
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
ok
Final ThoughtsFinal Thoughts
It’s a win-win opportunity, and we’ll get there fastest together.
Thank you.Thank you.
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: [email protected])
[email protected]://nate.koechley.com/talks
Questions?Questions?
[email protected]://nate.koechley.com/talks
I don’t know.I don’t know.
[email protected]://nate.koechley.com/talks