Web 2.0 Accessibility

Jon Gunderson, Ph.D.

E-mail: jongund@illinois.edu

Division of Disability Resources and Education Services

College of Applied Health Sciences

University of Illinois

What is a Web 2.0 application?

URI does not define the contents of the web page
Content dynamically updates without changing the URI
Scripts need to be enabled for access
Interactive elements called "widgets" are constructed out of HTML, Script and CSS

Common Examples of Web 2.0 Applications

Wikis
Web mail
Course management systems
Content management systems

Accessibility Issues of Web 2.0

Keyboard support and focus management
Navigation and orientation
- Titling
- Headings and landmarks
- Labeling of form controls
- Widgets
Text equivalents
Scaling
High Contrast Compatibility
Embedded technologies like Flash AIR and SWF files

Where do we start?

Look at the company or organization website

Is their website accessible?
Do they claim any level of accessibility?
Pubic Voluntary Product Accessibility Template (VPAT)?
Search for disability or accessibility in their search feature.
If no information request information.

Testing with Basic Browser Functions

Keyboard only usage
Turn on high contrast mode
Link text indicates target of links
Text equivalents for images
Header navigation (Opera only)

Testing with Assistive Technologies

Time consuming
Assistive technologies have different behaviors
No information about underlying markup or what tell developers if there is a problem

Limitations with Assistive Technologies

Time consuming
Need to have skills in using AT
Little information about underlying markup
May miss parts of user interface due to lack of landmarks or keyboard support

Automated Web Evaluation Tools

Accessibility of Toolbars

Firefox Accessibility Extension Home Page
Wave Toolbar
IE Web Accessibility Toolbar
Firevox Speech Extension | Click Speak
Many others list is going fast

Advantages of Toolbars

Test dynamically generated markup
Makes invisible markup visible
- Titles
- Headings
- Labels
- Data table information
- Others
Dynamically updated alt text
- Can be used to provide stat information
Color contrast tests of rendered markup

iCITA HTML Best Practices

Example Applications

Accessible Rich Internet Application (ARIA)

How Does ARIA Work?

ARIA describes user interface elements to ATs
Managing focus
Keyboard model
Synchronizing visual and AT information

ARIA Roles

ARIA States and Properties

Managing Focus

Tabindex values
- -1: Element can receive keyboard focus, but is NOT part of tab order
- 0: Element can receive keyboard focus and is part of tab order
- >0: Element can receive keyboard focus and value determines tab order
.focus() property of DOM elements
Keyboard event handlers in Javascript

Some Javascript Toolkits Supporting ARIA

Simple ARIA example

My check box

Working with Companies and Organizations

Understanding current accessibility issues
Design requirements
Quality assurance
How to report accessibility issues
Publicise and document accessibility features

Next Steps

On-line Training through World Organization of Web Masters
Firebug Integration of Accessibility Evaluation and Reporting Tools
Dedicated human resources for IT accessibility in higher education
- Educause | IT Accessibility Constituent Group
- Assistive Technology and Higher Education