Combining SADIe and AxsJAX To Improve Accessibility Darren Lunn, Simon Harper and Sean Bechhofer

Summary SADIe transcodes content based upon the meaning of the visual rendering. AxsJAX allows ARIA statements to be injected into Web content dynamically. Can combine SADIe’s identification of elements and AxsJAX functionality to create consistent page interaction.

SADIe transcodes content based upon the meaning of the visual rendering.

AxsJAX allows ARIA statements to be injected into Web content dynamically.

Can combine SADIe’s identification of elements and AxsJAX functionality to create consistent page interaction.

The Web Focus on presenting information visually Images Columns Chunks Some knowledge is only available implicitly from the page rendering.

Focus on presenting information visually

Images

Columns

Chunks

Some knowledge is only available implicitly from the page rendering.

Implicit Information Advertisement Banner Menu Main Content

Assistive Technologies Traversal of content is serial. Important information may not be encountered until later on. Some information such as menus can be repeated for every page.

Traversal of content is serial.

Important information may not be encountered until later on.

Some information such as menus can be repeated for every page.

Transcoding Adaptation of content from one format to another. Rules / Patterns. Can adapt a large number of pages. Can suffer from reduced accuracy. Annotation. Accurate. Time consuming as every page is annotated.

Adaptation of content from one format to another.

Rules / Patterns.

Can adapt a large number of pages.

Can suffer from reduced accuracy.

Annotation.

Accurate.

Time consuming as every page is annotated.

SADIe Approach The visual rendering of a Web element informs the user of its purpose. The CSS defines the visual rendering. Identifying the purpose of t he CSS definition implicitly defines the purpose of the Web element. A single CSS definition is applied to every page within the Website.

The visual rendering of a Web element informs the user of its purpose.

The CSS defines the visual rendering.

Identifying the purpose of t he CSS definition implicitly defines the purpose of the Web element.

A single CSS definition is applied to every page within the Website.

SADIe Transcoding Banner Advertisement Advertisement Menu Heading Summary Main Story Heading Summary Main Story

The Web 2.0 Content can change dynamically without page refreshes. Documents are no longer static but interactive. YouTube Flickr Facebook Akin to an application.

Content can change dynamically without page refreshes.

Documents are no longer static but interactive.

YouTube

Flickr

Facebook

Akin to an application.

ARIA Accessible Rich Internet Applications. Allows developers to mark-up dynamic and interactive regions of content Mark-up provides assistive technology with access to dynamic content.

Accessible Rich Internet Applications.

Allows developers to mark-up dynamic and interactive regions of content

Mark-up provides assistive technology with access to dynamic content.

Google AxsJAX Open source framework to insert ARIA into documents dynamically. Collection of JavaScripts that contain all the necessary code for inserting ARIA. Uses high level abstract patterns

Open source framework to insert ARIA into documents dynamically.

Collection of JavaScripts that contain all the necessary code for inserting ARIA.

Uses high level abstract patterns

Content Navigation Rules A key part of the framework. Uses XML and X P ath expressions to define where ARIA should be inserted. Assigns key presses to ARIA statements to allow users to interact with content.

A key part of the framework.

Uses XML and X P ath expressions to define where ARIA should be inserted.

Assigns key presses to ARIA statements to allow users to interact with content.

Using CSS To Define XPaths Xpath can use absolute locations. /html/body/table[3]/tbody/ X P ath can also use element properties to match nodes. //ul[@class=‘X’] CSS employs element attributes to apply rendering. <ul id=&quot;cnnNavigation&quot;>

Xpath can use absolute locations.

/html/body/table[3]/tbody/

X P ath can also use element properties to match nodes.

//ul[@class=‘X’]

CSS employs element attributes to apply rendering.

<ul id=&quot;cnnNavigation&quot;>

Use SADIe To Create CNR Use CSS annotations to identify areas of content. Use annotations to generate the XPath and AxsJAX Code. Rather than rearrange the document, inject AxsJAX into document dynamically.

Use CSS annotations to identify areas of content.

Use annotations to generate the XPath and AxsJAX Code.

Rather than rearrange the document, inject AxsJAX into document dynamically.

Consistent Key Presses N : move to next chunk of information. P: move to previous chunk of information. M: jump to menu. S: provide a summary of the page

N : move to next chunk of information.

P: move to previous chunk of information.

M: jump to menu.

S: provide a summary of the page

SADIe + AxsJAX Pressing S reads out the summary but does not loose the focus of the story

Future Work More key presses Chose four key presses applicable to a majority of pages User studies Demonstrated the technical feasibility of the approach Dynamic content So far focused on consistent navigation of static pages

More key presses

Chose four key presses applicable to a majority of pages

User studies

Demonstrated the technical feasibility of the approach

Dynamic content

So far focused on consistent navigation of static pages

Summary SADIe transcodes content based upon the meaning of the visual rendering. AxsJAX allows ARIA statements to be injected into Web content dynamically. Can combine SADIe’s identification of elements and AxsJAX functionality to create consistent page interaction.

SADIe transcodes content based upon the meaning of the visual rendering.

AxsJAX allows ARIA statements to be injected into Web content dynamically.

Can combine SADIe’s identification of elements and AxsJAX functionality to create consistent page interaction.

Questions? http://hcw.cs.manchester.ac.uk/