Ecommerce Webcessibility
February 10th, 2009 at 11:58 pm
Everyone seems to have a very strong opinion (partly because these battles are hashed out on the Internet, breeding ground for flamewars) about how to go about building the “best” websites. There are still table-advocates, semantic-markup cheerleaders, CSS gurus, W3C fans and cynics, and those who comply with section 508 grudgingly – the whole spectrum. I’ve taken the approach that table-less, W3C valid, and accessible websites are the best way to go, and have worked at educating others to that effect too. Today I’d like to focus on accessibility, particularly for e-commerce.
When updating the fairly simple (non-dynamic, PayPal cart) online catalog page for one of my clients recently, I discovered it needed a semantic HTML, standards, and accessibility makeover. The first two changes were relatively easy, as I’ve performed similar procedures on many websites. However, I came across a sort of stumbling block as I looked at including accessibility features in the catalog, particularly when it came to images.
Usually alt attributes on images are essential for accessibility. I usually describe alt text as a way to let people who are not actually seeing the image have an alternative experience of it. This means if the image is a graphic and contains text (buttons, logos, etc.), the alt text should definitely contain that text. If it’s a photograph I recommend giving a fairly detailed sentence or phrase literally describing the content. If the image is a spacer or has a caption that would be like what you’d usually use for the alt text nearby, good practice is to use an empty alt value (alt=”").
What about images of products in my client’s online catalog? On one hand, the names of the products are adjacent to the pictures of them. So, the product name could serve as enough of a caption and I could use an empty alt value. I could do this on the product detail page too, and rely on both the product’s name and extended description to serve as that sort of “caption.”
While this solution was my first impulse, I had some hesitation. The particular items we’re selling (hands-on early elementary education materials) are often described on the individual item page in terms of their use and relationship to the other materials, not necessarily by their physical or visual description. Therefore, is it enough to simply rely on our existing verbiage to support the photograph? Could one imagine a case where someone with a disability or simply one who chooses not to have images shown would want to select items based on physical description rather than details of use? Is it right to even ask those questions or try to figure out a case for that when we should strive for Universal Access (the principle of designing something to be the best for everyone, not making a particular accommodation for a particular group)? Should the item descriptions be reworded to include both types of information? Would that amount of information, either in the description or in the alt text, be too cumbersome for someone using a screen reader? Does that then mean I make the visual description, well, less descriptive? Then does that sacrifice something?
Not knowing quite how to deal with this, I did some searching around for how other folks dealt with the issue. There’s fairly little online literature on this particular conundrum, but I did find a few things. Many, it seemed, were dealing with products whose descriptions were naturally more visual and therefore did not quite answer my conundrum. The web designers in those cases seemed to often use an empty alt text.
So far I’ve sort of settled on the following solution: On the main, gallery-style catalog page I changed the link to each item detail page so that a single instance of the link tag surrounds both the product thumbnail and name. Then I made the alt text for the thumbnail images blank. On the item detail pages I also went with blank alt text, in hopes that the existing descriptions would be enough. What do you think? Do you agree with my choice or one of the other options? Have other ideas about how to deal with this? I’d love to hear.
Further reading: Top Ten Mistakes of Shopping Cart Design Revisited, Accessify Forums on revisiting alt tags, and maybe the best: Alt text on W3C mailing list.
Tags: accessibility, web design
Word count: 722