Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
The Web
• Focus on presenting information visually
  – Images
  – Columns
  – Chunks
• Some knowledge is only available im...
Implicit Information

Advertisement


Banner


Menu


Main Content




                                      4
Assistive Technologies
• Traversal of content is serial.
• Important information may not be
  encountered until later on.
...
Transcoding
• Adaptation of content from one format to
  another.
• Rules / Patterns.
  – Can adapt a large number of page...
SADIe Approach
• The visual rendering of a Web element
  informs the user of its purpose.
• The CSS defines the visual ren...
SADIe Transcoding

             Heading
          Advertisement
             Banner
            Summary
              Menu...
The Web 2.0
• Content can change dynamically without
  page refreshes.
• Documents are no longer static but
  interactive....
ARIA
• Accessible Rich Internet Applications.
• Allows developers to mark-up dynamic and
  interactive regions of content
...
Google AxsJAX
• Open source framework to insert ARIA into
  documents dynamically.
• Collection of JavaScripts that contai...
Content Navigation Rules
• A key part of the framework.
• Uses XML and XPath expressions to define
  where ARIA should be ...
Using CSS To Define XPaths
• Xpath can use absolute locations.
  – /html/body/table[3]/tbody/
• XPath can also use element...
Use SADIe To Create CNR
• Use CSS annotations to identify areas of
  content.
• Use annotations to generate the XPath and
...
Consistent Key Presses
• N: move to next chunk of information.
• P: move to previous chunk of information.
• M: jump to me...
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
  – Demonst...
Summary
• SADIe transcodes content based upon the
  meaning of the visual rendering.
• AxsJAX allows ARIA statements to be...
Questions?

http://hcw.cs.manchester.ac.uk/
Nächste SlideShare
Wird geladen in …5
×

Combining SADIe and AxsJAX to Improve the Accessibility of Web Content

508 Aufrufe

Veröffentlicht am

The advent of Web 2.0 technologies has allowed once static Web documents to be transformed into online interactive applications. To facilitate the accessibility of this dynamic content, Google have developed the AxsJAX framework that can insert Accessible Rich Internet Applications (ARIA) statements into the content dynamically. Such statements allow assistive technologies to interact with dynamic content and make it accessible to users. SADIe is an approach that uses semantic annotations of a Website's Cascading Style Sheet (CSS) to drive a transformation process that can improve access to Web pages for visually impaired users who use a screen reader. Previously SADIe transcoded static pages by refactoring the content into a format more suited to the sequential audio output of a screen reader. In this paper we present a prototype SADIe transcoder that uses CSS annotations to generate AxsJAX framework code and insert it into Web pages. Such an approach allows users to access static content using a consistent set of key presses in a manner akin to an online application. This demonstrates the flexibility of the SADIe approach as the same annotations can be used to generate an alternative transcoding format. It also supports the use of SADIe as a lightweight method for allowing Web designers to make use of AxsJAX without requiring knowledge of the underlying AxsJAX technologies.

Veröffentlicht in: Technologie, Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Combining SADIe and AxsJAX to Improve the Accessibility of Web Content

  1. 1. Combining SADIe and AxsJAX To Improve Accessibility Darren Lunn, Simon Harper and Sean Bechhofer
  2. 2. 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
  3. 3. The Web • Focus on presenting information visually – Images – Columns – Chunks • Some knowledge is only available implicitly from the page rendering. 3
  4. 4. Implicit Information Advertisement Banner Menu Main Content 4
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. SADIe Transcoding Heading Advertisement Banner Summary Menu Heading Summary Main Story Main Story Advertisement 8
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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=quot;cnnNavigationquot;> 13
  14. 14. 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
  15. 15. 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
  16. 16. SADIe + AxsJAX Pressing S reads out the summary but does not loose the focus of the story 16
  17. 17. 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 17
  18. 18. 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
  19. 19. Questions? http://hcw.cs.manchester.ac.uk/

×