yahoo! experiences with accessibility in dhtml and...
TRANSCRIPT
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 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 = 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 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
StandardsStandards--Based DevelopmentBased DevelopmentExample: Example: Y!NewsY!News Tab PanelTab Panel
Without CSS
StandardsStandards--Based DevelopmentBased DevelopmentExample: Example: Y!NewsY!News Tab PanelTab Panel
Without JavaScript
StandardsStandards--Based DevelopmentBased DevelopmentExample: Example: Y!NewsY!News Tab PanelTab 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
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
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
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
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
<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>
““ARIAARIA””Example: HTML 4Example: HTML 4
<script type="text/javascript" src="enable.js"></script>
<span id="slider" class=“foo bar slidervaluemin-0valuemax-50valuenow-33"tabindex="0" >
</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
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
ok
Final ThoughtsFinal Thoughts
It’s a win-win opportunity, and we’ll get there fastest together.
Thank you.Thank you.
[email protected]://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