Yahoo Experiences with Accessibility in DHTML and RIA

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 natek@yahoo-inc. 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

The Yahoo! User[idioms] Interface (YUI) Library Tree Control Auto. Complete Tab. View Calendar Control [compounds] Slider Menu Control Logger Control DHTML Windowing Animation Drag & Drop Connection Manager (Ajax) Event Utility Dom Collection CSS Reset, Fonts, Grids

Some Definitions

Definitions: DHTML / Ajax l It’s NOT a specific technology

Definitions: DHTML / Ajax l It’s NOT a specific technology l It’s NOT inherently inaccessible

Rich Internet Applications (RIAs) are: l Features and functionality of desktop apps online l Built with Flash, Java. Script, Java, etc…

Accessibility is “Degree to which a system is usable without modification” (wikipedia)

Accessibility = Availability Accessibility is Availability

Accessibility = Availability Accessibility is Availability

Accessibility = Availability Accessibility is 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 l 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 W 3 C's primary goals is to make these benefits available to all people, whatever their. . . physical or mental ability. “ http: //www. w 3. org/Consortium/Points/

So how do we move forward?

Characteristics of Techniques l Don’t make it worse l Provide options Using existing conventions Move in the right direction Support emerging a 11 y tech l l l

Four Techniques – Use Them All 1. Standards-based Development 2. Redundant Interfaces Predictable Ports W 3 C’s WAI ARIA 3. 4. (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. Use technology as designed H 1, LI, P 2. Don’t corrupt layers of the stack Bad: class=“red-button” Bad: href=“#” and href=“javascript: ” 3. Create platforms and Evolvability Encapsulation, Flexibility, Mashups, Services, Portability 4. Preserve opportunity & availability

Approach 1: Standards-Based Development l Build a strong foundation l Progressive enhancement l Unobtrusive enhancement l Don’t pollute Best chance to be generous.

Standards-Based Development Example: Y!News Tab Panel l Example: Tab-Panel box: complete

Standards-Based Development Example: Y!News Tab Panel l Without CSS

Standards-Based Development Example: Y!News Tab Panel l Without Java. Script

Standards-Based Development Example: Y!News Tab Panel l 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/da 11 y-fp-searchtabs. avi

Standards-Based Development Benefits l 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 l Here to stay (10+ years) l l

Standards-Based Development Drawbacks l l l Doesn’t solve every problem Perceived overhead Unobtrusive Java. Script and Hijax are still less familiar techniques

Redundant Interfaces offer flexible interaction

Approach 2: Redundant Interfaces l l GUI and character input Direct and configuration-based Static entry and Auto. Complete Tab and Arrow Keys

Approach 2: Redundant Interfaces l l Keyboard and mouse Esc. and Cancel Drag-drop and multi-page Ajax and HTTP

Redundant Interfaces Example: 1 D Slider http: //developer. yahoo. com/yui/examples/slider/index. html l l 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: 2 D Slider http: //developer. yahoo. com/yui/examples/slider/rgb 2. 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 l Motion Protection – http: //developer. yahoo. com/yui/examples/container/panelaqua. html Drag and Drop Constrained to Viewport l Technology Protection – http: //yuiblog. com/blog/2006/09/22/yahoo-devday-schedule/ without JS and CSS without JS or CSS with Keyboard with Mouse

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 l Better for everybody – Let users choose – Keyboard is important for ALL users l Works today

Redundant Interfaces Drawbacks l l l Insufficient communication Not “unified” Requires two experiences • But not 2 x 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 l Support wholesale transfer of skills –Learnability –Discoverability l 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 l Click “close” or press Esc

Faithful and Predictable Ports: Benefits l If we match users expectations, there’s a quantum leap in discoverability, comfort, and expectations for free.

Faithful and Predictable Ports: Drawbacks l Isn’t always trivial –(but it’s build into YUI)

WAI ARIA W 3 C: “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. w 3. org/2006/09/aria-pressrelease. html

Approach 4: ARIA l Communicate directly with desktop API l IBM, now in W 3 C and open – http: //www. w 3. org/TR/aria-roadmap/ – http: //www. w 3. org/WAI/PF/adaptable/HTML 4/embedding 20060318. html l 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 l Handles basic script: –click, keypress, mouseover – For these, new content is exposed l Ajax content isn’t natively exposed in reaction to these events For example, doesn’t know onreadystatechange

ARIA Architecture Overview http: //www. w 3. org/WAI/PF/roadmap/

Role Taxonomy http: //www. w 3. org/TR/aria-role/ l Base Roles – Input, textbox, select, range, sectionhead, window l Widget Roles – Link, combobox, option, checkboxtristate, radiogroup, button, menuitemradio, menuitemcheckbox, progressbar, secret, separator, slider, spinbutton, textarea, textfield, treegroup, treeitem, status, alertdialog, dialog l Structural Roles – Presentation, application, document, group, imggroup, directory, region, liveregion, log, gridcell, tabcontainer, tabpanel, tablist, table, td, th, rowheader, columnheader, listitem, menu, toolbar, menuitem, breadcrumbs

States and Adaptable Properties Module http: //www. w 3. org/WAI/PF/adaptable l l l l checked iconed disabled readonly multiselectable domactive zoom expanded selected pressed important required haseffect value. New value. Max value. Min l l l l step invalid describedby labeledby hasparent haschild haspopup alternatestyle tabindex flowto flowfrom controls controlledby subpageof

“ARIA” Example: XHTML <html xmlns: wairole="/w 3. org/2005/01/wairdf/GUIRole. Taxonomy#" xmlns: waistate=“/w 3. org/2005/07/aaa"> <span id="slider" class="myslider" role="wairole: slider" waistate: valuemin="0" waistate: valuemax="50" waistate: valuenow="33"> </span>

“ARIA” Example: 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 Benefits l Uses well-understood, powerful desktop API l Map controls, events, roles & states directly l Standard and predictable Progressive Enhancement

ARIA Drawbacks l Requires recent-versions of AT l Mozilla’s Firefox 1. 5+ only today –But good things happening l XHTML required for full power

We Need Your Help l This is an important development – Thanks are due to IMB/Mozilla/W 3 C Becky Gibson Aaron Leventhal l Our adoption – Multiplies their efforts – Reduces costs for small AT companies

Binary Browser Support l 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. html

Graded Browser Support: General Best Practice Three Grades of Browser Support C-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_browser-chart. html

ok

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

Thank you. natek@yahoo-inc. com 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: jaguada@yahoo-inc. com) natek@yahoo-inc. com http: //nate. koechley. com/talks

Questions? natek@yahoo-inc. com http: //nate. koechley. com/talks

I don’t know. natek@yahoo-inc. com http: //nate. koechley. com/talks