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.
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.
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:
- Opened web page. Listened to page title from linear representation.
- Opened list of headings. Listened to level one headings.
- Closed list of headings. Jumped to first heading. Listened to some text.
- Opened list of links and listened to some of the items.
- Returned to the linear representation.
- Opened list of headings and listened to some more headings.
- …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
- Don’t Make Me Think by Steven Krug.
- Observing Users Who Listen to Web Sites by Janice (Ginny) Redish and Mary Frances Theofanos.
- Jakob Nielsen’s How Users Read on the Web.