Accessibility Review: PetsContained.com

Disabled consumers often face great challenges when browsing and making purchases online. Perhaps as many as ten percent of online shoppers have a disability, such as low-or-no vision or an inability to use a keyboard, that can make it difficult to understand content and navigate websites.

“The Accessibility Review” is a monthly series that attempts to help ecommerce merchants improve the accessibility of their websites. For this month, we visited Pets Contained, an online store that sells cages, fences and crates for pets. Owners Ken and Belinda Fagin requested this accessibility review.

There are a number of different ways to approach an accessibility audit. In last month’s review of Lori’s Wigsite, I walked through the technical issues, including layout, image text, and link changes, providing a straightforward way to highlight accessibility problems on a site. In this review, however, I’m going to take a different approach.

In order to uncover the problems exhibited by Pets Contained, I attempted to navigate the site using the persona of blind customer. (Pets Contained also poses significant barriers to users who are keyboard-only sighted users, but the sheer length of a persona review prevents me from going through more than one possibility.)

Establishing a disabled persona helps to demonstrate problems from a human-focused perspective. It shows not just the technical aspect of what’s wrong on a site, but what kinds of problems will affect disabled users trying to navigate the site.

Getting Around Without Sight

PetsContained.com, home page screenshot.

I begin shopping at Pets Contained using the JAWS (Job Access With Speech) screen reader coupled with Internet Explorer 7. I quickly encountered difficulties, since the title announced by JAWS doesn’t contain the words “Pets Contained.” However, after checking that the URL I typed into the address bar is correct, I determine I am in the right place.

I find the links at the top of the site, which is comforting. Knowing that there’s top-of-the-page access to a site map and the home page, along with the shopping cart and a site search is very promising. The search input is not labeled, however, so when I tabbed into it all I heard was “edit.” But I continued to the next tab location, guessing that an input at this point in the site was probably a search.

My plan is to purchase a gift certificate, so I go into “forms” mode, enter “Gift Certificate” in the search box, and submit the form.

JAWS helpfully informs me that the page I’ve arrived at is titled “Search Results,” but it doesn’t indicate whether there are any results. It also informs me that the page contains 75 links. Not knowing whether these are search results or navigation, I start tabbing through the links.

The links are presented as graphics, but since they have alt attributes there is information there for blind users. Unfortunately, the alt attributes are extremely verbose, and not particularly indicative of where the link will be going.

To illustrate this, sighted visitors would read:

Home
Petsafe Dog Fences
Standard Aboveground
Standard Underground

For the same four links, sight-impaired visitors hear:

Electronic & WiFi Wireless Dog Fences, Dog Bark Collars & Training Collars, PetSafe, Innotek, Sportdog
PetSafe Standard Aboveground Dog Fence – Up to 10 acres – Electronic Dog Containment System
PetSafe Standard Underground Dog Fence – Up to 10 acres – Electronic Dog Containment System

You may notice that blind visitors hear only three links in this space; this is because the links are in a different order in the code than they appear on the page. The sub-links of the “Petsafe Dog Fences” appear before the headings, so links seem to be placed in random order on the page.

For Experienced Users Only

Despite the fact that a search is available, I still cannot tell whether my search was successful. Had I skipped the search and attempted to navigate through the site menu originally, I would have had much the same experience. Most sight-impaired users would probably give up at this point.

An experienced user of a screen reader is likely to have a few tricks up his or her sleeve for getting around an unfamiliar page that doesn’t offer any accessibility support. For the sake of this test, rather than continue the frustrating process of working through what a blind visitor might think is a navigation menu, I decide to try some alternate methods of navigation.

One common way of finding more information is to do an in-page search for text. I know that the words “gift certificates” should appear on the page, either as a result or as an indication of what I searched for, so I search the entire page using the JAWS “find in page” feature.

Using this method, I locate the link for gift certificates (which was the sole search result) and follow it.

As a blind visitor, I don’t want to go through that menu again; I want to skip to the content. There is no means provided by the site to do so, such as a skip link or any form of page heading, so I perform another search in the page for “gift certificates.” Luckily, the phrase appears in the content area, so I find it.

The only discernible link to someone using a screen reader on this page is the link labeled “Gift Certificate.” Although a sighted user can see the “Add to Cart” and “Buy Now” buttons, these image-only buttons have no alt attributes. JAWS reads them as “ec/a2c.gif” and “ec/buynow.gif.” The second image might be understandable, but since it’s pronounced as a single word, it’s certainly not a guarantee. But, fortunately, these links all go to the gift certificate details page.

Making the Purchase

Using “form inputs,” I am able to find the gift certificate value option box. Going into forms mode, I select the amount I want to purchase the gift certificate for. Using “form inputs” again, I find the quantity option, where I type “1.” I activate the “Buy Now” button (which is correctly labeled) and find myself at the beginning of the checkout process. The rest of my visit is spent mostly in forms mode.

None of the form fields are labeled, but JAWS guesses fairly well what text is associated with a given form field. With the “Signup for our mailing list” check box, however, all JAWS announces is that there’s a checkbox that isn’t checked. Since the form is nested in a table, I try Alt+Ctrl+Left Arrow to see if the text is in the previous cell. This works, so I now know that the checkbox refers to signing up for Pets Contained’s mailing list.

I finish entering my information, and hit “Continue.”

Because the shipping and payment page constantly mixes plain text with forms, it takes a couple passes before I clearly understand what I need to do on this page. In the first pass, I read all the text, and get an idea of what the form fields will be. In the second pass, I switch into forms mode so I can actually enter information into the form fields.

After successfully entering the information, I once again hit “Continue.”

The “place order” page also mixes plain text with forms, but I am able to enter all the information successfully and complete an order.

Summing Up the Shopping Experience

Although I was able to complete a purchase using the persona of a sight-impaired user, it’s not likely that a real-life disabled customer would stay long on this site. Completing the purchase was relatively painless, but finding a product and generally navigating the site posed a multitude of problems.

While Pets Contained may not be inaccessible in absolute terms, it’s certainly not very friendly to the blind. There are plenty of websites on the Internet that offer far fewer challenges to disabled visitors. I was successful because I know how to use a screen reader and applied some creative methods to get around the site. A less experienced or less creative shopper may not have been as successful.

How Pets Contained Can Improve Accessibility

There are a few simple things that would greatly increase the accessibility of Pets Contained. Here are five key recommendations:

Simplify the alt attributes in the main navigation menu to make them a usable navigation system for screen reader users.
Re-order the main navigation menu content so that sub-link groups will be read after their respective parents.
Edit templates to provide proper HTML headings in content areas, so screen reader users can jump easily to those areas.
Add skip links in the header region to provide the same functionality for screen readers that don’t support heading navigation.
Rewrite forms to provide explicit labels, and reorganize forms to separate non-form text from the forms themselves.

The Limitations of Persona Reviews

A persona gives you a practical, realistic impression of a single user’s potential experience on a website. However, it doesn’t provide the breadth of information that can be communicated in a more abstract report. A high-quality accessibility or usability audit should ideally include both. An abstract audit gives you the hard facts about a website’s accessibility; but a persona study gives a humanistic understanding of what’s going on.