Lost in Translation:


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lost in Translation:

  1. 1. Identifying Barriers to Information Access for Diverse Web Users Rachel Dols, Laura Hulscher, Tara Newberry, & Kyunghye Yoon
  2. 2. • Class project for Web Accessibility course • Redesign a website based on usability & accessibility testing • • Original plan was to work with professional accessibility testing organization Grant from FLDS required us to publish and present our project
  3. 3. • • Accessibility barriers on library websites Information access needs of screen reader users
  4. 4. • • • Usability testing approach 5 websites were tested: 3 library, 2 nonlibrary Testing Procedure: • Pre-test interview • Usability test • Post-test interview
  5. 5. • • • Participants perform assigned tasks on a real product, such as a website Success or failure with tasks indicates whether product is easy to use “Think-aloud protocol” captures participants’ train of thought
  6. 6. • Think-aloud protocol was adapted for screen reader users (listen first, then speak) • Tasks were less specific, more exploratory • Our goal was accessibility, not just usability • Accessibility = Usability for people with disabilities
  7. 7. • • • Recruited through ACTC Disability Services and Minnesota SSB Participation requirement was using screen reader for browsing. Also tested with three sighted people for comparison purposes
  8. 8. • Web access • Browsing patterns • Strategies to locate specific items • Comparison to automated tools
  9. 9. • • Participants frequently visit sites on topics of interest: music, theater, fashion None of the participants were frequent users of library websites.
  10. 10. • Screen readers: • 5 participants regularly use JAWS for Windows • 1 regularly uses VoiceOver (for Mac) • Audio demo
  11. 11. Three main methods of exploring a new site: • Links list • Headings list Links list example • “Scrolling” using the down arrow
  12. 12. • • • “Ctrl + F” key combination (word search) was a common browsing technique Participants would guess at a word they expected should be on the page, e.g. “Databases,” and search for it using Ctrl + F. A few participants used links list search more often than Ctrl + F search.
  13. 13. • • • AChecker is an online tool which automatically detects accessibility barriers (http://achecker.ca/checker/index.php) We used AChecker to evaluate the same websites tested in the usability test. There was little to no agreement between AChecker and the human participants.
  14. 14. Website Number of coding errors Library #1 13 Library #2 24 Library #3 13 Non-library #1 41 Non-library #2 14 • The sites with the fewest “errors” were hardest to navigate, and vice versa. • The barriers most frequently encountered by the human participants were not mentioned by AChecker.
  15. 15. • Difficulty using the catalog • Navigation and site architecture • Dynamic design elements
  16. 16. • Problems: • Finding the catalog • Scanning search results list • Using the advanced search function
  17. 17. • Most participants had difficulty finding the catalog • When looking for materials, they mistook other areas of the site for the catalog: • References to the catalog search tool in other content (FAQs and blogs) • Curated lists of materials (e.g. the “Books” page)
  18. 18. ...Heading level one Books Select a book in the scrolling carousel below, or check out one of our book lists. Graphic Holy Orders Graphic Weaponized Graphic Brilliance Graphic The Age of Ice Graphic Sea Creatures Graphic Babayaga Graphic Snow Hunters Graphic Five Star Billionaire Graphic The Love Affairs of Nathaniel P Graphic Sweet Thunder Graphic The Maid's Version Graphic Kill City Blues Graphic The Crossing Graphic Lost Girls Graphic Saving the Season Graphic Mother Daughter Me Graphic Eleven Rings Graphic Deal with the Devil Table with two columns and seven rows Graphic eBooks, eAudiobooks, emagazines Heading level three Link eBooks, eAudiobooks, eMagazines Access our collection of electronic materials. Graphic The Maid's Version Heading level three Link New Fiction September two thousand thirteen Graphic These Few Precious Days Heading level three Link New Nonfiction September two thousand thirteen Graphic The March on Washington Heading level three Link Civil Rights Movement dash fifty th Anniversary Books about the Civil Rights Movement Graphic new audiobooks Heading level three Link New Audiobooks New audiobooks at the library. Graphic popular fiction Heading level three Link Popular Fiction The most popular fiction titles at our libraries....
  19. 19. • Search results are time consuming to evaluate with a screen reader because every word is read in the order it appears: Search Result #1. Barron's encyclopedia of cat breeds : a complete guide to the domestic cats of North America by Helgren, J. Anne. Keep a list Place Hold (Request) BOOK Title Barron's encyclopedia of cat breeds : a complete guide to the domestic cats of North America 2nd edition. Author Helgren, J. Anne. Call number Publisher 636.8 HEL Edition Pub date 2013 Holdings 5 copies at Main Branch, Bellwood Library, Northtown Branch, and Apple Hill Branch Updated with the latest information on all recognized feline breeds, this valuable reference source includes a survey of feline history and evolution, a detailed description of the attributes that make a purebred cat, a summary of ... Search Result #2. Pete the cat and his four groovy buttons by Litwin, Eric. Keep a list Place Hold (Request) BOOK Title: Pete the cat and his four groovy buttons 1st ed. Author Litwin, Eric. Call number Publisher E LIT Edition Pub date 2012 Holdings 11 copies at Main Branch, Bellwood Library, Northtown Branch, and Apple Hill Branch, Lake Green Branch, Crossroads Library Pete the Cat is wearing his favorite shirt--the one with the four totally groovy buttons. But when one falls off, does Pete cry? Goodness, no! He just keeps on singing his song--after all, what could be groovier than three groovy ...
  20. 20. Solution • Skimming results is much simpler with well structured HTML • Users can easily tab from item to item when titles have been formatted as headings From outline view generated by WebAIM toolbar (http://webaim.org/resources/wave/#toolbar)
  21. 21. • Combo boxes are challenging to interpret and use when browsing with a screen reader • One example: Layout choices can obscure filtering options Location of buttons is misleading (participants didn’t think to look for additional filters below)
  22. 22.  Lack of proper hierarchical headings structure  Poor link labeling ◦ Non-intuitive anchor text ◦ Lack of context and description
  23. 23. Left: Example of misleading anchor text. Right: Examples of context that relies on visual cues for comprehension.
  24. 24. Solutions More often than sighted users, visually impaired users tend to predict or guess the words and phrases used in the site.  Make site text intuitive and meaningful Example: The highlighted text is not specific enough. Changing it to “Make a Research Appointment” would help alleviate confusion.
  25. 25. Libraries, particularly public libraries, appear to use the home page to appeal to every possible user, leading to an excessive amount of information for a screen reader to parse.  Excessive amount of links The public library site tested had 185 links on the home page alone. In comparison, the 2 academic libraries had 109 and 75.
  26. 26.  Solutions Minimalist design and content approach Example: Minimalist library home page design
  27. 27.  Strategic use of the home page ◦ Well-designed navigation menu backed by logical information architecture ◦ A well-structured site should be organized hierarchically. The content should be divided first into very broad headings, such as “Catalog,” “Events,” “About Us”.
  28. 28. Three major problems in this category: • Drop-down menus • Comboboxes • Tabpanels
  29. 29. • • • require mouse-over to reveal hidden links cannot be accessed with keyboard only Menu root shows up in links list Left: Cursor hovering shows menu. Right: Tab key highlights link, but no menu.
  30. 30. Solutions • • WAI-ARIA (Accessible Rich Internet Applications) developed new HTML 5 tags for accessible menus. • These work very well, but still fairly new, might not be widely supported yet. Alternatively, make the menu root a real link. • It can lead to a page listing the hidden menu links. link to separate page
  31. 31. Two versions of the same combobox from Library Site #1. One worked, and the other did not. Bad… Good!
  32. 32. The accessible menu has a button. This makes it possible for keyboard users to browse the menu without accidentally selecting something.
  33. 33. When selected, the tabs change only part of the page while the page’s URL stays the same. Example: http://library.stkate.edu/ • • Participants were confused because “nothing happened” when they selected the links. Problematic because link doesn’t go to new page. • Screen reader only alerts users to new URL. They expected the new-page sound but didn’t hear it.
  34. 34. Solutions WAI-ARIA (Accessible Rich Internet Applications) Authoring Practices 1.0 • Includes guidelines for accessible tabpanels • Makes use of new HTML5 tags • Screen reader can recognize tabpanel and tell user how to move around in it.
  35. 35. Suggestions for further research: • • • Test on a wider variety of screen reader brands Expand usability testing to other disability groups, not just visually impaired Larger, more representative sample of library websites should be tested
  36. 36. AChecker tool http://achecker.ca/checker/index.php FANGS screen reader emulator https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-readeremulator/ Just Ask: Integrating Accessibility Throughout Design http://www.uiaccess.com/JustAsk/index.html WebAIM (Web Accessibility In Mind) http://webaim.org/