1、,Taming Web 2.0 Accessibility Using the Dojo Open Source Toolkit,Becky Gibson Web Accessibility Architect,2,Web 2.0 Accessibility Concerns Solving Web 2.0 Issues Accessible Rich Internet Applications (ARIA) Dojo JavaScript Open Source Toolkit How Dojo Addresses Accessibility Demos,Agenda,3,Web 2.0 A
2、ccessibility Concerns,Rich Interface controls Reliance on Mouse Lack of Semantics Incremental Updates via Ajax Changes in focus Excessive Navigation via Tab key Content aggregation from various resources (Mashups) Multimedia Lack of captioning Interaction issues Paradigm Shift,4,Solving Web 2.0 Acce
3、ssibility Issues,Provide Accommodations for Vision Hearing Cognitive Semantics & identification Navigation & keyboard support,5,Accessible Rich Internet Applications to the Rescue!,6,Accessible Rich Internet Applications (ARIA),Addresses Web 2.0 Accessibility Issues Developed at IBM and donated to W
4、3C Web Accessibility Initiative (WAI) Protocols & Formats Group Nearing last call draft Implemented in Firefox browser Being implemented in Opera 9.5 Support just announced for IE 8 Supported by Window-Eyes & JAWS screen readers Used by IBM, Dojo, AOL, Yahoo, Google, SAP, .,7,ARIA Details,Add role s
5、emantics to scripted user interface (UI) elements Update state information dynamically Make items focusable via tabindex attribute Add keyboard event handling Mimic the keyboard behavior of the rich client UI Minimize tab key navigation Add live region information and notification* to support Ajax,*
6、Live region support coming in Firefox 3,8,ARIA Example - Tree,Role = tree (on outer container),Role = treeitem expanded=true (on open Africa node),Role = treeitem selected=true (on highlighted Egypt child node with no children),Role = treeitem expanded=false (on closed Australia node),9,ARIA Live Re
7、gions,Perceivable sections are identified with region role Live indicates region is updated Values of: Off, Polite, Assertive, Rude Atomic identifies the extent of updates True entire region is updated and relevant False only changed element needs to be presented to user Controls identifies the elem
8、ent which triggers an update,10,ARIA Examples - Live Region,Editing auto save notification live=polite; atomic=true; Server maintenance notification Live=assertive; atomic=true; New mail - speak new entries Live=polite; atomic=false;,11,12,Keyboard Support,Implement focus handling via tabindex attri
9、bute Add key event handlers to implement navigation Use tab key to navigate between components Arrow and other key navigation within a component Keep keyboard and mouse interaction in-sync Set focus to elements, do NOT simulate focus via CSS DHTML Style Guide group is defining widget behaviors,13,Do
10、jo - Open Source JavaScript Toolkit,“Easy” Ajax Data Binding Full event system Browser abstraction layer User Interface Widgets Dual Licensed Academic Free License v2.1 BSD License Dojo 1.0 available in November, 2007 Dojo 1.1 shipping in March, 2008,14,Core Widget Set (dijit),Accessible Internation
11、alized Customizable Look and Feel Developer Documentation API User Manual Supported Browsers Firefox 2.0, Firefox 3 in progress IE 6+ Safari 3 Data Binding Tree, Grid*, Select,*Grid is in dojox (dojo extensions),15,Dojo Core Widgets,Form Widgets Layout Widgets Advanced Widgets,16,Form Widgets,Button
12、, Dropdown Button, Combo Button Checkbox, Radio ComboBox, Filtering Select Textbox Currency & Integer Validation Textboxes Resizable Textarea Slider Integer Spinner Inline Editbox Dropdown Calendar,17,Layout Widgets,Accordion Container Content Pane Dialog Border Container Page Container Split Contai
13、ner Tab Container Title Pane,18,Advanced Widgets,Color Palette Context Menu Rich Text Editor Progress Bar Toolbar Tooltip, Tooltip Dialog Tree,19,Dojo 1.0.2/1.1 Core Widget Accessibility,ARIA Specification Implemented Fully keyboard accessible in Firefox and Internet Explorer Screen reader accessibl
14、e in Firefox Work in Operating System High Contrast mode Work with images off No accessible support for Drag and Drop (yet) Drag and drop functionality must be duplicated via alternate mechanism,20,Keyboard Support in Dojo,Extended tabindex (IE, FF, Opera 9.5, HTML5) Keyboard event normalization Key
15、board navigation widget mixin Functions for finding elements in the tab order,21,High Contrast Detection & Support,Detect high contrast mode Detect images off mode (FF only) dijit_a11y class to trigger styles Provide text alternatives for CSS Background images No hard coded font sizes,22,Dojo Demo (
16、pre-recorded demos at http:/ is More than the Sum of Parts,Implement overall application navigation Add ContentPanes into the tab order as necessary Check for accessibility attributes optionsTitle on ComboButton Create content in appropriate source code order,24,Incorrect Example - BorderLayout,top
17、barbottom barmain content,INCORRECT source code order, bottom region should be below main content!,25,Rendered BorderLayout,top,bottom,Main content,Correct tab order is top, main content, bottom. Code from previous page would create the incorrect reading order of top, bottom, main content.,26,Correc
18、t BorderLayout Source Code Order,top barmain contentbottom bar,27,Additional Web 2.0 Accessibility Challenges,ARIA spec not yet a standard planned for 2008 No ARIA support in Internet Explorer - Coming in IE8! No tabindex support in Safari (yet) thus no keyboard support Assistive Technology support
19、needs to evolve Issues with virtual browsing and interactive mode in screen readers Additional support for live regions,“The journey of a thousand miles starts with a single step. “,28,Summary - Web 2.0 CAN be Tamed!,Web is dynamic and constantly evolving Accessibility of Web 2.0 is possible through
20、 Best practices and thoughtful design Updated Technologies such a ARIA Accessibility integrated into toolkits such as Dojo Embracing of Accessibility technologies by key Web players,29,Resources,Beckys Accessibility Presentations and Papers http:/ ARIA Roadmap, Best Practices, Primer, Specifications
21、 http:/www.w3.org/wai/pf Mozilla Developer Center - Firefox ARIA Information http:/developer.mozilla.org/en/docs/Accessible_DHTML Mailing list for ARIA issues http:/lists.w3.org/Archives/Public/wai-xtech/ Dojo Home - http:/www.dojotoolkit.org/ Book - http:/www.dojotoolkit.org/book/dojo-book-1-0 Accessibility Sections of Dojo Book A11y info included on each dijit page http:/www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit-0 Creating Accessible Widgets Testing Accessible Widgets DHTML Style Guide Draft http:/
