Disabled Internet users 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 offers a candid assessment of an online store, providing insight for ecommerce merchants to improve the accessibility of their websites. For this month, we visited Lori’s Wigsite, an online store that specializes in wigs and hairpieces. Its owner, Lori Roddey, requested this accessibility review.
Lori’s Wigsite is a good example of a website that, though not built with accessibility in mind, nevertheless is able to offer a reasonable degree of accessibility support. I didn’t review the shopping cart itself, but the rest of the site has surprisingly reasonable levels of accessibility.
Now, I don’t want to give the impression that Lori’s Wigsite was constructed with accessibility best practices. It’s not. Nonetheless, a disabled visitor is still likely to succeed at his or her goals when visiting this site if they have a little patience. This is not a review judging where Lori’s Wigsite comes short of meeting web guidelines for accessibility. Instead, this review looks at what problems a disabled user will encounter when visiting the site.
Consider the Site Layout
One of the first things I reviewed was the overall site layout. This site was structured using tables. From an accessibility perspective, this could be pretty bad. However, the tables in use are constructed in such a manner that they arrange in proper linear formats. That is, the cells are placed in an order that will match the logical order in which the content should be read. It’s still not ideal, but it’s usable.
Just glancing over the site, I immediately observed that there’s a heavy use of images for form controls and links. Many crucial functions are built using images. This includes “View Cart,” “Add to Cart” and the site search, among others. This means alt attributes will definitely be required. In fact, for the most important places, Lori’s Wigsite does use effective alt attributes. They may not exactly match the text of the images, but they convey the critical information and will be effective for users of screen readers.
There are a few exceptions, of course. Since the site has been built using tables for layout, it’s also employing a large of spacer images. These images have no alt attributes at all. This might seem like the right strategy, but for best accessibility an ornamental or spacing image should be provided with an empty alt attribute. Screen readers will skip over an image with an empty alt attribute, but some screen readers will read the image’s file name when no alt attribute has been provided. This significantly increases the extraneous “noise” on a website, which will significantly reduce the ability of a visitor to find necessary information.
Use of Alt Attributes
In general, the alt attribute for an image with text should be an exact match to the text on the image. This isn’t an absolute rule as sometimes it can be beneficial to re-order or re-phrase the text on the image for easier comprehension in the alt attribute. Images can have meaning conveyed through placement and text size that is better conveyed by word order and punctuation in linear text. However, the two should be pretty close. The logo on this site has taken the alt attribute and filled it with an excess of text. This is unnoticeable to most users, but tedious for screen reader visitors.
The biggest accessibility problems this site will pose are for visitors who are keyboard dependent. This includes both sighted and non-sighted visitors, although the problems will be slightly different. Non-sighted visitors, due to a lack of heading elements to structure the page and a lack of skip links to aid them in navigating the page, are going to have to navigate the page by tabbing through each individual link on every page. With an extensive left sidebar menu (which comes before the content), a screen reader shopper will have to tab 44 times to navigate all the way to the content area.
Sighted visitors who are unable to use a mouse will have to do exactly the same thing to get through the page. But they have an additional problem, as well. Since links on this site don’t change appearance in any significant way when they receive focus from the keyboard, it is very difficult for a keyboard navigator to actually keep track of where they are on the page. Non-sighted visitors will have the link text read to them, making it evident what a link is supposed to do. Sighted visitors using a keyboard, however, have nothing but a faint dotted line surrounding the element to indicate where they are on the page.
You’ll note that one of the key methods screen reader users will have available to them when navigating this site is the ability to skip from link to link. This brings me to the final accessibility item I’m going to address for this site: the text of links. Lori’s Wigsite makes frequent use of link text phrased in variations of “Click here for color chart.” Link text that doesn’t include information about the destination page is significantly less useful to a screen reader user than more detailed link text. If that entire phrase above was linked, it would be immediately evident what purpose it was intended to serve. Looking at link text out of context is a great way to determine whether they help your users. If you can tell where a link will take you without seeing any of the surrounding copy, that link is well marked.
What should Lori’s Wigsite do next? There are a few simple things that can be done to this site that would greatly increase its accessibility. Here are five key recommendations:
- Add alt attributes with null values to all spacing and ornamental images.
- Edit the templates to use heading elements to organize the navigation menu and the main content.
- Define a change in appearance for links when they’re being hovered over by a mouse or activated by the keyboard.
- Add skip links to the top of the page to allow keyboard navigators to skip the navigation.
- Look over the text of links on the site with a goal towards providing meaningful but concise link text.
Request an accessibility review by emailing email@example.com.