Combining SADIe and AxsJAX To Improve Accessibility
-
Upload
simon-harper -
Category
Technology
-
view
2.415 -
download
0
description
Transcript of Combining SADIe and AxsJAX To Improve Accessibility
![Page 1: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/1.jpg)
Combining SADIe and AxsJAX To Improve Accessibility
Darren Lunn, Simon Harper and Sean Bechhofer
![Page 2: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/2.jpg)
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
![Page 3: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/3.jpg)
The Web• Focus on presenting information visually
– Images– Columns– Chunks
• Some knowledge is only available implicitly from the page rendering.
3
![Page 4: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/4.jpg)
Implicit Information
4
Advertisement
Banner
Menu
Main Content
![Page 5: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/5.jpg)
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
![Page 6: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/6.jpg)
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
![Page 7: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/7.jpg)
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
![Page 8: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/8.jpg)
SADIe Transcoding
8
Banner
Advertisement
Advertisement
MenuMenu
Heading Summary
Main Story
Heading
Summary
Main Story
![Page 9: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/9.jpg)
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
![Page 10: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/10.jpg)
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
![Page 11: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/11.jpg)
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
![Page 12: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/12.jpg)
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
![Page 13: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/13.jpg)
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
![Page 14: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/14.jpg)
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
![Page 15: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/15.jpg)
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
![Page 16: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/16.jpg)
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
![Page 17: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/17.jpg)
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
![Page 18: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/18.jpg)
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
![Page 19: Combining SADIe and AxsJAX To Improve Accessibility](https://reader035.fdocuments.net/reader035/viewer/2022070302/5485b094b4af9f165d8b45be/html5/thumbnails/19.jpg)
Questions?
http://hcw.cs.manchester.ac.uk/