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.
2
The Web• Focus on presenting information visually
– Images– Columns– Chunks
• Some knowledge is only available implicitly from the page rendering.
3
Implicit Information
4
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.
5
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.
6
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 the CSS definition implicitly defines the purpose of the Web element.
• A single CSS definition is applied to every page within the Website.
7
SADIe Transcoding
8
Banner
Advertisement
Advertisement
MenuMenu
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.9
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.
10
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
11
Content Navigation Rules• A key part of the framework.
• Uses XML and XPath expressions to define where ARIA should be inserted.
• Assigns key presses to ARIA statements to allow users to interact with content.
12
Using CSS To Define XPaths• Xpath can use absolute locations.
– /html/body/table[3]/tbody/
• XPath can also use element properties to match nodes.– //ul[@class=‘X’]
• CSS employs element attributes to apply rendering.– <ul id="cnnNavigation">
13
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.
14
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
15
SADIe + AxsJAX
16
Pressing S reads out the summary but does not
loose the focus of the story
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
pages17
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.
18
Questions?
http://hcw.cs.manchester.ac.uk/
