Enabling an Accessible Web 2.0 Becky Gibson Web Accessibility Architect

Web 2.0 Overview Web 2.0 Accessibility Concerns Addressing Web 2.0 Accessibility Technologies Tooling Testing Demo Summary Agenda

Web 2.0 Overview

Web 2.0 Accessibility Concerns

Addressing Web 2.0 Accessibility

Technologies

Tooling

Testing

Demo

Summary

What is Web 2.0? Dynamic Incremental updates, multimedia Interactive Maps, web services Collaborative Wikis, blogs Crowdsourcing – http:// www.istockphoto.com Collective intelligence Amazon Mechanical Turk - http:// www.mturk.com/mturk/welcome Digg - http:// www.digg.com /news del.icio.us - http:// del.icio.us / “ Thus, mastery of architectures of participation to create real value will be essential to success in the Web of the future.” Dion Hinchcliffe

Dynamic

Incremental updates, multimedia

Interactive

Maps, web services

Collaborative

Wikis, blogs

Crowdsourcing – http:// www.istockphoto.com

Collective intelligence

Amazon Mechanical Turk - http:// www.mturk.com/mturk/welcome

Digg - http:// www.digg.com /news

del.icio.us - http:// del.icio.us /

Google Maps

iStockPhoto

Web 2.0 Technologies JavaScript CSS – Cascading Style Sheets Ajax – Asynchronous JavaScript and XML Multimedia

JavaScript

CSS – Cascading Style Sheets

Ajax – Asynchronous JavaScript and XML

Multimedia

Yahoo! – February 29, 2000

Yahoo! – May 2, 2007

AOL – February 29, 2000

AOL – May 2, 2007

Web 2.0 Accessibility Concerns Rich Interface controls Reliance on Mouse Lack of Semantics Incremental Updates via Ajax Unexpected / Unaware Unable to locate Changes in focus Excessive Navigation Multimedia Lack of captioning Interaction issues

Rich Interface controls

Reliance on Mouse

Lack of Semantics

Incremental Updates via Ajax

Unexpected / Unaware

Unable to locate

Changes in focus

Excessive Navigation

Multimedia

Lack of captioning

Interaction issues

Addressing Web 2.0 Accessibility Updated Web Technologies Accessible Rich Internet Applications (ARIA) IAccessible2 Development Tools Integrated Development Environments Toolkits Testing Tools Rule-based Accessibility Validation Environment (RAVEN) Functional Web Accessibility Evaluator (FAE) Assistive Technologies

Updated Web Technologies

Accessible Rich Internet Applications (ARIA)

IAccessible2

Development Tools

Integrated Development Environments

Toolkits

Testing Tools

Rule-based Accessibility Validation Environment (RAVEN)

Functional Web Accessibility Evaluator (FAE)

Assistive Technologies

Updated Web Technologies - ARIA Allows creation of rich user interface components Full keyboard navigation Non-intrusive notification of updated content

Allows creation of rich user interface components

Full keyboard navigation

Non-intrusive notification of updated content

Need for ARIA Navigation All components must be keyboard Accessible Remove reliance on tab key navigation Notification of updated content Assistive Technology (AT) Support AT work via platform accessibility APIs Only basic HTML elements are supported Scripted Web content is not supported Assistive Technology needs to: Know active roles of scripted user interface components Monitor states of scripted user interface components

Navigation

All components must be keyboard Accessible

Remove reliance on tab key navigation

Notification of updated content

Assistive Technology (AT) Support

AT work via platform accessibility APIs

Only basic HTML elements are supported

Scripted Web content is not supported

Assistive Technology needs to:

Know active roles of scripted user interface components

Monitor states of scripted user interface components

ARIA Overview Add role semantics 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 behavior* Extensible via RDF in future *Live region support coming in Firefox 3

Add role semantics 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 behavior*

Extensible via RDF in future

ARIA Support Support for HTML and XHTML Implemented in Firefox 1.5 and later versions Supported by Window-Eyes and Jaws Window-Eyes 5.5 or later Partial support in JAWS 7.1, more in JAWS 8.0

Support for HTML and XHTML

Implemented in Firefox 1.5 and later versions

Supported by Window-Eyes and Jaws

Window-Eyes 5.5 or later

Partial support in JAWS 7.1, more in JAWS 8.0

ARIA Demo Available at http://www.weba11y.com/AjaxDemo/sample.html

Updated Web Technologies – Accessibility APIs Each platform has Accessibility API to communicate with AT Accessibility ToolKit (ATK) for GNOME Java Accessibility API Microsoft Active Accessibility (MSAA) for Windows UI Automation for Vista MSAA created many years ago No access to advanced functionality ATs rely on off-screen models and private application APIs

Each platform has Accessibility API to communicate with AT

Accessibility ToolKit (ATK) for GNOME

Java Accessibility API

Microsoft Active Accessibility (MSAA) for Windows

UI Automation for Vista

MSAA created many years ago

No access to advanced functionality

ATs rely on off-screen models and private application APIs

Updated Web Technologies – IAccessible2 Extends MSAA to add missing functionality rich text, tables, relations ARIA Live Regions Harmonizes with newer APIs of Java and Linux Interface donated to The Linux Foundation as Open Standard Will be implemented in Firefox 3 Being integrated into Eclipse

Extends MSAA to add missing functionality

rich text, tables, relations

ARIA Live Regions

Harmonizes with newer APIs of Java and Linux

Interface donated to The Linux Foundation as Open Standard

Will be implemented in Firefox 3

Being integrated into Eclipse

Development Tools Web Toolkits Dojo Scriptaculous Prototype Google Web Toolkit (GWT) Yahoo! User Interface (YUI) More….. Integrated Development Environments Rational Web Developer Ajax Toolkit Framework More…..

Web Toolkits

Dojo

Scriptaculous

Prototype

Google Web Toolkit (GWT)

Yahoo! User Interface (YUI)

More…..

Integrated Development Environments

Rational Web Developer

Ajax Toolkit Framework

More…..

Dojo 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

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 Core Widgets (Dijit) Fully Accessible via ARIA Techniques Internationalized Standard Look and Feel Developer Documentation API User Manual Supported Browsers Firefox 2.0 IE 6+ Safari (latest) Data Binding Tree, Grid, Select

Fully Accessible via ARIA Techniques

Internationalized

Standard Look and Feel

Developer Documentation

API

User Manual

Supported Browsers

Firefox 2.0

IE 6+

Safari (latest)

Data Binding

Tree, Grid, Select

Dojo Demo

Accessibility Testing Tools Test against published standards Many tools evaluate the “over the wire” HTML Bobby from Watchfire WebKing from Parasoft More … Difficult to evaluate server side technologies Issues with dynamic Web 2.0 content Need more interactive solutions

Test against published standards

Many tools evaluate the “over the wire” HTML

Bobby from Watchfire

WebKing from Parasoft

More …

Difficult to evaluate server side technologies

Issues with dynamic Web 2.0 content

Need more interactive solutions

RAVEN Rule-based Accessibility Validation ENvironment Set of Eclipse plug-ins Originally developed for validating Java GUIs Java AWT and Swing Eclipse SWT Integrates accessibility testing into development environment Operates via an XML based set of rules Supports Validation of Dynamic HTML Uses IAccessible2 Being updated to support ARIA

Set of Eclipse plug-ins

Originally developed for validating Java GUIs

Java AWT and Swing

Eclipse SWT

Integrates accessibility testing into development environment

Operates via an XML based set of rules

Supports Validation of Dynamic HTML

Uses IAccessible2

Being updated to support ARIA

Summary Web 2.0 is dynamic and constantly evolving Accessibility of Web 2.0 is possible through Updated Technologies Toolkits and Development Environments Testing Tools

Web 2.0 is dynamic and constantly evolving

Accessibility of Web 2.0 is possible through

Updated Technologies

Toolkits and Development Environments

Testing Tools