Browsing habits of screen reader users

A while ago I read the article “Observing Users Who Listen to Web Sites“. In that article the authors report that visually impaired users scan web pages with their ears instead of reading them top to bottom. This may not come as a surprise to you if you read Jakob Nielsen’s “How Users Read on the Web” back in 1997. Recently I have had the opportunity to study a number of screen reader users and my observations are similar.

This article is also available in Polish.

Pages are scanned, not read word by word

Why do we scan instead of read? Steven Krug, author of the usability book Don’t Make Me Think talks about users being in a hurry and how users satisfice when browsing for information. This means that we quickly look for and choose the first reasonable option and not necessarily the best one.

If you have employed a decent graphics designer chances are that he/she has used typography, background colors and images to make it easy for sighted users to find the information they want quickly. Sighted users use the graphical layout of a page to get an idea of areas of importance and can thereby make unconscious decisions to focus their attention to specific items.

How do you scan with your ears?

Early screen readers pretty much created a long linear version of a web page. Imagine of you quickly had to get an overview of a movie on a VHS tape but your VCR had no forward or rewind buttons. You would have no option but to watch the movie from the beginning to the end. Fortunately, modern screen readers have features that can break apart the long linear version into different views based on the semantic markup of the information in the web page. The users I observed were mainly using the following features of their screen reader (Jaws) when scanning web pages:

  • The list of headings. When Jaws loads a page it parses all heading elements and displays them in a list. Jaws list of headings dialog Headings are initially presented in tab order and each heading is followed by the heading level. By listening to this list the user can get an overview of what the page is about. The user can also sort headings alphabetically and filter all headings on a specific level. This was one of the first things the users I observed had a look at.
  • The list of links. Similar to the list of headings this list presents all links in the document. Jaws list of links dialog By listening to the links the user may get a different view of what the page is about and more specifically to where he/she can navigate. Shortcut keys specified for links are also presented in the list.

These features where used together with the linear representation of the page. A typical user scenario would be:

  1. Opened web page. Listened to page title from linear representation.
  2. Opened list of headings. Listened to level one headings.
  3. Closed list of headings. Jumped to first heading. Listened to some text.
  4. Opened list of links and listened to some of the items.
  5. Returned to the linear representation.
  6. Opened list of headings and listened to some more headings.
  7. …and so on.

Advanced users crank up the speed of the voice to make this type of page scanning faster.

Implications for html coders

You can probably see where this is heading. Imagine if the web page has no heading markup. In that case the list of headings will be empty and the user is left to the linear representation of the page. The same goes for page links. If the link text is poorly written it is difficult to get any information from the list of links dialog. “But”, you say, “I am using the title attribute to provide a proper link text”. Unfortunately Jaws does not make use of the title attribute with the default settings. Just like with ordinary browsers, many users do not know how to change this setting.

So, here are some suggestions you can use to improve the browsing experience for visually impaired users:

  • Use headings god dammit!
  • Use heading levels to communicate a hierarchy if there is one. Do not go directly from h1 to h3. Otherwise browsing the list of headings may be confusing.
  • Provide meaningful link texts. Sometimes it is enough to extend the scope of the link to a few more words in the surrounding text. Instead of linking “book” in the phrase “the new book by Douglas Adams” you could link “book by Douglas Adams” to provide context. Just don’t overdo it.
  • Use the alt attribute of the image rather than the title attribute of the anchor element when using image links. This makes sure link text is accessible for Jaws users that have not changed their settings to make use of the title attribute. If you don’t provide an alt- or title text Jaws will read part of the image filename which will be ugly. Think “slash www slash img slash p underscore small”.
  • Write for the web.

How to check your website with Fangs

The best way to test your website is of course to get a copy of Jaws and listen to how it sounds. This takes a lot of time. If you haven’t installed Fangs, the screen reader emulator, yet I suggest you do so now. Version 0.80 now has basic functionality for the list of links and the list of headings. Does your website work? I know I have some things to fix.

References

  1. Don’t Make Me Think by Steven Krug.
  2. Observing Users Who Listen to Web Sites by Janice (Ginny) Redish and Mary Frances Theofanos.
  3. Jakob Nielsen’s How Users Read on the Web.

Comments

  1. Markus Thyssen says at 2005-01-13 10:01:

    Great post! This made me understand the real reason for using header tags. Is Jaws the only application that actually makes use of the semantic information?

  2. Pete says at 2005-02-01 09:02:

    Markus, most screen readers use the semantic information of header tags. Other elements are often ignored. There is a discussion on this topic in the comments to my previous post titled “Standards-wielding maniacs”.

  3. Juan Carlos says at 2005-04-08 15:04:

    Ironically you break some accessibility guidelines on your site even though you write about how say a screen reader can help an end user:

    On your pages you have a lot of “Read more” links. But, if you read this out of context, it is not very helpful.

    A screen reader user scanning via links will not like what you have!

    Perhaps what you can do is use the aural CSS class and add some hidden text for each link. Hence, you might have something like this:

    <a href=”whatever”>Read more<span class=”aural”> on article xyz</span></a>

    (notice the space inside the span, not outside, else you’ll get an extra space in your link for users using your styled version.)

    Might add to page weight, but may be useful for screen reader users.

  4. Pete says at 2005-04-11 12:04:

    Juan, your observation is correct. However, I am using the title attribute in the link to to convey the name of the article. Although this isn’t on by default in e.g. Jaws many users enable reading of the title attribute in their screen reader software.

  5. Rich says at 2005-07-11 20:07:

    Jaws stupidly only lets you either use title or alt for images in anchor tags, and there is no way to say : prefer title over alt; if not title use alt, or equivalent. Very silly, but that’s what we got to live with.

  6. Zephyr says at 2006-11-28 02:11:

    Is it just me, or is Jaws a bit lame? The annoying way in which it reads out every dash, even if it’s part of an everyday word. I also thought speech synthesis technology had progressed beyond what Jaws 8.0 offers, but I could be wrong.

  7. John says at 2007-04-05 18:04:

    I have to agree with Zephyr’s comment but i am sure the next versions will be much much better

  8. Jeannie says at 2007-07-17 04:07:

    Hey there, great article. I’d love to see a piece that deals specifically with how screen readers view/make sense of search result pages and what can be done to improve the scannability of SERPs.

  9. Szabolcs (eye-tracking.hu says at 2010-11-10 13:11:

    You can find heatmaps and others on my site, more about this post (eyetracking).

  10. Lucy Dodd says at 2011-02-11 12:02:

    Hi
    I would advice anyone interested in screen reader user behaviour and preference to read through Webaim’s survey. I did a similar survey while I was at the BBC and got the same results.

  11. Debbie Gillespie says at 2011-02-11 23:02:

    As to Jaws reading all the punctuation. You are able to selectively turn this on and off which is indeed, a good thing.

    rather than the headings list I tend to use the quick navigation keys while reading. saves keystrokes and doesn’t interrupt the flow of information to the ears.

  12. Jason Bratcher says at 2012-06-25 09:06:

    Freedom Scientific’s Jaws for Windows (JFW) IS NOT the only screen reader in town that understands true html markup.
    Have a look at NVDA (NonVisual Desktop Access), from NVAccess:
    http://www.nvda-project.org
    or Window Eyes, from GWMicro:
    http://www.gwmicro.com
    .
    Incidentally, i write this comment via FireFox 13 and NVDA; Purs like a kitten;
    Especially in the About:Config screen with that massive table of some near 3000 preferences!

Trackbacks

Leave a comment

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Peter Krantz, peter.krantz@giraffe.gmail.com (remove giraffe).