1. Functional Accessibility Evaluation of Web 2.0 Applications Testing Jon Gunderson, Ph.D University of Illinois

2. What is Web 2.0 URL does not define content: Login Content updates with out user interaction: Chat Content changes based on user actions: wiki Non-html controls for interacting with page

3. Illinois Web 2.0 Examples University create web services Calendars Surveys Forms Purchased Services Blackboard: Course management tools Xythos: Document sharing via the web Confluence: Wiki Mirapoint: Web e-mail interface

4. Web 2.0 Widgets and Dynamic Content Javascript, HTML and CSS to create user interface controls Keyboard support Roles Tree, slider, menu…. Properties Labels, description, level, …. States Checked, disabled, invalid, ….

5. Best Practices Navigation and Orientation http://html.cita.illinois.edu/nav/ http://html.cita.illinois.edu/nav/ Text Equivalents http://html.cita.illinois.edu/text/ http://html.cita.illinois.edu/text/ Scripting and Automation http://html.cita.illinois.edu/script/ http://html.cita.illinois.edu/script/ Styling http://html.cita.illinois.edu/style/ http://html.cita.illinois.edu/style/ Standards http://html.cita.illinois.edu/standards/ http://html.cita.illinois.edu/standards/

6. Navigation and Orientation Titling Menus Sub Headings Form Labeling Links Data Tables Lists Language Frames

7. Text Equivalents Informative images Charts Tables Pictures Graphs Decorative images Status images

8. Scripting Adding styling effects to hover content Adding Content when loading page Adding/updating content based on user input Client side validation of form fields Widgets

9. Styling Use of CSS Text styling Layout of content Background images Layout and linearization Keyboard focus styling Interoperability with mobile web technologies

10. Free Best Practices Tools Illinois Functional Accessibility Evaluator http://fae.cita.illinois.edu Illinois Firefox Accessibility Extension https://addons.mozilla.org/en-US/firefox/addon/5809

11. Demonstration of Free Tools

12. Web 2.0 Issues Keyboard support Links and controls Widgets Focus management Navigation Sections Navigation bars Dynamic Content Content updated by user action Content updated by external events

13. Widgets Keyboard Navigation Best Practices http://dev.aol.com/dhtml_style_guide http://dev.aol.com/dhtml_style_guide Accessible Rich Internet Application (ARIA) Markup http://www.w3.org/TR/wai-aria http://www.w3.org/TR/wai-aria WAI ARIA Best Practices http://www.w3.org/TR/wai-aria-practices/ http://www.w3.org/TR/wai-aria-practices/ Example Accessible Widgets http://test.cita.illinois.edu/aria/ http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases http://test.cita.illinois.edu/aria/ http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases

14. Explore Accessibility of Web Widget Tree Widget http://test.cita.illinois.edu/aria/tree/tree1.php http://test.cita.illinois.edu/aria/tree/tree1.php

15. Explore Accessibility of Web Application

16. Thank you for attending this session at ATIA 2009 Chicago! Watch for us in Orlando this January! Please help us improve the quality of our conference by completing your session evaluation form. Completed evaluation forms should be submitted as you exit or to staff at the registration desk. Thank You!