Low Literacy Resources

Posted on March 15, 2010 by Angela

Because nearly half of the adult population in the U.S. and many other countries have low literacy skills, it’s important to include these people when testing content in documents and web sites written for a “general audience.”

Here are some links to materials that further explore the issue of low literacy:

Posted in Featured | Tagged , , | Comments Off

Tools for Conducting an Accessibility Review

Posted on February 1, 2010 by Angela

As part of my usability consulting practice, I’m sometimes asked to conduct accessibility reviews of client web sites. The purpose of the review is to identify barriers on the page that would prevent someone who has a disability–who is using an assistive technology or some other adaptive strategy–from using or understanding the content on the web page.

Because the Web Content Accessibility Guidelines (WCAG 2.0) are pretty extensive, and because there’s no tool that will automatically identify all the accessibility barriers in a web page, I use a variety of tools to help me figure out where the barriers are and what’s causing them.

Your first choice should be to have people with disabilities test your website to ensure that it’s accessible. Having me or any other consultant who doesn’t need an assistive technology review a web site is a distant second. Doing an expert review can give you a quick, cheap read on the major accessibility barriers that people are likely to encounter. But to know for sure, ask someone who uses a screen reader, screen magnifier or the keyboard only to check your site.

Now, on to the tools I use to conduct accessibility reviews …

WebAIM WCAG 2.0 Checklist

The guidelines are very extensive–regardless of whether you’re shooting for Level A, AA or AAA–and a little hard to understand. I always keep WebAIM’s WCAG 2.0 Checklist open as a quick reference for what I should be looking for and recommendations for meeting the success criteria.

WAVE Toolbar

The Web Accessibility Evaluation Tool is a free service courtesy of the folks over at WebAIM. You can visit the WAVE site and enter the URL of the page you want to check or upload a file if the page isn’t on a publicly available server. But I like using the WAVE toolbar in Firefox. This allows you to evaluate the page as it’s rendered in your browser, which is useful for password-protected or dynamically generated content.

The output of the evaluation shows the original web page with icons that indicate possible accessibility problems and elements you should take a look at to make sure they’re implemented correctly. I like to use it at the beginning of an evaluation just to get a sense of what I’m in for and where I need to pay attention. The Structure/Order View option identifies tells me whether the page uses properly marked-up headings and where they are. The Text-Only View option gives a nice sense of whether a non-styled version of the page makes sense.

Functional Accessibility Evaluator

The Functional Accessibility Evaluator by the University of Illinois at Urbana-Champagne is also a free service. This site produces a report that categorizes the possible accessibility issues (such as “decorative images”), how many instances are on the page, how many instances “fail” and how to correct the failures. Because the FAE uses a combination of guidelines (WCAG, Section 508, Illinois Information Technology Accessibility Act) I don’t use the report it generates verbatim because it may not apply to the guidelines I’m using, but I do find it useful to point out what needs to be investigated further and suggest what to do about it.

Firefox Web Developer Toolbar

I use several of the options in the Web Developer Toolbar. My favorites are Disable Styles (to see if an unstyled page still makes sense), Disable Images, Display Alt Attributes, and Validate HTML.

Contrast Analyzers from Paciello Group and Juicy Studio

The Paciello Group Contrast Analyser is  a great little widget that lets you take foreground and background color samples in a web page and determine whether the ratio is sufficient according to WCAG 2.0 guidelines. But sometimes I find that the color that I’ve selected with the widget’s eyedropper tool isn’t exactly what the page’s style sheet says it is.

The Juicy Studio Contrast Analyzer takes the colors specified in the page’s markup and style sheets to determine the ratio. I think this makes it much easier to communicate the source of the problem with developers, but what I find difficult is using the report–which lists every color combination on the page–to figure out which foreground/background pair it’s referring to.

Two other fantastic resources for picking accessible color combinations: Snook Colour Contrast Check and Contrast-A.

Fangs Screen Reader Emulator

Because I don’t have a vision impairment, I don’t rely on testing with screen readers (like JAWS, Window-Eyes, NVDA, etc.) to identify accessibility barriers. I simply wouldn’t use them the way a person with a vision impairment would. Not to mention the fact that screen readers have a pretty steep learning curve. I prefer to work with a colleague who does have a vision impairment and who does use a screen reader to tell me where she finds barriers. But sometimes it is useful to demonstrate how a screen reader might interpret a given element on a page in order to illustrate why the current approach is a problem. For that, I like to turn to the Fangs Screen Reader Emulator. All I have to do is visit a page, run Fangs, and I get a sort of transcript of how a screen reader is likely to interpret the page. Now here’s a big caveat: screen readers have different “modes”; the mode you’re in will affect what’s read aloud and whether your keystrokes are interpreted as commands to the screen reader or text to go in a website’s form field, for example. You can’t manipulate the mode in Fangs. Even so, I find myself using this nifty tool all the time.

Firebug

How I ever did accessibility reviews without Firebug, I’ll never know. This little Firefox add-on will do lots of things, but I use it to look under the hood of the page’s markup to find out what styles are being applied to a particular element. Here’s an example of how I used it recently. I was reviewing a page and it looked like the headings were placed in images. Not acceptable as far as WCAG 2.0 goes, but it’s accessible for some assistive technology users as long as you include an alt attribute. The problem was, I couldn’t locate the alt attribute; I couldn’t even locate the image in the markup. I used Firebug to figure out that particular <div> element was styled with a background image. It would have taken me a while to figure out which of the multiple style sheets used on that page contained the styling for that particular <div>. Firebug identified it immediately.

Text browsers

In order to see what a non-styled no-images version of the site looks like, I’ll break out Lynx (for PC) and Lynxlet (for Mac). These text browsers are also useful for figuring out whether all links and form elements are accessible. Because Lynx doesn’t handle javascript either, this is a nice method of judging whether or not a page’s scripting degrades gracefully. The version of Lynx I’ve linked to is an already-compiled version which makes it easy for us non-programmers to use. I prefer to use the Mac version because it lets you cut and paste URLs into the terminal window; in Lynx you have to type it all in by hand.

NoSquint

One of the WCAG 2.0 guidelines–1.4.4 Resize text–states that:

“Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”

Because most browsers don’t give you an easy way to resize text by a specific amount, I use the Firefox add-on NoSquint. It adds a little widget to your browser window that lets you specify the percentage to resize.

Links Bookmarklets

Any time I’m trying to convey the notion that text links need to make sense out of context, I wish I had something that would let me pull up a list of links on the page. People seem to get the importance of descriptive link text when they see a list full of “learn mores” and “click heres.” I never had a good way of showing this until I found Subsimple’s link bookmarklets. Just right click on the link to save the bookmark to your favorites. Then trigger the bookmark on the page you want to test. It won’t work if the page uses frames or invalid markup, but if that’s the case you have bigger problems to attend to.

Keyboard

But probably the technique I rely on most often is simply putting the mouse away and tabbing through the site using only my keyboard. I make sure every link and form element takes focus, in a logical way, and can be triggered using the keyboard.

Summary

So those are the tools I use. What tools do you use to conduct an accessibility review?

Posted in Featured | Tagged , | 12 Comments

User Mental Models of Breadcrumbs

Posted on January 13, 2010 by Angela

Why are breadcrumb links included as an element of so many websites?

Ask a developer and she’s likely to say it’s because a textual representation of the hierarchy of the site gives users a sense of place. Like a big red star that says “You Are Here” on a map, breadcrumbs help people figure out where they are in a site and how to navigate it.

Ask a site visitor and you’re likely to get a very different answer. So in 2002 that’s exactly what Kathryn Summers, Cheri Smith and I did. We studied 14 participants with varying web skill levels find information on sites that used breadcrumbs: three sites used location breadcrumbs, one used path breadcrumbs, and one used attribute breadcrumbs on the search results page only. Here’s what we did: we’d ask them to find a particular item, say, the movie “Pitch Black.” Then we asked them to find a related item, like what other horror DVDs the site had. Breadcrumbs were one way they could have navigated to the related item.

We wanted to find out whether people notice, use, and understand what breadcrumbs are.

So, what are breadcrumbs?

Keith Instone defined three types of breadcrumb links; each describes different characteristics of a Web site:

  • Location breadcrumbs indicate the position of the current page within a site’s hierarchy.
  • Path breadcrumbs show the pages the user visited to get to the current page. A page can have different path breadcrumbs because users can take different routes.
  • Attribute breadcrumbs convey product meta-information, such as subject, price, category, style and brand.

Do people notice breadcrumbs?

Yes, they do.

We never asked participants about breadcrumbs until we observed them hovering over a breadcrumb or clicking on it. Only after a task was complete would we ask questions about why they had used that link, what they thought it was, and why it was there.

Thirteen out of 14 participants (93%) clicked on a breadcrumb at least once during the session. Of the 175 tasks given during the study, breadcrumbs were used during 22% of them. Four participants used breadcrumb links repeatedly as a navigation strategy.

Do they use breadcrumbs?

Again, yes. But what we found interesting was why they do or don’t use them: when it seemed that clicking the breadcrumb link would be the fastest way to get to what they wanted.

There are multiple ways to get to a related page in a site, but our users seemed to group them into three approaches:

  • Using the “back” button to get to a previously visited page
  • Clicking on a link
  • Entering a keyword into the search box

Some participants said that the back button was “safer” than breadcrumb links because they knew what page would come up when clicking “back”. Using a breadcrumb link introduces an element of risk since the user may not have visited that page previously. (An interesting aside, visited links didn’t seem to be enough of a visual cue to indicate to users that they had, indeed, visited that page before.) One participant described it this way, “It’s safer to push ‘back’ because I know what I’ve seen. If I push this [breadcrumb link] I don’t know if I’m going to get what I got before. I don’t want to waste any time.”

They sometimes saw breadcrumb links as a way to get to a desired page more quickly. That mitigated that risk of not going back to a previously visited page for some participants. For example we often saw, after clicking through several pages of search results without finding the desired item, participants use breadcrumbs instead of clicking on the back button repeatedly to get back to where they wanted to be. When asked about how she decided to use breadcrumbs instead of the back button, one participant responded, “clicking ‘back-back’ is too much work.” We found that when deciding between using the back button and a link in the breadcrumb trail, participants tended to use whatever they thought was the fastest way.

When the breadcrumb’s link text is exactly what the user is looking for, they’ll often gamble that clicking on the breadcrumb link will get them there faster than any other method, like hitting the back button or going to search.

The scenario where breadcrumbs were used most consistently was during the task of locating other “horror” DVDs. After finding the Pitch Black DVD page on the Walmart.com site, participants were asked to locate other available horror DVDs on the site. Nine out of 14 users (64%) noticed the breadcrumb labeled “horror” and clicked on it during this task. When asked what they had clicked on and why, they generally responded that they were looking for the term, “horror”, happened to find a link to it on their way to using the back button or the search box, and clicked on it.

Do they understand what breadcrumbs are?

Well, yes and no. The answer depends on what type of breadcrumb you’re talking about.

  • Location breadcrumbs: Nine out of 14 participants gave a correct description of location breadcrumbs, saying that these indicate their location in the site. But the other five incorrectly described the location breadcrumbs as the path they took to get here.
  • Describing path breadcrumbs: Only two participants encountered path breadcrumbs during their session. We weren’t able to get them to articulate what they thought these were, so we’ll chalk this one up as “unknown.”
  • Describing attribute breadcrumbs: Two participants encountered attribute breadcrumbs and correctly described them as indicating how they could have gotten to the current page or how to get to more items like this.

How to use breadcrumbs in a web site

Based on watching how people actually use breadcrumb link, we think the study suggests a couple of recommendations for how to implement them in a Web site. These may seem obvious, but I’m consistently surprised by sites that don’t do these basic things:

  • The labels used in a breadcrumb trail should use keywords for which users are likely to be looking.
  • They should be links to enable users to skip to desired content quickly.
  • They should accurately describe the destination page they link to.

This study was conducted back in 2002. Do people use breadcrumbs differently now that they have become a more established convention and folks are more likely to know how they work? How do people use breadcrumbs on your site?

References

For more research on the use of breadcrumb links, check out the following sources:

Posted in Featured | Tagged | 1 Comment