Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SADIe - Taming The Inaccessible Web


Published on

Presentation describing the SADIe Architecture to the Human Factors Interest Group (HFIG)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SADIe - Taming The Inaccessible Web

  1. 1. SADIe Taming The Inaccessible Web Darren Lunn School of Computer Science
  2. 2. Conclusions <ul><li>Browsing the Web can be difficult for those who are visually impaired </li></ul><ul><li>SADIe can adapt Web pages into a format more suited to visually impaired users </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>
  3. 3. 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>
  4. 4. Implicit Knowledge = Advertisement = Banner = Main Content = Menu
  5. 5. 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>Subtleties of visual presentation can be lost </li></ul></ul>
  6. 6. CNN Example
  7. 7. CNN Example
  8. 8. Assistive Technologies <ul><li>Traversal of content is in a serial “top-to-bottom”, “left-to-right” manner. </li></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>
  9. 9. Solution (1): Text Only Version <ul><li>Produce a duplicate of the page (somehow) that has the same content but in a text only format. </li></ul>
  10. 10. Solution (1): Text Only Version
  11. 11. Solution (1): Text Only Version <ul><li>More accessible than the previous version. </li></ul><ul><li>However, it can still be difficult to access </li></ul><ul><li>All the information is presented, whether it is required or not </li></ul><ul><li>Visual presentation provides the user with cues which are lost </li></ul><ul><li>Creates a mass of information that the user must crawl through </li></ul>
  12. 12. Solution (2): Adapted Version <ul><li>An alternative to text only is to modify and reformat the Web content so that it is more suited to the needs of the user </li></ul><ul><li>Known as Transcoding </li></ul><ul><li>Text only versions give the user everything </li></ul><ul><li>Transcoding tends to be more selective towards the user’s needs </li></ul>
  13. 13. Mobile Device Adaptation BBC News – Standard BBC News – Text Only BBC News – Adapted
  14. 14. Adaptation in Action <ul><li>Identify the page content </li></ul><ul><ul><li>“ Which part is the menu?” </li></ul></ul><ul><li>Do something with it </li></ul><ul><ul><li>Collapse it to a drop down list </li></ul></ul>1 2
  15. 15. Aside: XHTML <ul><li>The language used to write Web documents </li></ul><ul><li>Allows an author to write data for the Web page using simple tags </li></ul><ul><ul><li><p> paragraph </li></ul></ul><ul><ul><li><h1> heading </li></ul></ul><ul><li>XHTML contains no presentation information </li></ul><ul><ul><li>eg </li></ul></ul><h3> Schools allowed to ban face veils </h3> <p class=&quot;p1&quot;> Schools will be able to ban pupils from wearing full-face veils on security, safety or learning grounds under new uniforms guidance issued by ministers. </p>
  16. 16. Aside: Cascading Style Sheets <ul><li>Describes how a browser should display a web page </li></ul><ul><ul><li>Font size/colour </li></ul></ul><ul><ul><li>Screen position of web page content </li></ul></ul><ul><ul><li>Alignment of web content e.g. centre </li></ul></ul><ul><li>There is no data in CSS, only presentation description </li></ul><ul><ul><li>eg </li></ul></ul>p1 {font: 9pt/17pt georgia; margin-top: 0px; text-align: justify; } h3 { font: italic normal 12pt; letter-spacing: 1px; color: #7D775C; }
  17. 17. Aside: XHTML + CSS XHTML Code CSS Code
  18. 18. How Does This Help Us <ul><li>The visual rendering of a Web element informs the user of its purpose </li></ul><ul><li>Users can identify a menu due to its presentation on screen </li></ul><ul><li>The CSS defines the visual rendering </li></ul><ul><li>Identifying the purpose of a CSS definition implicitly identifies the purpose of the Web element </li></ul><ul><li>A single CSS definition is applied to every page within the Website </li></ul>
  19. 19. How Does This Help Us? Page 1 CSS Page 2 Page 3 Page n …
  20. 20. Identifying the CSS Elements <ul><li>SADIe classifies the elements within the CSS </li></ul><ul><li>Elements can be classified as: </li></ul><ul><ul><li>Removable : Things we don’t need and add no value to the page </li></ul></ul><ul><ul><li>Menu : The navigation elements of the page </li></ul></ul><ul><ul><li>High Priority : Content that is the key part of the page </li></ul></ul><ul><ul><li>Medium Priority : Content that adds value to the page </li></ul></ul><ul><ul><li>Low Priority : Content that adds some value to the page </li></ul></ul><ul><li>This is done on a per Website basis </li></ul>
  21. 21. Identifying the CSS Elements Website 1 CSS SADIe Terms … Website 2 CSS Website 3 CSS Website n CSS
  22. 22. SADIe: Modifying Content <ul><li>SADIe Adapts the Webpage based on user requirements </li></ul><ul><li>Users can modify content through: </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>
  23. 23. SADIe Tool (Basic)
  24. 24. SADIe Tool (Advanced)
  25. 25. SADIefied CNN
  26. 26. SADIefied CNN
  27. 27. 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>
  28. 28. 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>
  29. 29. Evaluation Method <ul><li>Only a small number of users available for evaluations </li></ul><ul><li>Use Randomization Testing </li></ul><ul><ul><li>Data analysis techniques suitable for small numbers of users </li></ul></ul><ul><li>Alternatives to traditional parametric testing </li></ul><ul><ul><li>ANOVA </li></ul></ul><ul><ul><li>t-tests </li></ul></ul><ul><li>Produce statistical analysis results comparable to traditional tests when used with large data sets </li></ul><ul><li>Produce reliable results when used with small data sets </li></ul>
  30. 30. ABA Reversal Method <ul><li>Two Conditions; A and B </li></ul><ul><ul><li>Condition A: Unmodified Pages </li></ul></ul><ul><ul><li>Condition B: Pages Adapted With SADIe </li></ul></ul><ul><li>Present the participant with Condition A tasks </li></ul><ul><li>At a random point, switch to Condition B tasks </li></ul><ul><li>At a second random point, revert back to Condition A tasks </li></ul><ul><li>This reduces the influence of external factors on the results </li></ul><ul><ul><li>Participant has time to relax </li></ul></ul><ul><ul><li>Participant becomes familiar with the task at hand </li></ul></ul>
  31. 31. Evaluation Method <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 (Condition B) </li></ul><ul><li>We timed how long it took the user to answer the question </li></ul>
  32. 32. Evaluation Method
  33. 33. 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>
  34. 34. 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 adaptations </li></ul></ul><ul><li>(Semi)-Automation of CSS classification </li></ul><ul><li>More User Evaluations </li></ul>
  35. 35. Conclusions <ul><li>Browsing the Web can be difficult for those who are visually impaired </li></ul><ul><li>SADIe can adapt Web pages by using rendering 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>
  36. 36. Questions?