Functional Accessibility Evaluation of Web 2.0 Applications Testing

Jon Gunderson, Ph.DUniversity of Illinois

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

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

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, ….

Best Practices

• Navigation and Orientationhttp://html.cita.illinois.edu/nav/

• Text Equivalentshttp://html.cita.illinois.edu/text/

• Scripting and Automationhttp://html.cita.illinois.edu/script/

• Stylinghttp://html.cita.illinois.edu/style/

• Standardshttp://html.cita.illinois.edu/standards/

Navigation and Orientation

• Titling• Menus• Sub Headings• Form Labeling• Links• Data Tables• Lists• Language• Frames

Text Equivalents

• Informative images• Charts• Tables• Pictures• Graphs

• Decorative images• Status images

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

Styling

• Use of CSS• Text styling• Layout of content• Background images

• Layout and linearization• Keyboard focus styling• Interoperability with mobile web technologies

Free Best Practices Tools

• Illinois Functional Accessibility Evaluatorhttp://fae.cita.illinois.edu

• Illinois Firefox Accessibility Extensionhttps://addons.mozilla.org/en-US/firefox/addon/5809

Demonstration of Free Tools

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

Widgets

• Keyboard Navigation Best Practiceshttp://dev.aol.com/dhtml_style_guide

• Accessible Rich Internet Application (ARIA) Markuphttp://www.w3.org/TR/wai-aria

• WAI ARIA Best Practiceshttp://www.w3.org/TR/wai-aria-practices/

• Example Accessible Widgetshttp://test.cita.illinois.edu/aria/

http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases

Explore Accessibility of Web Widget

• Tree Widgethttp://test.cita.illinois.edu/aria/tree/tree1.php

Explore Accessibility of Web Application

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!