Your SlideShare is downloading. ×
0
SADIe Structural-Semantics for Accessibility and Device Independence Darren Lunn
The Web… <ul><li>The World’s largest repository of information </li></ul><ul><li>Designed with a focus on presenting infor...
Implicit Knowledge = Advertisement = Banner = Main Content = Menu
Assistive Technologies <ul><li>Visually impaired users use assistive technologies, e.g. Screen Readers </li></ul><ul><ul><...
CNN Example
Assistive Technologies <ul><li>Traversal of content is in a serial “top-to-bottom”, “left-to-right” manner. </li></ul><ul>...
Existing Solution: Transcoding <ul><li>A method of adapting and reformatting Web content so that it is suitable for a wide...
Heuristic Transcoding <ul><li>Use general rules and heuristics to find areas of the web page </li></ul><ul><li>Once an are...
Heuristic Transcoding <table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; class=&quot;cnnCeiln...
Heuristic Transcoding <ul><li>General enough to be applied to a large number of web pages </li></ul><ul><ul><li>All CNN pa...
Semantic Transcoding <ul><li>Uses annotations to add metadata to the Web page in order to explicitly state the meaning of ...
Semantic Transcoding <ul><li>Very accurate </li></ul><ul><ul><li>We can modify the page layout but as long as the annotati...
CSS <ul><li>Cascading Style Sheets support the separation of presentation from content </li></ul><ul><ul><li>Information a...
SADIe <ul><li>Semantics are implicitly encoded within the visual presentation of the Web page </li></ul><ul><li>Cascading ...
Annotating The CSS Upper Level Ontology Extended Ontology SADIe Application cnnCeilnav cnnBodyText cnnBottomNav cnnCSS
SADIe Implementation <ul><li>Implemented as a proxy </li></ul><ul><ul><li>All browsing requests from the client pass throu...
SADIe Transcoder
SADIefied CNN
Evaluation <ul><li>We want to show that using SADIe decreases the time it takes to find information on the page </li></ul>...
Evaluation Hypothesis <ul><li>H0 :– The time it takes to complete a fact based task on a Webpage is the same regardless of...
Evaluation Methodology <ul><li>20 pages that had similar content that was predominantly text based </li></ul><ul><ul><li>N...
Evaluation Results <ul><li>So far we have evaluated SADIe with a single user </li></ul><ul><li>Results are encouraging and...
Further Work <ul><li>This is still preliminary work, and much remains to do </li></ul><ul><li>Analysis of coping strategie...
Conclusions <ul><li>Browsing the Web can be difficult for those who are visually impaired </li></ul><ul><li>SADIe can appl...
Questions? http://www.cs.manchester.ac.uk/img/sadie
Upcoming SlideShare
Loading in...5
×

Structural Semantics for Accessibility and Device Independence

351

Published on

Presentation describing the SADIe transcoding platform to the Information Management Group (IMG)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
351
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Structural Semantics for Accessibility and Device Independence"

  1. 1. SADIe Structural-Semantics for Accessibility and Device Independence Darren Lunn
  2. 2. The Web… <ul><li>The World’s largest repository of information </li></ul><ul><li>Designed with a focus on presenting information in a visual manner </li></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Animations </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><li>Some knowledge is only available implicitly from how the page looks </li></ul>
  3. 3. Implicit Knowledge = Advertisement = Banner = Main Content = Menu
  4. 4. Assistive Technologies <ul><li>Visually impaired users use assistive technologies, e.g. Screen Readers </li></ul><ul><ul><li>Render pages sequentially in audio </li></ul></ul><ul><ul><li>Achieved by accessing the underlying HTML code </li></ul></ul><ul><li>But focus on visual presentation rather than content hampers this </li></ul><ul><ul><li>Particularly if attention is not paid to coherent design </li></ul></ul><ul><ul><li>Tags and markup can be abused (e.g. using <h2> for large, bold, rather than headers) </li></ul></ul><ul><ul><li>Subtleties of visual presentation can be lost </li></ul></ul>
  5. 5. CNN Example
  6. 6. Assistive Technologies <ul><li>Traversal of content is in a serial “top-to-bottom”, “left-to-right” manner. </li></ul><ul><ul><li>Based on the underlying HTML code. </li></ul></ul><ul><li>Important information may not be encountered until later on. </li></ul><ul><li>Also, information such as menus or navigation may be repeated for every page on a site </li></ul><ul><ul><li>This can prove tiresome if the user has to wait for the reader to read the menu each time a new page is visited. </li></ul></ul><ul><li>Chunked pages and non-linear presentation further complicate matters </li></ul>
  7. 7. Existing Solution: Transcoding <ul><li>A method of adapting and reformatting Web content so that it is suitable for a wide range of client devices </li></ul><ul><li>Heuristic Transcoding - Uses general rules and heuristics to find areas of the web page </li></ul><ul><li>Semantic Transcoding - Uses annotations to add metadata to the Web page in order to explicitly state the meaning of the elements </li></ul>
  8. 8. Heuristic Transcoding <ul><li>Use general rules and heuristics to find areas of the web page </li></ul><ul><li>Once an area is found, then modify it in some way </li></ul><ul><li>Eg If (row at the top of table && Number of characters between <a> tags > Number of characters between <p> tags) then (Element is a page menu so do something) </li></ul>
  9. 9. Heuristic Transcoding <table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; class=&quot;cnnCeilnav&quot;> <tr valign=&quot;middle&quot; height=&quot;22&quot; > <td><a href=&quot;/&quot;>Home</a></td> <td><a href=&quot;/WORLD/&quot;>World</a></td> <td><a href=&quot;/US/&quot;>U.S.</a></td> <td><a href=&quot;/WEATHER/&quot;>Weather</a></td> <td><a href=&quot;http://money.cnn.com/index.html&quot;>Business</a> . . . </tr> <ul> <li><a href=&quot;/&quot;>Home</a></li> <li><a href=&quot;/WORLD/&quot;>World</a></li> <li><a href=&quot;/US/&quot;>U.S.</a></li> <li><a href=&quot;/WEATHER/&quot;>Weather</a></li> <li><a href=&quot;http://money.cnn.com/index.html&quot;>Business</a></li> . . . </ul>
  10. 10. Heuristic Transcoding <ul><li>General enough to be applied to a large number of web pages </li></ul><ul><ul><li>All CNN pages follow this pattern, as do other pages that have a similar layout template </li></ul></ul><ul><li>Can be inaccurate if the page is slightly different from the pre-existing rules </li></ul><ul><ul><li>Eg CNN inserts an additional row containing advertisements </li></ul></ul>
  11. 11. Semantic Transcoding <ul><li>Uses annotations to add metadata to the Web page in order to explicitly state the meaning of the elements </li></ul><ul><li>Eg </li></ul><menu> <table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; class=&quot;cnnCeilnav&quot;> <tr valign=&quot;middle&quot; height=&quot;22&quot; > <td><a href=&quot;/&quot;>Home</a></td> <td><a href=&quot;/WORLD/&quot;>World</a></td> <td><a href=&quot;/US/&quot;>U.S.</a></td> <td><a href=&quot;/WEATHER/&quot;>Weather</a></td> <td><a href=&quot;http://money.cnn.com/index.html&quot;>Business</a> . . . </tr> </menu>
  12. 12. Semantic Transcoding <ul><li>Very accurate </li></ul><ul><ul><li>We can modify the page layout but as long as the annotations remain, the transcoding will work. </li></ul></ul><ul><li>Every Web page must be annotated limiting the number of pages that can be transcoded </li></ul><ul><ul><li>Time consuming </li></ul></ul><ul><ul><li>Issues of document ownership </li></ul></ul>
  13. 13. CSS <ul><li>Cascading Style Sheets support the separation of presentation from content </li></ul><ul><ul><li>Information about fonts, colour, positioning etc is held in the style sheet. </li></ul></ul><ul><li>Style Sheets often have some implicit semantics </li></ul><ul><ul><li>This semantics is encoded in the names of the elements rather than in some formal structure. </li></ul></ul><ul><ul><li>Use of terms like header , footer or nav </li></ul></ul><ul><ul><li>Layout and presentation can add implicit meaning </li></ul></ul>
  14. 14. SADIe <ul><li>Semantics are implicitly encoded within the visual presentation of the Web page </li></ul><ul><li>Cascading Style Sheets define the visual presentation of the pages within a Website </li></ul><ul><li>Defining the role of the Cascading Style Sheet element, by association, defines the role of the Web page element </li></ul><ul><li>Gain the best of both worlds </li></ul><ul><ul><li>Accurate transcoding in the same manner as Semantic Transcoding </li></ul></ul><ul><ul><li>Element definitions of a single CSS can be applied to multiple Web pages in a manner similar to Heuristic Transcoding </li></ul></ul>
  15. 15. Annotating The CSS Upper Level Ontology Extended Ontology SADIe Application cnnCeilnav cnnBodyText cnnBottomNav cnnCSS
  16. 16. SADIe Implementation <ul><li>Implemented as a proxy </li></ul><ul><ul><li>All browsing requests from the client pass through the proxy, where transformation takes place. </li></ul></ul><ul><ul><li>Proxy rewrites HTML pages to provide accessible version of content </li></ul></ul><ul><li>Allows users to: </li></ul><ul><ul><li>Defluff – Removing non-essential elements </li></ul></ul><ul><ul><li>Re-order – Promoting elements that are considered important to the top of the page </li></ul></ul><ul><ul><li>Toggle Menus – Show/hide navigational menus </li></ul></ul>SADIe Application
  17. 17. SADIe Transcoder
  18. 18. SADIefied CNN
  19. 19. Evaluation <ul><li>We want to show that using SADIe decreases the time it takes to find information on the page </li></ul><ul><li>Four methods of testing information retrieval on Web pages: </li></ul><ul><ul><li>Simple Fact Question : Involves the user finding a fact on the that is either true or false. </li></ul></ul><ul><ul><li>Judgement Question : Involves the user viewing a Website and providing a judgement </li></ul></ul><ul><ul><li>Comparison Of Fact Questions : Involves the user finding a series of facts and then answering a question that is either true or false. </li></ul></ul><ul><ul><li>Comparison Of Judgement Questions : Involves the user viewing a Website, comparing the facts and reaching a conclusion. </li></ul></ul>
  20. 20. Evaluation Hypothesis <ul><li>H0 :– The time it takes to complete a fact based task on a Webpage is the same regardless of whether the page that is used is SADIefied. </li></ul><ul><li>H1 :– The time it takes to complete a fact based task on a Web page using a SADIefied page is less than the time it takes to complete a task using a non-SADIefied page. </li></ul>
  21. 21. Evaluation Methodology <ul><li>20 pages that had similar content that was predominantly text based </li></ul><ul><ul><li>News e.g. CNN, BBC, New York Times… </li></ul></ul><ul><ul><li>Blogs e.g. Blogger, Xanga… </li></ul></ul><ul><li>Asked the user to find facts that were as similar for each page possible </li></ul><ul><ul><li>Eg for news sites “What is the headline of the first story?” </li></ul></ul><ul><li>The user was presented with a page one at a time, some of which were SADIefied </li></ul><ul><li>We timed how long it took the user to answer the question </li></ul>
  22. 22. Evaluation Results <ul><li>So far we have evaluated SADIe with a single user </li></ul><ul><li>Results are encouraging and are significant using Randomization Testing… </li></ul><ul><li>… but we would like more users to support our results. </li></ul>
  23. 23. Further Work <ul><li>This is still preliminary work, and much remains to do </li></ul><ul><li>Analysis of coping strategies </li></ul><ul><ul><li>Informing our transformations and transcodes </li></ul></ul><ul><li>(Semi)-Automation of mappings for stylesheets </li></ul><ul><li>Richer upper level ontology </li></ul><ul><ul><li>Currently the ontology is essentially a taxonomy </li></ul></ul><ul><li>More User Evaluations </li></ul>
  24. 24. Conclusions <ul><li>Browsing the Web can be difficult for those who are visually impaired </li></ul><ul><li>SADIe can apply transcoding by using implicit information extracted from the CSS </li></ul><ul><li>Initial evaluation results are promising and show that SADIe can help visually impaired users reach content more quickly </li></ul><ul><li>More work still needs to be done </li></ul>
  25. 25. Questions? http://www.cs.manchester.ac.uk/img/sadie
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×