Yahoo! Experiences with Accessibility in DHTML and RIA Web Builder 2.0 Las Vegas Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform.
Download ReportTranscript Yahoo! Experiences with Accessibility in DHTML and RIA Web Builder 2.0 Las Vegas Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform.
Yahoo! Experiences with Accessibility in DHTML and RIA Web Builder 2.0 Las Vegas 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
http://developer.yahoo.com/yui
Browser vs. Desktop
Web 1.0 vs. Web 2.0
Sure, but how?
Study the History of the Desktop
Adapted from Alan Cooper’s “About Face 2.0” Book
Tree Control AutoComplete Calendar Control Logger Control Slider Menu Control DHTML Windowing Animation Drag & Drop Connection Manager (Ajax) Event Utility Dom Collection CSS Reset, Fonts, Grids
Some Definitions
Definitions: DHTML / Ajax
It’s NOT a specific technology
Definitions: DHTML / Ajax
It’s NOT a specific technology It’s NOT inherently inaccessible
Rich Internet Applications (RIAs) are:
Features and functionality of desktop apps online Built with Flash, JavaScript, Java, etc…
Accessibility is
“Degree to which a system is usable without modification”
( wikipedia )
Availability
Availability
Availability
How is “Richness” made accessible on the desktop?
Accessibility on the Desktop OS
API
AT
Result: Nearly ubiquitous accessibility.
If it works on the desktop, what’s the problem on the Web?
The 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 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 Techniques
Don’t make it worse Provide options Using existing conventions Move in the right direction Support emerging a11y tech
Four Techniques – Use Them All
1.
2.
3.
4.
Standards-based Development Redundant Interfaces Predictable Ports W3C’s WAI ARIA (aka “Accessible DHTML”)
Standards-Based Development
don’t miss the opportunity
“Getting It Right The Second Time”
– matt sweeney
“Getting it Right the Second Time”
1.
2.
3.
4.
Use technology as designed
H1, LI, P
Don’t corrupt layers of the stack Bad:
class=“red-button”
Bad:
href=“#” and href=“javascript:”
Create platforms and Evolvability Encapsulation, Flexibility, Mashups, Services, Portability
Preserve opportunity & availability
Approach 1: Standards-Based Development
Build a strong foundation
Progressive enhancement
Unobtrusive enhancement
Don’t pollute
Best chance to be generous.
Standards-Based Development Example: Y!News Tab Panel
Example: Tab-Panel box: complete
Standards-Based Development Example: Y!News Tab Panel
Without CSS
Standards-Based Development Example: Y!News Tab Panel
Without JavaScript
Standards-Based Development Example: 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 Development Ex: Y!Photos Ratings & Tags http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/photos-nocss.avi
Standards-Based Development Example: Y!Games http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/games-nav.avi
Standards-Based Development Example: Y! Home Page http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/da11y-fp-searchtabs.avi
Standards-Based Development Benefits
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 Development Drawbacks
Doesn’t solve every problem Perceived overhead Unobtrusive JavaScript and Hijax are still less familiar techniques
Redundant Interfaces
offer flexible interaction
Approach 2: Redundant Interfaces
GUI and Direct and configuration-based Static entry and AutoComplete Tab and character input Arrow Keys
Approach 2: Redundant Interfaces
Keyboard and Esc. and Cancel Drag-drop and multi-page Ajax and HTTP mouse
Redundant Interfaces Example: 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 Interfaces Example: 2D Slider
http://developer.yahoo.com/yui/examples/slider/rgb2.html
Redundant Interfaces Example: Date Selector
http://developer.yahoo.com/yui/examples/calendar/intl_japan/
Redundant Interfaces Example: YUI Menu from Markup
http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html
Redundant Interfaces Example: YUI Panel 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 without JS and or with Keyboard with Mouse CSS CSS
Redundant Interfaces Example: Yahoo! Homepage http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/frontpage-nojs.avi
Redundant Interfaces Ex: Drag-n-Drop vs. Edit Flow http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/my-change-layout.avi
Redundant Interfaces Benefits
Better for everybody –Let users choose –Keyboard is important for
ALL
users Works today
Redundant Interfaces Drawbacks
Insufficient communication Not “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
Support wholesale transfer of skills –Learnability –Discoverability Capture this moment in time –Completeness is critical
Faithful and Predictable Ports: Example: Full Selection Model http://nate.koechley.com/talks/2006/12/webbuilder/ria_accessibility/photos-selection.avi
Faithful and Predictable Ports: Example: Full Keyboard Control
Faithful and Predictable Ports: Example: 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: Example: Full Keyboard Control
Click “close” or press Esc
Faithful and Predictable Ports: Benefits
If we match users expectations, there’s a quantum leap in discoverability, comfort, and expectations for free.
Faithful and Predictable Ports: Drawbacks
Isn’t always trivial
–(but it’s build into YUI)
WAI ARIA
W3C: “Accessible DHTML”
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: ARIA
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
What’s the Virtual Buffer?
The 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 Overview http://www.w3.org/WAI/PF/roadmap/
Role Taxonomy http://www.w3.org/TR/aria-role/
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
checked iconed disabled readonly multiselectable
domactive
zoom expanded selected pressed important required haseffect
valueNew valueMax valueMin States and Adaptable Properties Module http://www.w3.org/WAI/PF/adaptable
step invalid
describedby
labeledby hasparent haschild haspopup alternatestyle tabindex flowto flowfrom controls
controlledby
subpageof
“ARIA” Example: XHTML
xmlns: wairole ="/w3.org/2005/01/wai rdf/GUIRoleTaxonomy#" xmlns: waistate =“/w3.org/2005/07/aaa"
>
“ARIA” Example: HTML 4
slider valuemin-0 valuemax-50 valuenow-33 " tabindex="0" >
ARIA Benefits
Uses well-understood, powerful desktop API Map controls, events, roles & states
directly
Standard and predictable Progressive Enhancement
ARIA 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 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 Support
Do I need to support ___ on this project?
Graded Browser Support: 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: 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: General Best Practice
Three Grades of Browser Support
C-grade A-grade X-grade support (core support, 2%) support (advanced support, 96%) support (the X-Factor, 2%)
http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html
ok
Final Thoughts
It’s a win-win opportunity, and we’ll get there fastest together.
Thank you.
http://nate.koechley.com/talks
http://developer.yahoo.com/yui http://yuiblog.com
http://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]
)
http://nate.koechley.com/talks
Questions?
http://nate.koechley.com/talks
I don’t know.
http://nate.koechley.com/talks