Functional Accessibility Evaluation of Web 2.0 Applications

What makes a web site web 2.0 or a web application?

• URL does not define content: login
• Content changes without user action: Chat system
• Content changes basd on user acions: Wiki, e-mail, maps
• Non-html user interface controls: menus, trees, grids

IT Accessibility Initiative at Illinois

• 60 year history in disability accommodation
• 12 year history in web accessibility
• Currently 7.5 FTE deaicated to IT Accessibility
• Illinois Center for Information Tecnology Accessibility (iCITA)
• Illinois Information Tecnology Accessibility Act (IITAA)
• Provost ITAccess Initiative
• Web Best Practices Group
• IITAA IT Accessible Purchasing Group

Web 2.0 Examples at Illinois

• University created web services
  • Password manager
  • Webtools for surveys, calendars, newsletters
• Purchased web technologies
  • WebCT/Blackboard: Course management tools
  • EBSCO: Bibiographic databases
  • Elsevier: Bibliographic databases
  • Xythos: Document sharing via the web
  • Confluence: wiki
  • Mirapoint: Web e-mail interface
  • Emergency notification system
  • Webstore
  • Registration
  • SCTBanner: grades, financial aid, human resources, payroll, etc...

HTML Best Practices

• Navigation and Orientation
• Text Equivalents
• Scripting
• Styling
• Standards

Tools for Testing Best Practices

• Firefox Accessibility Extension
• Functional Accessibility Evaluator 1.0 Beta

Navigation and Orientation

• Titling
• Headings
• Navigation bars
• Form control labels
• Linearization
• Data tables
• Language

Keyboard

• Can all functions be accessed through the keyboard?
• Do they suport effecient keyboard access?

Web 2.0 Widgets and Dynamic Content

• Javascript, HTML and CSS to create user interface controls
• Keyboard support
• Roles
  • tree
  • menu
  • grid
• Properties
  • labelledby
  • describedby
  • label
  • liveregion
• States
  • checked
  • selected
  • expanded
  • disabled

Problems in Evaluating Widgets in Web 2.0 Applications

• Keyboard support
• Compatibility with Operating System accessibility features
• Testing with assistive technologies
• Using an automated tool
• Looking at the source code

Accessible Rich Internet Applications (ARIA)

• Roles
• Properites
• States

ARIA Implementation

Browsers

• Map roles, properties and states to accessibility APIs (i.e. MSAA for Windows)
• Support tabindex for enabling keyboard focus and tab navigation

Assistive Technologies

• Support new roles, properties and states from accessibility APIs
• Use ARIA markup for providing descriptions and additional information

Web Developers

• Include tabindex to support keyboard navigation
• Add keyboard event handlers and use DHTML style guide
• Include ARAI markup to describe roles, properties and states

ARIA Resources

• W3C Accessible Rich Internet Applications Specification
• W3C ARIA Primer
• DHTML ARIA style guide
• Codetalks.org ARIA developer resources

Checkbox Example: Inaccessible

Standard Checkbox

I like ice cream

Web 2.0 Checkbox

Source Code

Checkbox Example: Adding Tab Support

• Added tabindex="0" to div element
• Added :focus and :active to CSS psuedo selectors to create border on focus

Standard Checkbox

I like ice cream

Web 2.0 Checkbox

Source Code

Checkbox Example: Adding Keyboard Support

• Added onkeydown event handler

Standard Checkbox

I like ice cream

Web 2.0 Checkbox

Source Code

Checkbox Example: Telling assistive technologies that this is a checkbox

• Added role="application" to a container div element
• Added role="checkbox" to div element
• Added aria-checked attribute to div element

Standard Checkbox

I like ice cream

Web 2.0 Checkbox

Source Code

Checkbox Example: Changing the checkbox label using aria-labelledby property

• Added aria-labelledby attribute to div element

Standard Checkbox

I like ice cream

Web 2.0 Checkbox

Source Code

Validation Feedback Example

• Added alert role to div element

Source Code

Questions?