w3 c specification for interoperability and accessibility for ajax, dhtml, xml etc based on rdf...

ARIA

Lisa Seeman, W3C invited expert

W3C specification for interoperability and accessibility for AJAX, DHTML, XML Etc…

Based on RDF Taxonomy

© W3C or Lisa Seeman 2010

Contents

Making it Simple – an XML Specification

Getting started The problems; the solution Background technology A solution

More detailed Focus Relationships

RDF The RDF Specification Extending roles Why RDF

Ask Questions

Don’t let it go too fast


Contents




RDF The RDF Specification Extending Roles Why RDF

Ask Questions



What is the Problem?

Why can’t users with disabilities/ unusual device access all websites? If content and functionality assume a screen and a mouse

No use of images without proper definition and clarification

Old

Alt tag static

Use headers (H1..)

Avoid use of scripts

No use of “normal”multimedia/Flash

New

Add semantics (

•Structure,

•Role

•state

Make focus keep with flow of the page

Keep elements inside of the DOM


Problems with DHTML

Lack of knowledge, lack of Semantics What things are What they are doing What the relationships are Focus


How Accessibility Works


Accessible Tree - Firefox

Subset of the DOM tree

<table><html> <td> #text

<p>

<a>

<i>

#text

<td> #text

Exposed as MSAA or ATK• Name: e.g. “click here”• Role: ROLE_LINK• States: STATE_FOCUSABLE | STATE_FOCUSED | STATE_LINKED | STATE_TRAVERSED

#text

<div>

#text<div role=“”>

<tbody> <tr>

#text


To Summarize the Problem

We Need Semantics !!!!!

Let us know what we have and what is happening


Contents





Ask Questions



Core Concepts – Semantic Web

Additional layers of information Meaning to terms Links to relevant information Links to relevant people

Allow software agents to manipulate this information

Ontology defines terms


Simplified RDF

<RDF> <Description about="http://www.ubaccess.com/SWAP">

<author>Lisa</author>

<updated datatype=“year”>2006</updated> </Description>

</RDF>

http://www.ubaccess.com/SWAP author Lisa

http://www.ubaccess.com/SWAP updated 2006

SWAP Author Lisa


Core Concepts – RDF

RDF is a protocol of the semantic web

Uses graph logic

Intelligent semantics

•Define terms

•Define relationships

•Make statements

•Make inferences


Contents





Ask Questions



ARIA Taxonomies

Roles can be used to build accessible applications by providing any missing information that the assistive technology needs to anticipate the behavior of the elements inside the application.

For example, to support accessibility the browser may create accessible objects of a web page though the Accessibility API of the operating system. When the full semantics are provided and understood by the browser, the application will properly map the page to accessible objects of the operating system.


Roles

What the thing is Things that do not change in a session Uses RDF to describe relationships

Example: This is a checkbox RDF: A check box is a form of select, can be checked,

etc…


Relationships

Why are relationships important?

What it is describedby , labeledby

Hierarchical Haspopup

Control Flow Group structure

Tree, group, region (roles)


States and Author-Settable Properties

Things that can change in the session System and author changeable Changes in state User changeable


Roles and States, Examples

Role is a ….tree group, tree item, Grid, checkbox

And is labeledby, flowto, controls, And live ....

State … Checked, pressed, value, selected


How Accessibility Works


How does that help?

1. Roles: 1. Map to the right MSAA object (ROLE_MENUITEM or ROLE_LINK)2. And to right states (STATE_FOCUSABLE, STATE_CHECKABLE)

2. States and properties: Scripts activate on toggled states that AT can understand and respond to. It exposes the state information. AT can know what is going on and can tell user

valuenow maps to EVENT_VALUE_CHANGE

aria-checkedaria-expandedaria-readonly

aria-disabled maps to EVENT_STATE_CHANGEaria-requiredaria-invalidaria-describedby


A Simple Example

<?xml version="1.1" encoding="us-ascii"?> <!DOCTYPE html PUBLIC "Accessible Adaptive Applications//EN"

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head>

<body>

<p>Here's a checkbox that you can click on.</p>

<div> <span class="checkbox" id="chbox1" role="checkbox" aria-checked="true" onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" > Include decorative fruit basket </span> </div>

</body></html>


Contents


Getting started The problems; the solution Background technology A simple example



Ask Questions



Focus

Choices for elements normally not focusable:

1. Tab key focusable tabindex >= “0”

2. Script- or click- only tabindex <= “-1”

3. Not focusable default / no tabindex

Works with flowTo


Building Accessible Applications

Step 1: Use your native mark up as well as you can Step 2: Find the right roles

Set roles to make sure elements behave predictably and correctly describes the behavior of each element within your application (unless elements behaviors are fully described by the native markup language).

Step 3: Look for groups Look for groups within a page, and mark them using the most appropriate role that best describes their usage.

Step 4: Build relationships Sometimes the relationships can be made clear via the native mark up language. Sometimes this can be implied via the DOM. In other cases, use the States and Properties. For example: aaa:property in region B to reference region A.

Step 5: Set properties Set properties until the behavior of the element is defined and described (such as aaa:required aaa:live) Control the behavior of the element using device independent events, states, and properties. Set Focus


Contents





Ask Questions



RDF owl:ObjectProperty

<owl:ObjectProperty rdf:ID="mustContain"> <rdfs:comment xml:lang="en">A child that must be contained by this role</rdfs:comment> <rdfs:subpropertyOf rdf:resource="#scope"/>

</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID="supportedState"> <rdfs:comment xml:lang="en">A state that can be supported for this Role</rdfs:comment> <rdfs:domain rdf:resource="#roletype"/> </owl:ObjectProperty>

<owl:ObjectProperty rdf:ID="requiredState"> <rdfs:comment xml:lang="en">A state that must be provided for this Role</rdfs:comment> <rdfs:subpropertyOf rdf:resource="#supportedState"/> <rdfs:domain rdf:re

source="#roletype"/> </owl:ObjectProperty>


RDF - Using Properties in owl:Class

<owl:Class rdf:ID="combobox"> <rdfs:subClassOf rdf:resource="#select"/> <rdfs:seeAlso rdf:resource="http://www.w3.org/TR/html401/interact/forms.html#edef-SELECT"/> <rdfs:seeAlso rdf:resource="http://www.w3.org/TR/2007/REC-xforms-20071029/#ui-

selectMany"/> <role:nameFrom>author</role:nameFrom>………

<role:mustContain rdf:resource="#listbox"/> <role:mustContain rdf:resource="#textbox"/>

<role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-required"/>

<role:requiredState rdf:resource="http://www.w3.org/2005/07/aaa#aria-expanded"/>

</owl:Class>


Base Class

<owl:Class rdf:ID="roletype"> <rdfs:subClassOf> <owl:Restriction> <owl:onProperty

rdf:resource="http://dublincore.org/2003/03/24/dces#description"/> <owl:cardinality rdf:datatype="http://www.w3.org/2001/XMLSchema#string">1</owl:cardinality> </owl:Restriction> </rdfs:subClassOf>

……..

<role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-controls"/> <role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-describedby"/> <role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-disabled"/> <role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-dropeffect"/> <role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-flowto"/> <role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-grabbed"/><role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-label"/> <role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-labelledby"/> <role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-live"/> <role:supportedState rdf:resource="http://www.w3.org/2005/07/aaa#aria-owns"/>

…….</owl:Class>


A Simple Example

Web Page

<body>

<p>Here's a checkbox that you can click on.</p>

<div> <span class="checkbox" id="chbox1" role="checkbox" aria-checked="true" onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" > Include decorative fruit basket </span> </div>

</body>

Schema

<owl:Class rdf:ID="checkbox"> <rdfs:subClassOf rdf:resource="#input"/> …..<role:requiredState rdf:resource="http://www.w3.org/2005/07/aaa#aria-checked"/> </owl:Class>


Contents





Ask Questions



How to Extend

Choose sensible inheritance Provide a title and description for your role Ensure that all supported states are explicit Define the anticipated content and scope of the role Define any related concepts Set defaults when appropriate

Example: …… Compare to making accessible applications


Using Datatype and Groups

Group container labeled

“date chooser”

Contains combobox labeled day

Datatype =Day

Contains combobox labeled month

Datatype = Month

Contains combobox labeled year

Datatype = gyear


Extend Roles If …

Groups, a title and description will not complete the missing information, such as supported states. Need to define composite roles Need to define more nodes (states, roles) or relationships

Understand RDF over UML

Cost = support and complexity, performance

Do you best to overcome barriers to entry


Contents





Ask Questions



Why you might use RDF …

You need best knowledge - Life is a graph not a tree

You don’t know what question will be asked in the future – Infer, not access

Your structure can evolve - New type of properties, New types of nodes

You might not think of everything - Like me

RDF comes naturally (Graphs and relationships not just trees and hierarchy!!!!)


Required Office Interactions

Programmer 1 Accounts

Programmer 1

Product manager

CEO

Account manager

Office manager

Projectmanager


Why RDF - Revisited

•Life is not neat

•Life is informal

•Better relationships better knowledge more power

•Better evolve-ability better knowledge

The real world is a graph not a tree

Warning: Barrier to entry, performance

(our solution – keep simple things simple)


To Conclude

See: http://www.w3.org/TR/wai-aria/ http://www.w3.org/TR/wai-aria/rdf_model www.w3.org/TR/rdf-primer/ Any other questions? [email protected]

Thank You

w3 c specification for interoperability and accessibility for ajax, dhtml, xml etc based on rdf...

Technology

decorative fruit basket