IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications | May 2005 © 2005 IBM Corporation Confidentiality/date.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Web 2.0 Accessibility Section 508 Coordinators Training Conference Rich Schwerdtfeger DE, SWG Accessibility Strategy and Architecture Chair: W3C WAI-ARIA.
Antranig Basman, CARET, University of Cambridge Aaron Zeckoski, CARET, University of Cambridge Josh Ryan, Arizona State University Colin Clark, Adaptive.
® IBM Software Group © 2007 IBM Corporation Accessible Rich Internet Applications and Online Services Rich Schwerdtfeger IBM Distinguished Engineer, Chair.
© 2007 IBM Corporation IBM Emerging Technologies Enabling an Accessible Web 2.0 Becky Gibson Web Accessibility Architect.
® IBM Software Group © 2006 IBM Corporation W3C Roadmap for ARIA … and beyond Rich Schwerdtfeger IBM Distinguished Engineer, Chair W3C WAI PF ARIA Subteam.
Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation.
Scripted, Tab Accessible Tree Control Hierarchical view of data via tree control. Keyboard Navigation from initially closed tree to view above with focus.
An Introduction to WAI-ARIA Dan Jackson Web Team Leader City University London.
© 2008 IBM Corporation Emerging Internet Technologies Real World Accessibility with ARIA Becky Gibson Web Accessibility Architect.
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
PSeries Advanced Technical Support © 2002 IBM Corporation Presentation subtitle: 20pt Arial Regular, teal R045 | G182 | B179 Recommended maximum length:
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
IBM Retail Store Solutions November 2003 Presentation subtitle: 20pt Arial Regular, teal R045 | G182 | B179 Recommended maximum length: 2 lines Confidentiality/date.
Active Technologies - HRL Active Technologies | 14/04/03 Presentation subtitle: 20pt Arial Regular, teal R045 | G182 | B179 Recommended maximum length:
Presentation subtitle: 20pt Arial Regular, teal R045 | G182 | B179 Recommended maximum length: 2 lines Confidentiality/date line: 13pt Arial Regular, white.
IBM Software Group © 2006 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical.
COMP 143 Web Development with Adobe Dreamweaver CC.
IBM Software Group © 2003 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical.
Organization for the Advancement of Structured Information Standards OASIS | March 04, 2003 Presentation subtitle: 20pt Arial Regular, teal R045 | G182.
IBM CONFIDENTIAL | PREPARED BY IBM ATTORNEY Presentation subtitle: 20pt Arial Regular, teal R045 | G182 | B179 Recommended maximum length: 2 lines Confidentiality/date.
IBM Research © 2008 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes,
DHTML.
DREAMWEAVER MX 2004 Chapter 3 Working with Tables
Presentation transcript:

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications | May 2005 © 2005 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Disclaimer information may also be appear in this area. Place flush left, aligned at bottom, 8-10pt Arial Regular, white IBM logo must not be moved, added to, or altered in any way. Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements Presentation title: 28pt Arial Regular, black Recommended maximum length: 2 lines Group name: 17pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Template release: Oct 02 For the latest, go to For client presentations, client’s logo may go in this area W3C WAI use of collaborative road mapping to solve access to script enabled Web applications Rich Schwerdtfeger Distinguished Engineer, IBM Emerging Technologies SWG Accessibility Strategy/Architecture

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 2 The e-Gov predicament  Conduct G2C business with Web techniques on par with the best commercial sites  Set bar high by exemplary accessibility

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 3 The Roadmap Promise  Competitive look/feel in Web Application widgets –Feel like an installed GUI Application  Full-function operation through AT –Software communicates via platform access API

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 4 Why you need it?  Competitive look/feel should work like platform GUI  That kind of interaction in Web pages requires scripting  Scripting breaks communication with AT through APIs (unless…)

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 5 Authoring Tool Accessibility Guidelines User Agent Accessibility Guidelines (User Agents/Browsers) Web Content Accessibility Guidelines WAI Protocols and Formats Working group (Architecture/Strategy) HTML Working Group Lack of common Strategy / Understanding = “Accessibility Divide” The “Accessibility Divide”

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 6 Authoring Tool Accessibility Guidelines User Agent Accessibility Guidelines (User Agents/Browsers) Web Content Accessibility Guidelines WAI Protocols and Formats Working group (Architecture/Strategy) HTML Working Group “Accessibility Divide” The “Accessibility Divide” Collaboration to the Rescue!

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 7 Effective Roadmap  Comprehensive Problem/Gap analysis  Identify existing/evolving standards dependencies to fill gaps  Identify plans/technologies to fill remaining gaps  Identify industry dependencies  Share roadmap across working groups  Execute through cross-pollination and teaming  Collaborate on refinement Collaboration Process

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 8 Accessibility API defines a standard contract between an application component and an assistive technology What Works? Example JFC (Swing) Object Assistive Technology Assistive Technology Role States Actions Caret Selection Text Hypertext Value Name Description Children Changes Relations ACCESSIBLEACCESSIBLE JFC Component Data UI

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 9 In any object-based accessibility architecture, Assistive Technologies (AT)'s communicate with all objects to render an accessible view Assistive Technology Text Button Menu Item Frame Accessible JFC (Swing) Components Accessible objects expanded to the application

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 10 Problem Analysis AT *Role *States *Actions Caret Selection Text Hypertext *Value Name Description Children *Changes *Relations CONTRACTCONTRACT Document Element Data UI Roadmap – Dynamic Web Application Accessibility JavaScript is the controller - Manipulates the data (DOM) - Manipulates the content - Manipulates the style (UI) - Event driven - Produces Custom Widgets Browser map to DOM/Accessibility API  HTML Accessibility of HTML depends on standard use of tags to support accessibility (mixing content and presentation)  JavaScript creates custom widgets using HTML, user input, and CSS changing their meaning and purpose within a Web application  HTML lacks the accessibility meta data to support platform accessibility APIs for repurposed HTML content  Keyboard usability by persons with disabilities is poor –Non anchors/form elements can’t receive focus (W3C HTML browser implementation oversight) –Users needs keyboard navigation and widget behavior like a GUI –User needs consistent navigation landmark semantics to reduce usability problem

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 11 Repurposed HTML lacks semantics and ability to give focus example: menu wanna be on msnbc Accessibility Problems  Can’t get here effectively with the keyboard  Don’t know a menu has been activated  Usability poor as does not behave like a menu  Usability Problem extends beyond accessibility  Alternative content is expensive The “Dynamic Web Application Accessibility Problem”

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 12 Information as seen by Assistive Technology today (if the user could get to Top Stories) “The Contract” AT Access to Accessible Application Role (what it is) May throw this away State NameNon - deterministic Actions Parent

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 13 Dependence on excessive tabbing makes keyboard access unusable Accessibility/Usability Problems  Portal keyboard usability a problem –To get to Market report you need to tab through every link on the page –Alternatives are a hack to code sections as headers restricting UI or assign access keys  Alternative is inconsistent across web sites  Alternative provides little semantic information  Use of keyboard short cut (Access Key) introduces device dependencies Document Navigation Problem

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 14 Identify and Fill gaps through collaboration  Gaps filled by collaboration across W3C working groups –Requires XHTML 1.X (Extensibility through use of XML namespaces) –Borrow role attributes and role landmarks from XHTML 2 –Role landmarks (navigation, search, main, secondary, note, seealso, contentinfo, search banner) –New WAI accessibility meta data (Role and State) taxonomies for use in markup –Role (button, listbox, calendar, etc.) –State (checked, expandable, selected)  Work with User Agents (Industry) make work with ATs –Map new meta data to Accessibility API –Implement (TABINDEX=-1) to support focus to non-anchor and form alements   Collaboration on accessibility producing broad industry curb cuts –SVG accessibility –Device Independence (Content adaptation for devices)

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 15 New Information as seen by Assistive Technology “The Contract” AT Access to Accessible Application New accessibility Information RoleMenu Item StateSelected NameTop Stories ActionsNone ParentMenu

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 16 Summary: Paradigm Shift – Making HTML act like a GUI  Keyboard navigation is easier like a GUI  Screen reader use rich metadata to read like a GUI application  Content is browser independent  Facilitates accessible browser embedding  Ahead XForms and XHTML2 – Easier to develop accessible DHTML

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 17 New Navigation Shortcuts to facilitate Portal Navigation Web Usability Boost  Increases usability of Navigation  Browser can map same keys for all sites  Removes Device dependencies  Reduces authoring time  Facilitates Device transcoding Web Site: University of Illinois, Urbana-Champaign

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications | May 2005 © 2005 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Disclaimer information may also be appear in this area. Place flush left, aligned at bottom, 8-10pt Arial Regular, white IBM logo must not be moved, added to, or altered in any way. Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements Presentation title: 28pt Arial Regular, black Recommended maximum length: 2 lines Group name: 17pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Template release: Oct 02 For the latest, go to For client presentations, client’s logo may go in this area DHTML Demo – Menu and Spreadsheet

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications | May 2005 © 2005 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Disclaimer information may also be appear in this area. Place flush left, aligned at bottom, 8-10pt Arial Regular, white IBM logo must not be moved, added to, or altered in any way. Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements Presentation title: 28pt Arial Regular, black Recommended maximum length: 2 lines Group name: 17pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Template release: Oct 02 For the latest, go to For client presentations, client’s logo may go in this area Backup

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 20 Solving the problem  Leading W3C Accessibility Standards to fix –Requires XHTML 1.X –Incorporates new accessibility meta data (Role and State) –Role GUI meta data (calendar, button, list box, menu, etc.) –State GUI meta data (checked, required, expanded, collapsed, required, etc.) –New meta data model assists tooling and browser support through use of taxonomies –New meta data model assists device content adaptation –Makes use of best practice change of using HTML TABINDEX attribute to assign focus to all visible elements (IE 6, Firefox 1.1)  Implemented in Firefox 1.1 (for standard Windows/Gnome GUI widgets) –Firefox maps the meta data to the platform-specific accessibility API –Result – Browser acts like a GUI  Custom Widgets capability after Firefox 1.1 –New W3C Accessibility Taxonomies for role and state

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 21 In process  Complete W3C standards work in –Role and State Taxonomies (Partnership with Unbounded Access) –WCAG 2.0 (high risk ) –Can begin implementations now  In process (browsers, AT vendor, componentry) –Browser –Firefox complete in 2005 (1.1. Role/States mappings hard coded) –Working to get into IE 7, Safari –Opera (planning) –AT Vendors –GW Micro Window-Eyes support (screen reader) –AI Squared ZoomText (screen magnifier ) –IBM Componentry –JSL Boston Crème Project –Target JWL as the widget library –Consortium - Reusable Components/ Style Guide - Industry (AOL, SAP, potentially Yahoo)  Educate Industry on DHTML Accessibility

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 22 Accessibility API defines a standard contract between an application component and an assistive technology How does it work? Example JFC (Swing) Object Assistive Technology Assistive Technology Role States Actions Caret Selection Text Hypertext Value Name Description Children Changes Relations ACCESSIBLEACCESSIBLE JFC Component Data UI

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 23 In any object-based accessibility architecture, Assistive Technologies (AT)'s communicate with all objects to render an accessible view Assistive Technology Text Button Menu Item Frame Accessible JFC (Swing) Components Accessible objects expanded to the application

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 24 Required ComponentsWhat’s available today? Ability to set the focus with ScriptLimited to Form elements and anchors Event: Notification Activation, Caret Change, Selection, MutationUser Agent (browser) Other Event Notification - Accessibility API State, Value ChangeLimited to Forms Enumerate and Accessible ActionsLimited to tag device dependent functionality (onmouseover,etc.) State Information:Limited to Form elements and anchors Role Information:Limited to standard HTML tag names. (Mix Content/presentation) Relationships: Parent/childLimited to DOM (Mix Content/presentation) Relationships: (Label, Group, ControllerFor)Limited to HTML (Title, alt, label) Content selectionUser Agent Text, Font/Font Style InformationCore DOM/ User Agent Description/HelpHTML Alt Text, title text Respond Desktop Font/Color Changespartial (conflicts with CSS and JavaScript) Keyboard Navigation/Access (UAAG Compliant)User Agents, Access Keys (HTML) Accessibility API MappingDependent on available information Gap Analysis

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications | May 2005 © 2005 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Disclaimer information may also be appear in this area. Place flush left, aligned at bottom, 8-10pt Arial Regular, white IBM logo must not be moved, added to, or altered in any way. Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements Presentation title: 28pt Arial Regular, black Recommended maximum length: 2 lines Group name: 17pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Template release: Oct 02 For the latest, go to For client presentations, client’s logo may go in this area Fixing the Problem with Today’s XHTML, HTML

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 26 Setting Focus – IE tabindex a best practice Fixing the focus problem tabindex attribute Focusable with mouse or JavaScript via element.focus() Tab navigable not present Follows default behavior of element (yes for form controls, links, etc.) Follows default behavior of element <0Yes No, author must focus it with element.focus() as a result of arrow or other key press 0YesIn tab order relative to element's position in document >0Yes Tabindex value manually changes where this element is positioned in the tab order. These elements will be positioned in the tab order before elements that have tabindex="0" or that are naturally in the tab order.

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 27 Setting the Role attribute  Role is not part of XHTML 1.X  Make use of namespaces to borrow the role attribute from XHTML 2  Borrow the role values from a new WAI GUI role taxonomy –Taxonomy is like a class library but written in RDF –Defines class hierarchy and common widgets found in a GUI –E.g. : (button, list, tree, table, calendar, layout, application) –Roles include common roles mappable to MSAA, ATK –Taxonomy defines how accessibility information is processed by the browser to support the accessibility API for each Widget  A web site may define their own custom roles through a new namespace  User Agent (Browser) maps the role to the Accessibility API for the AT  Role attributes can be acquired from the DOM  Important: Same markup may be applied to other markup like SVG * RDF – Resource Descriptor Framework Role Attribute

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 28 Standard Roles for document landmarks – Borrow from XHTML 2  main This defines the main content of a document.  secondary This is any unique section of the document. In the case of a portal, this may include but not be limited to: show times; current weather; or stocks to watch.  navigation This is the navigation bar on a web document. This is typically a list of links to other pages on the site or other areas of the same document.  banner A banner is usually defined as the advertisement at the top of a web page. The banner content typically contains the site or company logo and other key advertisements for the site.  contentinfo This is information about the content on the page. For example, footnotes, copyrights, links to privacy statements, etc. would belong here.  note The content is parenthetic or ancillary to the main content of the resource.  seealso Indicates that the element contains content that is related to the main content of the page.  search This is the search section of a web document. This is typically a form used to submit search requests about the site or is a more general Internet wide search service.

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 29 Setting the state attribute State Attribute  States are not part of XHTML 1.X (except as declared in form declared properties)  Make use of namespaces to borrow the state attribute from the WAI state taxonomy –Taxonomy Defines class hierarchy of common states supporting a GUI –E.g. : (checked, expanded, collapsed, disabled) –States include common states mappable to MSAA, ATK –Taxonomy defines which objects can use which states and which are managed by the User Agent  User Agent maps the states to the Accessibility API for the AT  User Agent fires a state change event for those that change  AT vendors can acquire the state attributes from the DOM API

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 30 Using Roles/States and Namespaces with Styles <html lang="en" xml:lang="en" xmlns=" xmlns:x2=" xmlns:wairole=" waistate url(" td[waistate|disabled="true"] { color:#666666; } ……… $2.35 ………..

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 31 Role/State Taxonomy Example

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 32 Sample Role Taxonomy

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 33 In process  Complete W3C standards work in 2005 –Role and State Taxonomies (Partnership with Unbounded Access) –WCAG 2.0 (high risk ) –Can begin implementations now  In process (browsers, AT vendor, componentry) –Browser –Firefox complete in 2005 (1.1. Role/States mappings hard coded) –Working to get into IE 7 (Rich met with MS ATG Director, waiting on IE team) –Opera, Apple/Safari (planning) –AT Vendors –GW Micro Window-Eyes support (screen reader) –AI Squared ZoomText (screen magnifier ) –IBM Componentry –JSL Boston Crème Project (Brendan Murray) –Productivity Editors (Maggie Litton, Chuck Jaynes, Michael Wasmund) –Consortium - Reusable Components/ Style Guide - Industry (AOL, SAP, potentially Yahoo) –Education and Roadmaps (Portal, LWP, DWL)  Educate Government/Industry on DHTML Accessibility

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 34 Backup

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications | May 2005 © 2005 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Disclaimer information may also be appear in this area. Place flush left, aligned at bottom, 8-10pt Arial Regular, white IBM logo must not be moved, added to, or altered in any way. Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements Presentation title: 28pt Arial Regular, black Recommended maximum length: 2 lines Group name: 17pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Template release: Oct 02 For the latest, go to For client presentations, client’s logo may go in this area Implementation Techniques

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 36 Using States and Namespaces with JavaScript <html lang="en" xml:lang="en" xmlns=" xmlns:x2=" xmlns:wairole=" xmlns:waistate=" //<![CDATA[ if (theElem.getAttributeNS(" "disabled") !="true") { ; // do something } $

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 37 Working with Keyboard Events  May need both onclick and onkeydown event –Handle mouse and keyboard for items with tabindex –Save POR information so mouse and keyboard can interact  For best browser compatibility use onkeydown –Now cancelable in both IE and Firefox –onkeypress is only alphanumeric keys (no arrows) in IE  Stop propagation of handled keyboard events –Return value from onkeydown indicates whether to cancel event or not –bEventContinue = false; // event was handled - cancel –bEventContinue = true; // event not handled – do NOT cancel  Don’t capture all keyboard events –Allow appropriate browser key combinations through  Place the event at the highest level object possible –Avoids requiring an event handler on each navigable element

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 38 JavaScript Implications  Use setTimeout to set the item with focus –setTimeout("gFocusItem.focus();",0) to ensure focus is set after return from keyboard handler –Do not post event to set focus. Focus events are only for notification  Use event handler to change focus styling –IE does not support :focus style selectors on all objects  Draw the focus for elements when you set the focus programmatically (tabindex < 0) –Use border styling to show focus and selection in addition to color  Use try/catch to trap errors –New tabindex feature not yet part of Opera, Safari, Firefox 1.0

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications | May 2005 © 2005 IBM Corporation Confidentiality/date line: 13pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Disclaimer information may also be appear in this area. Place flush left, aligned at bottom, 8-10pt Arial Regular, white IBM logo must not be moved, added to, or altered in any way. Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements Presentation title: 28pt Arial Regular, black Recommended maximum length: 2 lines Group name: 17pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Template release: Oct 02 For the latest, go to For client presentations, client’s logo may go in this area Ahead: XForms and XHTML2 Accessibility Features

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 40 XForms Accessibility  Focus on declarative (means “built in” rather than “bolted on”)  Less JavaScript required –Built in Notification (includes state changes): (Activate, value change, select, deselect, scroll first, scroll last, insert, delete, valid, invalid, DOMFocusIn, DOMFocusOut, ReadOnly, ReadWrite, enabled, disabled, required, optional, in-range, out-of-range, submit-done, submit-error) –Built in Interaction events: (next, previous, focus, help, hint, refresh, revalidate, recalculate, rebuild, reset, submit)  MVC architecture separates data in model from presentation  Relationships (label, group)  Help – help text for UI controls  Hint – tooltip for the user interface control  Device Independence (DOMFocusIn, DOMFocusOut, DOMActivate)  Use of XML Events – in future will add descriptions for handlers

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 41 XHTML 2 Access Features  Role attribute (no namespace required)  Standard roles for common document landmarks  Access Key replacement for improved access  XForms  nextFocus – replace TABINDEX (device independent)  Easier to support DHTML accessibility  XML Events – Descriptions for Event Handlers

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 42 XHTML 2 – Replace Access Key  New Access Key tag  Uses title for description  Device Independent –Browser assigns keys –Optional Keyboard shortcut  Style-able  Optional Role based navigation  Optional Target Id for navigation  Options to select the event fired (activate, provide focus, etc.)

IBM Software Group WAI use of collaborative road mapping to solve access to script enabled Web applications May 2005 © 2005 IBM Corporation IBM logo must not be moved, added to, or altered in any way. Background should not be modified. Title/subtitle/confidentiality line: 10pt Arial Regular, white Maximum length: 1 line Information separated by vertical strokes, with two spaces on either side Slide heading: 28pt Arial Regular, blue R120 | G137 | B251 Maximum length: 2 lines Slide body: 18pt Arial Regular, black Square bullet color: teal R045 | G182 | B179 Recommended maximum text length: 5 principal points Group name: 14pt Arial Regular, white Maximum length: 1 line Copyright: 10pt Arial Regular, white Optional slide number: 10pt Arial Bold, white Template release: Oct 02 For the latest, go to Indications in green = Live content Indications in white = Edit in master Indications in blue = Locked elements Indications in black = Optional elements 43 Tooling must redirect focus from fixer/checkers to authoring tools  Reusable Accessible Web Components –Widgets must be tested with AT solutions  Prompting for variable accessibility information  Tooling must accommodate functional test with AT solutions