Applications and Online Services

grassquantityΤεχνίτη Νοημοσύνη και Ρομποτική

15 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

87 εμφανίσεις

®


IBM Software Group

© 2007 IBM Corporation

Accessible Rich Internet

Applications and Online Services


Rich Schwerdtfeger

IBM Distinguished Engineer,

Chair W3C WAI PF ARIA Subteam



First European

e
-
accessibility Forum

IBM Software Group

Web 2.0 Paradigm Shift in online services


Rich desktop
-
like experience through

the browser


AJAX reduces page reloads


Tie UI to back
-
end services



Content aggregation from various

resources (Mashups)




Social Collaboration



Potential for increased usability

for all users


Static Documents



New Content = Page Reload




Navigation limited to

tab and click



Poor Usability for PWDs


News Ltd: “We’re allowing people to digest more information and faster, which I think is vitally important.”

IBM Software Group

Online services moving to Rich Internet Applications (RIA)s


Reduced server loads



Easy upgrades and deployment



Ubiquitous access to data



Platform neutral desktop
-
like look and feel


IBM Software Group

4

Restrictive Accessibility legislation inadequate for today’s online services


Geos require JavaScript and/or
CSS disabled


Decisions based on 1999 browser technology



Restrictions on pervasive RIA
technology will leave people with
disabilities behind


New 508/WCAG 2.0 focus on



Interoperability, usability vs.

technology exclusion


Harmonization between web and software

0
10
20
30
40
50
60
70
2001
2003
2005
2007
JavaScript
CSS
Iframes
Frames
Source: Security Space Technology Penetration Report

http://www.securityspace.com/s_survey/data/man.200611/techpen.html

Growth of RIA Based Technology vs.

static HTML

IBM Software Group

The Accessibility Problem is not CSS and JavaScript


Usability problems caused by limited HTML keyboard support



HTML and other markup does not provide adequate markup to support
accessible dynamic content




“CSS and JavaScript accessibility problem” occurs when


JavaScript and CSS are used to create new UI constructs (menu, tabpanel, etc.)


HTML is repurposed causing interoperability problems with platform *Accessibility APIs


HTML keyboard focus issues require use of elements which effect tab order




The solution brings usable access of rich desktop applications to the Web

*Accessibility API


Application Program Interface


How applications provide accessibility information to assistive technologie
s

IBM Software Group

RIA Repurposed HTML lacks semantics and ability to give focus

example: simlated pop
-
up menu


Accessibility Problems



Can’t get here effectively with the keyboard



Don’t know a menu has been activated



Usability poor as does not behave like a menu



Usability Problem extends beyond accessibility



Alternative content is expensive


The “Rich Internet Application Accessibility Problem”

IBM Software Group

Dependence on excessive tabbing makes keyboard access
unusable


Accessibility/Usability Problems



Portal keyboard usability a problem


To get to Market report you need to tab through
every link on the page


Alternatives are a hack to code sections as
headers restricting UI or assign access keys



Alternative is inconsistent across web sites



Alternative provides little semantic information



Use of keyboard short cut (Access Key)
introduces device dependencies



Document Navigation Problem

IBM Software Group

W3C Accessible Rich Internet Applications (ARIA) to the rescue

Providing for accessible convergence of Rich Web And Rich Desktop


ARIA Roadmap


Analysis/Plans to fill accessibility deficiencies


Full interoperability with assistive technologies


Accessible desktop
-
like look and feel



ARIA Specifications


Role *GUI semantics


States GUI semantics


Form properties


AJAX live regions


Relationships


Sort properties


Role navigation landmarks


Fill keyboard gaps in (X)HTML (tabindex)



Mapped to Accessibility API for ATVs

role =“navigation”

role=“main”

<div tabindex=“
-
1”


role = “wairole:menuitem”


waistate:selected =“true”>


*GUI


Graphical User Interface

IBM Software Group

Demo

IBM Software Group

10

Where we are and what’s Hot!
Making it real for developers and users


Reusable, Accessible Component Libraries


Producing RIAs (Dojo, Rational JWL, Oracle)


W3C has HTML implementation technique for XHTML standard



Recent Announcements


IBM *FSG donation of IAccessible2 for Windows with ARIA support


Second W3C Working Drafts of ARIA Specifications



Browser support


Firefox 1.5, 2.0
-

partial spec.


Firefox 3.0 to support full spec. (Windows and Linux)



ARIA early ATV adopters support Firefox 1.5,2.0


Window
-
Eyes, JAWS 1.5/2.0, ZoomText



New Tooling


University of Illinois Firefox Accessibility Extensions


Model
-
based authoring tools


IBM Research
-

RAVEN

*FSG


Free Standards Group

®


IBM Software Group

© 2007 IBM Corporation

Questions?

®


IBM Software Group

© 2007 IBM Corporation

Backup

IBM Software Group

References


W3C Roadmap and Standards


http://www.w3.org/wai/pf


Examples


http://webally.com


http://www.weba11y.com/AjaxDemo/sample.html


http://developer.mozilla.org/en/docs/Accessible_DHTML


http://firefox.cita.ui uc.edu/test/dhtml/src/index.php


Tooling in development


U. of Illinois extension

http://firefox.cita.ui uc.edu/dhtml/download.php


RAVEN

http://www.alphaworks.ibm.com/tech/raven


WAI Role Taxonomy extension tool


http://test2.ubapps.com/RolesWebApp/roles/start


IBM Software Group

Roadmap


Declarative Markup Opportunities


XForms


Inherent accessibility features results in smaller footprint


Standard data model from which many states and properties can be mapped automatically by the
browser


Support for hint text, labels, descriptions


Declarative markup means less code goes to client



XML Events and Handlers


allow for named actions


Declarative way for defining events and handlers


Handlers can be named to map to action accessibility API



XHTML 2 access element


Offers device independent alternative to access key


Offers semantic navigation using roles


Allows for a degree of backward compatability


IBM Software Group

Exclusion of Growth of RIA Based Technology vs. basic HTML

0
10
20
30
40
50
60
70
2001
2003
2005
2007
JavaScript
CSS
Iframes
Frames
Source: Security Space Technology Penetration Report

http://www.securityspace.com/s_survey/data/man.200611/techpen.html

Growth of RIA Based Technology vs.

static HTML

IBM Software Group

In any object
-
based accessibility architecture, Assistive Technologies
(AT)'s communicate with all objects to render an accessible view

Assistive

Technology

Text

Button

Menu Item

Frame

Accessible

Application

Components

IBM Software Group

The Roadmap Promise


Competitive look/feel in Web Application widgets


Feel like an installed GUI Application



Improved usability through improved keyboard navigation



Full
-
function interoperability with assistive technologies

IBM Software Group

Accessibility API defines a standard contract between an application
component and an assistive technology

Assistive

Technology

Role

States

Actions

Caret

Selection

Text

Hypertext

Value

Name

Description

Children

Changes

Relations

A

C

C

E

S

S

I

B

L

E

UI

Component

Data

UI

Java, MSAA/IAccessible2 (Windows), ATK/ATSPI UNIX

IBM Software Group

Why you need it?


Competitive look/feel should work like platform GUI



That kind of interaction in Web pages requires scripting

and styling



Scripting breaks communication with AT through APIs (unless…)

IBM Software Group

Problem Analysis shows opportunity for richer accessibility


HTML Accessibility depends on tag names

(mixing content and presentation)



JavaScript creates custom widgets using
HTML, user input, and CSS changing their
meaning and purpose within a Web
application



HTML lacks the accessibility meta data to
support accessibility APIs for repurposed
HTML content



Keyboard usability for PWDs is poor


Almost totally dependent on tabbing


Non anchors/form elements can’t receive
focus
(W3C HTML browser implementation
oversight)


Users needs keyboard navigation and
widget behavior like a GUI


User needs consistent navigation landmark
semantics to reduce usability problem

AT
*Role
*States
*Actions
Caret
Selection
Text
Hypertext
*Value
Name
Description
*Children
*Relations
C
O
N
T
R
A
C
T
Document
Element
Data
UI
JavaScript is the controller
-
Manipulates the data (DOM)
-
Manipulates the content
-
Manipulates the style (UI)
-
Event Driven
-
Produces Custom Widgets
Browser map to DOM/Accessibility API
AT
*Role
*States
*Actions
Caret
Selection
Text
Hypertext
*Value
Name
Description
*Children
*Relations
C
O
N
T
R
A
C
T
Document
Element
Data
UI
JavaScript is the controller
-
Manipulates the data (DOM)
-
Manipulates the content
-
Manipulates the style (UI)
-
Event Driven
-
Produces Custom Widgets
Browser map to DOM/Accessibility API
IBM Software Group

Role Taxonomy


Innovation allows for extensibility


Taxonomy of Roles


Widgets (grid, menu, spinbutton, etc.)


Structure (group, presentation, application, td, th)



RDF/OWL Class hierarchy



Roles define properties



Allow for custom componentry



Allow for future discovery



Allow for future adaptation

IBM Software Group

States and Properties for ARIAs


Typical widget states


checked, selected, disabled, currentvalue, expanded, etc.


Relationships


describeby, controls, flowto, labeledby, owns


New AJAX properties


live (off, polite, assertive, rude)


relevant (additions, deletions, text, all)


atomic


Miscellaneous


sort (ascending, descending)


setsize, posinset


Datatype


Role


tabindex (fill keyboard gaps in HTML)

IBM Software Group

Information as seen by Assistive Technology today

(if the user could get to Top Stories)

“The Contract” AT Access to Accessible Application

Role

(what it is)

May throw this
away

State

Name

Non
-

deterministic

Actions

Parent

IBM Software Group

Filling the gaps


XHTML 1.X (Extensibility through use of XML namespaces)


New States and Properties Module for Accessible Rich Internet Applications

(WAI
-
ARIA States and Properties)


XHTML Role attribute module


Role attribute


Common landmarks (navigation, search, main, secondary, note, seealso, contentinfo, search, banner)


States (checked, expandable, selected) and Properties (describedBy, controllerFor, live)


TABINDEX modification allowing script to set focus on all elements with or without effecting tab order)



New Roles for Accesible Rich Internet Applications (WAI
-
ARIA Roles)


Role (button, tabpanel, grid, etc.)


Work with User Agents (Industry) make work with ATs


Map new meta data to Accessibility API


Implement (TABINDEX=
-
1) to support focus to non
-
anchor and form elements



<div tabindex=“
-
1” role = wairole:menuitem waistate:disabled=“true”>



Leading to broader industry curb cuts



SVG accessibility


Device Independence (Content adaptation for devices)